Flex佈局教程

時間 2020-05-09

標籤 flex 佈局教程欄目 Flex 简体版

原文原文鏈接

前言

本篇爲學習筆記。內容來自網絡。css

佈局的傳統解決方案，基於盒狀模型，依賴 display 屬性 + position 屬性 + float 屬性。它對於那些特殊佈局很是不方便，好比，垂直居中就不容易實現。html

flexbox 是一種一維的佈局，是由於一個 flexbox 一次只能處理一個維度上的元素佈局，一行或者一列。做爲對比的是另一個二維佈局 CSS Grid Layout，能夠同時處理行和列上的佈局。瀏覽器

基本概念

採用 Flex 佈局的元素，稱爲 Flex 容器（flex container），簡稱"容器"。它的全部子元素自動成爲容器成員，稱爲 Flex 項目（flex item），簡稱"項目"。網絡

容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫作 main start，結束位置叫作 main end；交叉軸的開始位置叫作 cross start，結束位置叫作 cross end。佈局

容器屬性

flex-direction

flex-direction 屬性決定主軸的方向（即項目的排列方向）。學習

row（默認值）：主軸爲水平方向，起點在左端。
row-reverse：主軸爲水平方向，起點在右端。
column：主軸爲垂直方向，起點在上沿。
column-reverse：主軸爲垂直方向，起點在下沿。

flex-wrap

flex-wrap 決定如何換行flex

nowrap（默認）：不換行。
wrap：換行，第一行在上方。
wrap-reverse：換行，第一行在下方。

flex-flow

flex-flow 屬性是 flex-direction 屬性和 flex-wrap 屬性的簡寫形式，默認值爲 row nowrap。(2 個屬性組合)flexbox

justify-content

justify-content 屬性定義了項目在主軸上的對齊方式。(默認是水平方向對齊方式，如水平居中等)spa

flex-start（默認值）：左對齊
flex-end：右對齊
center：居中
space-between：兩端對齊，項目之間的間隔都相等。
space-around：每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍。

align-items

align-items 屬性定義項目在交叉軸上如何對齊。code

flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊。
stretch（默認值）：若是項目未設置高度或設爲 auto，將佔滿整個容器的高度。

align-content

align-content 屬性定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用。

flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
space-around：每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認值）：軸線佔滿整個交叉軸

項目屬性

如下 6 個屬性設置在項目上。

order
flex-grow
flex-shrink
flex-basis
flex
align-self

order

order 屬性定義項目的排列順序。數值越小，排列越靠前，默認爲 0。

flex-grow

flex-grow 屬性定義項目的放大比例，默認爲 0，即若是存在剩餘空間，也不放大。

若是全部項目的 flex-grow 屬性都爲 1，則它們將等分剩餘空間（若是有的話）。若是一個項目的 flex-grow 屬性爲 2，其餘項目都爲 1，則前者佔據的剩餘空間將比其餘項多一倍。

flex-shrink

flex-shrink 屬性定義了項目的縮小比例，默認爲 1，即若是空間不足，該項目將縮小。

若是全部項目的 flex-shrink 屬性都爲 1，當空間不足時，都將等比例縮小。若是一個項目的 flex-shrink 屬性爲 0，其餘項目都爲 1，則空間不足時，前者不縮小。

負值對該屬性無效。

flex-basis

flex-basis 屬性定義了在分配多餘空間以前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲 auto，即項目的原本大小。

它能夠設爲跟 width 或 height 屬性同樣的值（好比 350px），則項目將佔據固定空間。

flex

flex 屬性是 flex-grow, flex-shrink 和 flex-basis 的簡寫，默認值爲 0 1 auto。後兩個屬性可選。

該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建議優先使用這個屬性，而不是單獨寫三個分離的屬性，由於瀏覽器會推算相關值。

align-self

align-self 屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋 align-items 屬性。默認值爲 auto，表示繼承父元素的 align-items 屬性，若是沒有父元素，則等同於 stretch。

案例

默認佈局

html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="content box">
        <div class="item"></div>
    </div>
</body>
</html>
複製代碼

css

.content {
        width: 210px;
        height: 210px;
        border: 1px solid red;
    }
    .item {
        width: 60px;
        height: 60px;
        background-color: blue;
        margin: 10px;
    }
    .box {
        display: flex;
        flex-direction: row;
    }
複製代碼

主軸 row 水平居中

.box {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
複製代碼

主軸 column 水平居中

.box {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
複製代碼

主軸 row 垂直居中

.box {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
複製代碼

主軸 column 垂直居中

.box {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
複製代碼

水平垂直居中

.box {
        display: flex;
        justify-content: center;
        align-items: center;
    }
複製代碼

參考

相關標籤/搜索

每日一句

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