Flex布局

  1. 基本概念
    任何一個(gè)容器都可以指定為flex（彈性布局）
    行級(jí)元素：display：inline-flex
    webkit內(nèi)核瀏覽器：display：-webkit-flex
    設(shè)置為flex布局后，子元素的float、clear、vertical-align屬性失效
    容器默認(rèn)為兩根主軸：水平的主軸和垂直的交叉軸
  2. 容器的六大屬性
    a. flex-direction 決定主軸的方向 默認(rèn)為row
    flex-direction：row/row-reverse/column/column-reverse
    row:主軸為水平方向，起點(diǎn)在左邊
    row-reverse:主軸為水平方向，起點(diǎn)在右邊
    column:主軸為垂直方向，起點(diǎn)在上邊
    column:主軸為垂直方向，起點(diǎn)在下邊
    b. flex-wrap 當(dāng)一條主軸上排列不下時(shí)，如何換行 默認(rèn)為nowrap
    flex-wrap:nowrap/wrap/wrap-reverse
    nowrap:不換行
    wrap:換行，第一行顯示在上面
    wrap-reverse：換行，第二行顯示在上面
    c. flex-flow flex-direction和flex-wrap的簡(jiǎn)寫(xiě)形式，默認(rèn)為row nowrap
    flex-flow：flex-direction || flex-wrap
    d. justify-content 項(xiàng)目在主軸上的方向
    justify-content:flex-start/flex-end/center/space-between/space-around
    flex-start:左對(duì)齊
    flex-end：右對(duì)齊
    center：居中
    space-between：兩端對(duì)齊，項(xiàng)目之間的間隔相等
    space-around:每個(gè)項(xiàng)目?jī)蓚?cè)的間隔都相等，所以項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍
    e. align-items 項(xiàng)目在交叉軸上如何對(duì)齊 默認(rèn)值為stretch
    align-items:flex-start/flex-end/center/baseline/stretch
    flex-start:交叉軸的起點(diǎn)對(duì)齊
    flex-end：交叉軸的終點(diǎn)對(duì)齊
    center：交叉軸的中點(diǎn)對(duì)齊
    baseline：項(xiàng)目的第一行文字的基線(xiàn)對(duì)齊
    stretch：項(xiàng)目未設(shè)置高度或高度為auto時(shí)，將占滿(mǎn)整個(gè)容器的高度
    f.align-center
    f. align-content 多根軸線(xiàn)的對(duì)齊方式，一根軸線(xiàn)時(shí)不起作用 ，默認(rèn)為stretch
    align-content:flex-start/flex-end/center/space-between/space-around/stretch
    flex-start:與交叉軸的起點(diǎn)對(duì)齊
    flex-end：與交叉軸的終點(diǎn)對(duì)齊
    center：與交叉軸的中點(diǎn)對(duì)齊
    space-between：與交叉軸兩端對(duì)齊，軸線(xiàn)之間的間隔平均分布
    space-around：每根軸線(xiàn)兩側(cè)的間隔都相等，所以軸線(xiàn)之間的間隔比軸線(xiàn)與邊框之間的間隔大一倍
    stretch：軸線(xiàn)占滿(mǎn)整個(gè)交叉軸
  3. 項(xiàng)目的六大屬性
    a. order 項(xiàng)目的排列順序，數(shù)值越小，排列越靠前，默認(rèn)值為0
    order：int
    b.flex-grow 項(xiàng)目的放大比例，默認(rèn)為0，如果存在剩余空間也不放大
    flex-grow：number
    如果所有項(xiàng)目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話(huà)）。如果一個(gè)項(xiàng)目的flex-grow屬性為2，其他項(xiàng)目都為1，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍。
    c.flex-shrink 項(xiàng)目的縮小比例，默認(rèn)為1，如果空間不足也不縮小
    flex-shrink：number
    如果所有項(xiàng)目的flex-shrink屬性都為1，當(dāng)空間不足時(shí)，都將等比例縮小。如果一個(gè)項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1，則空間不足時(shí)，前者不縮小。
    負(fù)值對(duì)該屬性無(wú)效
    d.flex-basis 在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間，瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間，默認(rèn)值為auto，即項(xiàng)目本來(lái)的大小
    flex-basis：lenght | auto
    可以設(shè)置為width\height屬性一樣的值，項(xiàng)目占據(jù)固定空間
    e.flex flex屬性是flex-grow，flex-shrink，flex-basis的簡(jiǎn)寫(xiě)，默認(rèn)值為：0 1 auto，后兩個(gè)屬性可選
    flex: none | [ <'flex-grow'> <'flex-shrink'> || <'flex-basis'> ]
    f. align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒(méi)有父元素，則等同于stretch。
    align-self: auto | flex-start | flex-end | center | baseline | stretch
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀(guān)點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容