1、伸縮項目的布局方式-從左到右

---

<ul id="Layout1" class="box"><li>1</li><li>1</li><li>1</li></ul> .box{width: 250px;padding: 10px;background: #999;margin: 10px; } .box li{width: 100px;height: 100px;border:1px solid #666; } #Layout1 {/*伸縮容器*/display: -webkit-box;display: -moz-box;display: -webkit-flex;display: flex;/*伸縮項目的布局方式-從左到右*//*box以下寫法box-orient: horizontal | vertical | inline-axis | block-axishorizontal: 設置伸縮盒對象的子元素從左到右水平排列vertical: 設置伸縮盒對象的子元素從上到下縱向排列inline-axis: 設置伸縮盒對象的子元素沿行軸排列block-axis: 設置伸縮盒對象的子元素沿塊軸排列*/-webkit-box-orient: horizontal;-moz-box-orient: horizontal;/*flex以下寫法flex-flow: [ flex-direction ] || [ flex-wrap ][ flex-direction ]: 定義彈性盒子元素的排列方向。[ flex-wrap ]: 定義彈性盒子元素溢出父容器時是否換行。flex-direction: row | row-reverse | column | column-reverserow: 橫向從左到右排列（左對齊），默認的排列方式。row-reverse: 反轉橫向排列（右對齊，從后往前排，最后一項排在最前面。column: 縱向排列。row-reverse: 反轉縱向排列，從后往前排，最后一項排在最上面。flex-wrap: nowrap | wrap | wrap-reversenowrap: 當子元素溢出父容器時不換行。wrap: 當子元素溢出父容器時自動換行。wrap-reverse: 反轉 wrap 排列。*/-webkit-flex-direction: row;flex-flex-direction: row; }

?

2、伸縮項目的布局方式-從左到右自動換行

---

<ul id="Layout2" class="box"><li>2</li><li>2</li><li>2</li></ul> .box{width: 250px;padding: 10px;background: #999;margin: 10px; } .box li{width: 100px;height: 100px;border:1px solid #666; } #Layout2 {display: -webkit-box;display: -moz-box;display: -webkit-flex;display: flex;-webkit-box-orient: vertical;-moz-box-orient: vertical;-webkit-flex-direction: row;flex-flex-direction: row;-webkit-flex-wrap: wrap;flex-wrap: wrap; }

?

3、伸縮項目的布局方式-從上到下排列

---

?

<ul id="Layout3" class="box"><li>3</li><li>3</li><li>3</li></ul> .box{width: 250px;padding: 10px;background: #999;margin: 10px; } .box li{width: 100px;height: 100px;border:1px solid #666; } #Layout3 {display: -webkit-box;display: -moz-box;display: -webkit-flex;display: flex;-webkit-box-orient: vertical;-moz-box-orient: vertical;-webkit-flex-direction: column;flex-flex-direction: column; }

?

4、伸縮項目的布局方式-子元素從左到右按比率填充

---

?

<ul id="Layout4" class="box"><li>4</li><li>4</li><li>4</li></ul> .box{width: 250px;padding: 10px;background: #999;margin: 10px; } .box li{width: 100px;height: 100px;border:1px solid #666; } #Layout4 {display: -webkit-box;display: -moz-box;display: -webkit-flex;display: flex;-webkit-box-orient: horizontal;-moz-box-orient: horizontal;-webkit-flex-direction: row;flex-flex-direction: row; } #Layout4 li:nth-child(1){width: auto;/*伸縮盒對象的子元素*//*box以下寫法box-flex: <number><number>: 使用浮點數指定對象所分配其父元素剩余空間的比例。*/-moz-box-flex:1;-webkit-box-flex:1;/*flex以下寫法flex-grow: <number><number>: 用數值來定義擴展比率。不允許負值 */-webkit-flex-grow:1;flex-grow:1; } #Layout4 li:nth-child(2){width: auto;-moz-box-flex:2;-webkit-box-flex:2;-webkit-flex-grow:2;flex-grow:2; } #Layout4 li:nth-child(3){width: auto;-moz-box-flex:3;-webkit-box-flex:3;-webkit-flex-grow:3;flex-grow:3; }

?

5、伸縮項目的布局方式-子元素從上到下按比率填充

---

?

<ul id="Layout5" class="box"><li>5</li><li>5</li><li>5</li></ul> .box{width: 250px;padding: 10px;background: #999;margin: 10px; } .box li{width: 100px;height: 100px;border:1px solid #666; } #Layout5 {height: 250px;display: -webkit-box;display: -moz-box;display: -webkit-flex;display: flex;-webkit-box-orient: vertical;-moz-box-orient: vertical;-webkit-flex-direction: column;flex-flex-direction: column; } #Layout5 li {height: auto; } #Layout5 li:nth-child(1){-moz-box-flex:1;-webkit-box-flex:1;-webkit-flex-grow:1;flex-grow:1; } #Layout5 li:nth-child(2){-moz-box-flex:2;-webkit-box-flex:2;-webkit-flex-grow:2;flex-grow:2; } #Layout5 li:nth-child(3){-moz-box-flex:3;-webkit-box-flex:3;-webkit-flex-grow:3;flex-grow:3; }

?

6、伸縮項目的布局方式-橫向子元素對齊方式

---

?

<ul id="Layout6" class="box"><li>6</li><li>6</li><li>6</li></ul> .box{width: 250px;padding: 10px;background: #999;margin: 10px; } .box li{width: 100px;height: 100px;border:1px solid #666; } #Layout6 {display: -webkit-box;display: -moz-box;display: -webkit-flex;display: flex;/*伸縮盒對象的子元素對齊方式*//*box以下寫法box-pack: start | center | end | justifystart: 設置伸縮盒對象的子元素從開始位置對齊（大部分情況等同于左對齊，受） center: 設置伸縮盒對象的子元素居中對齊 end: 設置伸縮盒對象的子元素從結束位置對齊（大部分情況等同于右對齊） justify: 設置或伸縮盒對象的子元素兩端對齊*/-moz-box-pack:justify;-webkit-box-pack:justify;/*flex以下寫法justify-content: flex-start | flex-end | center | space-between | space-aroundflex-start: 彈性盒子元素將向行起始位置對齊。該行的第一個子元素的主起始位置的邊界將與該行的主起始位置的邊界對齊，同時所有后續的伸縮盒項目與其前一個項目對齊。flex-end: 彈性盒子元素將向行結束位置對齊。該行的第一個子元素的主結束位置的邊界將與該行的主結束位置的邊界對齊，同時所有后續的伸縮盒項目與其前一個項目對齊。center: 彈性盒子元素將向行中間位置對齊。該行的子元素將相互對齊并在行中居中對齊，同時第一個元素與行的主起始位置的邊距等同與最后一個元素與行的主結束位置的邊距（如果剩余空間是負數，則保持兩端相等長度的溢出）。space-between: 彈性盒子元素會平均地分布在行里。如果最左邊的剩余空間是負數，或該行只有一個子元素，則該值等效于'flex-start'。在其它情況下，第一個元素的邊界與行的主起始位置的邊界對齊，同時最后一個元素的邊界與行的主結束位置的邊距對齊，而剩余的伸縮盒項目則平均分布，并確保兩兩之間的空白空間相等。space-around: 彈性盒子元素會平均地分布在行里，兩端保留子元素與子元素之間間距大小的一半。如果最左邊的剩余空間是負數，或該行只有一個伸縮盒項目，則該值等效于'center'。在其它情況下，伸縮盒項目則平均分布，并確保兩兩之間的空白空間相等，同時第一個元素前的空間以及最后一個元素后的空間為其他空白空間的一半。*/-webkit-justify-content:space-between;justify-content:space-between; } #Layout6 li {width: 50px; }

?

7、伸縮項目的布局方式-縱向子元素對齊方式

---

?

<ul id="Layout7" class="box"><li>7</li><li>7</li><li>7</li></ul> .box{width: 250px;padding: 10px;background: #999;margin: 10px; } .box li{width: 100px;height: 100px;border:1px solid #666; } #Layout7 {height: 250px;display: -webkit-box;display: -moz-box;display: -webkit-flex;display: flex;-webkit-box-orient: vertical;-moz-box-orient: vertical;-webkit-flex-direction: column;flex-flex-direction: column;-moz-box-pack:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center; } #Layout7 li {height: 50px; }

轉載于:https://www.cnblogs.com/xiao-bai-yujia/p/4501074.html

總結

以上是生活随笔為你收集整理的CSS3 box flex 布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。