互聯(lián)網(wǎng)發(fā)展至今，界面的搭建基本都是采用CSS的布局，基于盒子模型，依賴 display屬性 ， position屬性， float屬性。但對于那些特殊布局非常不方便，比如，垂直居中。一種全新的針對web和移動開發(fā)布局應(yīng)運而生：Flex布局，可以簡便、完整、響應(yīng)式地實現(xiàn)各種頁面布局。目前，它已經(jīng)得到了所有瀏覽器的支持，這意味著，現(xiàn)在就能很安全地使用這項功能。

Flex是Flexible Box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。設(shè)為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。

任何一個容器都可以指定為Flex布局。

#box{
display: flex;
width: 500px;
height: 300px;
border: 10px solid red;
}

首先要有個容器，并設(shè)置display:flex;display:-webkit-flex;該容器有以下六個屬性：

flex-direction (元素排列方向)
row, row-reverse, column, column-reverse
flex-wrap (換行)
nowrap, wrap, wrap-reverse
flex-flow (以上兩者的簡寫)
flex-direction || flex-wrap
justify-content (水平對齊方式)
flex-start, flex-end, center, space-between, space-around
align-items (垂直對齊方式)
stretch, flex-start, flex-end, center, baseline
align-content (多行垂直對齊方式)
stretch, flex-start, flex-end, center, space-between, space-around

項目的屬性：

order 排列順序，數(shù)值，默認(rèn)0
"integer"
flex-grow 如圖示7，定義放大比例，默認(rèn)0，即如果存在剩余空間，也不放大。
"number"
flex-shrink 如圖示8，定義縮小比例，默認(rèn)1，如果所有項目的flex-shrink屬性都為1，當(dāng)空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。
"number"
flex-basis 定義項目占據(jù)的主軸空間，默認(rèn)auto。會根據(jù)flex-direction定義的主軸（水平或者垂直），定義項目本來的大小，跟width或者h(yuǎn)eight一樣。
flex 推薦，以上三個的縮寫，默認(rèn) 0 1 auto
"flex-grow" "flex-shrink" "flex-basis"
align-self 如圖示9，單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items
"auto","flex-start","flex-end","center","baseline","stretch"　

屬性詳解：

1.flex-direction

row (從左往右)默認(rèn)
row-reverse (從右往左)
column (從上往下)
column-reverse (從下往上)

2.flex-wrap

nowrap (不換行)默認(rèn)
wrap (換行，且往下一行換)
wrap-reverse (換行，且往上一行換)

3.flex-flow，是flex-direction和flex-wrap的簡寫形式。

flex-flow:<flex-direction> || <flex-wrap>;

4.justify-content

flex-start
flex-end
center
space-between
space-around

5.align-items

stretch 默認(rèn)
flex-start
flex-end
center
baseline 項目第一行文字的基準(zhǔn)線對齊

6.align-content

stretch 默認(rèn)
flex-start
flex-end
center
space-between
space-around

7.flex-grow

定義了放大比例，默認(rèn)為0，即如果存在剩余空間，也不會放大。但是，如果所有項目的flex-grow屬性為1，則他們將等分剩余空間（如果有的話），如果其中一個為2，則他是其他項目的2倍寬度。

8.flex-shrink

定義了項目的縮小比例，默認(rèn)為1，即如果空間不足，項目將縮小。如果有一個項目的flex-shrink為0，其他都為1，空間不足時，前者不縮小。

9.align-self，定義項目自己的對齊方式

轉(zhuǎn)載于:https://www.cnblogs.com/yukeyan/p/9407792.html

總結(jié)

以上是生活随笔為你收集整理的便捷的flex弹性布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。