Flex佈局

時間 2019-11-07

標籤 flex 佈局欄目 Flex 简体版

原文原文鏈接

經常會由於元素居中之類的問題苦惱，這時就能夠藉助Flex（Flexible Box），它爲盒狀模型提供強大的靈活性。css

採用Flex佈局的元素，稱爲Flex容器，簡稱「容器」，容器子元素稱爲Flex項目，簡稱「項目」。
html

兩軸：主軸（main axis）、交叉軸（cross axis）；css3

兩軸起始位置：main start和main end、cross start和cross end；ide

display:other values | flex | inline-flex;

css的columns在伸縮容器上沒有效果佈局

float、clear和vertical-align在伸縮項目上沒有效果flex

屬性	說明	特性
flex-direction	主軸方向	排列
flex-wrap	項目換行效果	排列
flex-flow	flex-direction和flex-wrap複合屬性	排列
justify-content	定義伸縮項目沿着主軸線的對齊方式	對齊
align-items	定義子項在容器內沿側軸線的對齊方式	對齊
align-content	調準伸縮行在伸縮容器裏的對齊方式	對齊

屬性	說明	特性
order	控制伸縮項目在他們的伸縮容器出現的順序	排列
flex-grow	定義子項寬度之和不足父元素寬度時，子項拉伸的比例	面積
flex-shrink	定義子項寬度之和超過父元素寬度時，子項縮放的比例	面積
flex-basis	定義子項的初始寬度，若子項寬度之和超過父元素寬度時，子項按照flex-basis的比例縮放	對齊
flex	flex-grow、flex-shrink、flex-basis縮寫	面積
align-self	定義單個子項與其餘項目不同的對齊方式	對齊

flex-direction(建立主軸，定義項目的方向)ui

flex-direction: row | row-reverse | column | column-reverse;

row(默認值)：在「ltr」排版方式下從左向右排列；在「rtl」排版方式下從右向左排列。flexbox

flex-wrap(項目換行)spa

flex-wrap: nowrap | wrap | wrap-reverse;

justify-content(定義伸縮項目沿着主軸線的對齊方式)

justify-content: flex-start | flex-end | center | space-between | space-around;

align-items(定義伸縮項目能夠在伸縮容器的當前行的側軸上對齊方式)
```
align-items: flex-start | flex-end | center | baseline | stretch;
```

align-content(調準伸縮行在伸縮容器裏的對齊方式)

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

請注意本屬性在只有一行的伸縮容器上沒有效果

order(控制伸縮項目在他們的伸縮容器出現的順序)
```
order:[integer] /* 傳入整數，default 0 */
```
flex-grow(定義子項寬度之和不足父元素寬度時，子項拉伸的比例)
```
flex-grow:[number] // 傳入數字,default 0
```
flex-shrink(定義子項寬度之和超過父元素寬度時，子項縮放的比例)
```
flex-shrink:[number] // 傳入數字， default 1
```
flex-basis(定義子項的初始寬度，若子項寬度之和超過父元素寬度時，子項按照flex-basis的比例縮放)
```
flex-basis: [length] | [percentage]  | auto; /* default auto*/
```
flex(flex-grow、flex-shrink、flex-basis縮寫)
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。

align-self(定義單個子項與其餘項目不同的對齊方式)

align-self: auto | flex-start | flex-end | center | baseline | stretch;

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。