flexbox

由主軸跟副軸組成，目前排版主流

宣告 `display: flex`

display: flex;
display: inline-flex;

<style>
    *,
    *::after,
    *::before {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    .flex {
        display: flex;
        background: yellow;
        width: 90%;
        margin: 20px auto;
        height: 300px;
    }

    .flex-item {
        width: 100px;
        height: 100px;
        background: #000;
        color: #fff;
        margin: 0 10px;
    }
</style>

<div class="flex">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
</div>

demo

flex 內的區塊元素，不會佔據整列

方向 `flex-direction`

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

row 由左到右 (預設)

row-reverse 由右到左

column 由上到下

column-reverse 由下到上

demo

內容超出行為 `flex-wrap`

flex-wrap: no-wrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;

no-wrap 不換行，內容寬高會自動調整 (預設)

wrap 換行

wrap-reverse 換行，上下反轉

demo

主軸對齊 `justify-content`

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

flex-start 靠左 (預設)

flex-end 靠右

center 置中

space-around 左右平均寬度分散

space-between 左右貼平分散

space-evenly 平均分散

demo

副軸對齊 `align-content`

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

flex-start 靠上 (預設)

flex-end 靠下

center 置中

space-around 上下平均寬度分散

space-between 上下貼平分散

space-evenly 平均分散

demo

要設定 flex-wrap: wrap; 才會有效果

副軸內容對齊 `align-items`

align-items: stretch;
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;

stretch 高度延伸，內容區塊有設定高度時，則依據高度為主 (預設)

flex-start 靠上

flex-end 靠下

center 置中

baseline 內容基準線

demo

排序 `order`

order: 1;
order: -1;

數字越小越前面，預設 0

demo

練習

使用 flex 重新切版切版初體驗

參考資源

flexbox froggy

前端開發