彈性盒屬相文檔詳細(xì)介紹
display:flex;
聲明本元素是彈性盒容器
如果目標(biāo)元素是行內(nèi)元素 使用display:inline-flex;
flex-direction
| 取值 | 描述 |
|---|---|
| row | 默認(rèn)值 ,彈性盒子元素按X軸方向順序排列 |
| row-reverse | 彈性盒子元素按照X軸風(fēng)向逆序排列 |
| column | 彈性盒子元素按照Y軸方向順序排列 |
| column-reverse | 彈性盒子元素按照Y軸方向逆序排列 |
flex-wrap
| 取值 | 描述 |
|---|---|
| nowrap | 默認(rèn)值，flex子元素只會(huì)單行顯示誊酌，flex子元素過多會(huì)溢出容器，不會(huì)開始新行 |
| wrap | flex子元素可以顯示多行灵汪，超出的部分會(huì)放到新行 |
| wrap-reverse | flex子元素可以顯示多行，只不過會(huì)反轉(zhuǎn)顯示（不是逆序） |
justify-content
設(shè)置子元素在X軸方向的排列
| 取值 | 描述 |
|---|---|
| flex-start | 彈性盒子元素以起始元素對齊（類似與不改變子元素順序的 左 浮動(dòng)） |
| flex-end | 彈性盒子元素以結(jié)束位置對齊（類似與不改變子元素順序的右浮動(dòng)） |
| center | 彈性盒子元素向行中間位置顯示 |
| space-between | 彈性盒子元素平均的分布在行里，第一個(gè)與起始位置邊界對其互墓，最后一個(gè)以結(jié)束位置邊界對齊 |
| space-around | 彈性盒子元素會(huì)平均的分布在行里，兩端保留了子元素與子元素之間距離大小的一半（兩端指得是起始位置和結(jié)束位置） |
align-items
設(shè)置子元素在Y軸方向的排列
| 取值 | 描述 |
|---|---|
| flex-start | 彈性盒子元素以起始元素對齊 |
| flex-end | 彈性盒子元素以結(jié)束位置對齊 |
| center | 彈性盒子元素向行中間位置顯示 |
| baseline | 如果彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條宋欺，則該值與flex-start等效轰豆，其他情況下胰伍，該軸將與參與基線對齊 |
| stretch | 如果指定側(cè)軸大小屬相值為“auto”齿诞，則其值會(huì)使項(xiàng)目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時(shí)會(huì)遵照“min/max-width/height”屬相的限制 |
order
設(shè)置彈性盒子元素出現(xiàn)的順序 值為： Number
flex
簡寫方式:flex:1 0 auto;
| 屬相 | 取值 |
|---|---|
| flex-grow(擴(kuò)展比率) | Number |
| flex-shrink(收縮比) | Number |
| flex-basis(寬度像素值) | Number/auto |
align-self
可以覆蓋align-items屬相用于設(shè)置單個(gè)子元素如何沿著Y軸排列 （其取值和align-item類似）
| 取值 | 描述 |
|---|---|
| flex-start | 彈性盒子元素以起始元素對齊 |
| flex-end | 彈性盒子元素以結(jié)束位置對齊 |
| center | 彈性盒子元素向行中間位置顯示 |
| baseline | 如果彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條骂租，則該值與flex-start等效祷杈，其他情況下，該軸將與參與基線對齊 |
| stretch | 如果指定側(cè)軸大小屬相值為“auto”渗饮，則其值會(huì)使項(xiàng)目的邊距盒的尺寸盡可能接近所在行的尺寸但汞，但同時(shí)會(huì)遵照“min/max-width/height”屬相的限制 |
flex-flow
flex-flow是flex-wrap和flex-direction的簡寫，用于排列彈性盒子元素
注意
注意以下屬相對彈性盒不起作用
- 彈性容器中的每一個(gè)子元素變?yōu)橐粋€(gè)彈性子元素互站，彈性容器直接包含的文本變?yōu)槟涿膹椥院凶釉?/li>
- 多列布局中olumn-*屬相對彈性子元素?zé)o效
- float 和 clear 對彈性子元素?zé)o效私蕾。使用float會(huì)導(dǎo)致display屬相計(jì)算為block。
- vertical-align 對彈性盒子元素的對齊無效胡桃。
