Flex Box 簡單彈性布局

ixlei 發布于2019-04-23 13:33 / 891人閱讀

摘要：彈性盒子模型有兩種規范早起的和后期的。它可以輕易的實現均分浮動居中等靈活布局，在移動端只考慮內核時很實用。一固定寬度占滿剩余寬度垂直方向對齊方式水平方向對齊方式二固定寬度剩余空間的剩余空間的水平方向對齊方式垂直方向對齊方式

　　彈性盒子模型有兩種規范：早起的display:box 和后期的display:flex。它可以輕易的實現均分、浮動、居中等靈活布局，在移動端只考慮webkit內核時很實用。

一、display:box

 1     <div class="container">
 2         <div class="box1">box1<br/>固定寬度div>
 3         <div class="box2">box2<br>占滿剩余寬度div>
 4     div>
 5 
 6     <style type="text/css">
 7         .container{
 8             width: 400px;
 9             height: 120px;
10             border: 1px solid #ccc;
11             display: -webkit-box;
12             display: box;
13             -webkit-box-align: center;
14             box-align: center;
15             /*垂直方向對齊方式 box-align: start|end|center|baseline|stretch;*/
16             /*水平方向對齊方式 box-pack: start|end|center|justify;*/
17         }
18         .box1,.box2{
19             height: 100px;
20             margin: 0;
21             padding: 0;
22         }
23         .box1{
24             background: #aaa;
25             width: 100px;
26         }
27         .box2{
28             background: #ccc;
29             -webkit-box-flex:1.0;
30             box-flex:1.0;
31         }
32     style>

二、display:flex

 1     <div class="container">
 2         <div class="box1">固定寬度div>
 3         <div class="box2">剩余空間的1/3div>
 4         <div class="box3">剩余空間的2/3div>
 5     div>
 6 
 7     <style type="text/css">
 8         .container{
 9             width: 400px;
10             height: 120px;
11             border: 1px solid #ccc;
12             display: -webkit-flex;
13             display: flex;
14             -webkit-align-items: center;
15             align-items: center ;
16             /*水平方向對齊方式 justify-content: flex-start | flex-end | center | space-between | space-around;*/
17             /*垂直方向對齊方式 align-items: flex-start | flex-end | center | baseline | stretch;*/
18         }
19         .box1,.box2,.box3{
20             height: 100px;
21         }
22         .box1{
23             background: #bbb;
24             width: 100px;
25         }
26         .box2{
27             background: #ccc;
28             -webkit-flex:1;
29             flex:1;
30         }
31         .box3{
32             background: #ffffd;
33             -webkit-flex:2;
34             flex:2;
35         }
36     style>

GPU云服務器云服務器 flex布局 html簡單布局網站 box html box-

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/2032.html

我所知道的flex布局 —— 上篇

摘要：布局也經歷了一段演變歷史。不同于將要出現的網格布局針對目標為大比例布局，彈性盒布局更適用于應用組件和小比例布局。常規布局是基于塊和內聯流方向，而布局是基于流。前言你還在用display+position+float來進行css布局嗎？有沒有覺得用傳統的這種布局方法來實現特殊布局特別麻煩困難，例如：垂直居中。今天來記錄一下自己對flex布局的了解（雖然不算神馬新東西了都可以說是舊東西...

andycall 2019-08-30 13:13 評論0 收藏0
css3 彈性布局和多列布局

摘要：彈性盒子基礎彈性盒子是中盒子模型的彈性布局，在傳統的布局方式上增加了很多靈活性。定義一個彈性盒子在父盒子上定義屬性內核瀏覽器的兼容設置，下同當然還有行內布局的彈性盒子注意，設為布局以后，子元素的和屬性將失效。彈性盒子基礎彈性盒子(Flexible Box)是css3中盒子模型的彈性布局，在傳統的布局方式上增加了很多靈活性。定義一個彈性盒子在父盒子上定義display屬性： #b...

stormzhang 2019-08-29 16:38 評論0 收藏0
【基礎知識】Flex-彈性布局原來如此簡單！！

摘要：年，提出了一種新的方案，是的縮寫，意為彈性布局。它的所有子元素自動成為容器成員，稱為項目，簡稱項目。屬性分為兩部分，一部分作用于容器稱容器屬性，另一部分作用于項目稱為項目屬性。表示不縮小，負值無效。后兩個是可選屬性。相關資源布局語法教程簡言布局的傳統解決方案是基于盒狀模型，依賴 display + position + float 方式來實現，靈活性較差。2009年，W3C提出了一...

xbynet 2019-08-30 14:21 評論0 收藏0
彈性盒布局

一、彈性布局彈性布局，又稱Flex布局 1、彈性布局的使用給父容器添加display: flex/inline-flex;屬性，即可使容器內容采用彈性布局顯示，而不遵循常規文檔流的顯示方式容器添加彈性布局后，僅僅是容器內容采用彈性布局，而容器自身在文檔流中的定位方式依然遵循常規文檔流； display:flex; 容器添加彈性布局后，顯示為塊級元素； display:inline-fle...

whatsns 2019-08-29 16:13 評論0 收藏0
彈性盒布局

一、彈性布局彈性布局，又稱Flex布局 1、彈性布局的使用給父容器添加display: flex/inline-flex;屬性，即可使容器內容采用彈性布局顯示，而不遵循常規文檔流的顯示方式容器添加彈性布局后，僅僅是容器內容采用彈性布局，而容器自身在文檔流中的定位方式依然遵循常規文檔流； display:flex; 容器添加彈性布局后，顯示為塊級元素； display:inline-fle...

leanxi 2019-08-02 11:05 評論0 收藏0