CSS Flex 佈局

簡介

flex全稱是Flexible Box意思為靈活的盒子，是W3C提供的一種佈局方案。

練習

以下內容截圖來源於網頁練習，請在完成後有疑問再閱讀下列內容。

https://hexschool.github.io/flexbox-pirate/index.html?fbclid=IwAR1PqY5wFdWZXCZ6dqLkfaOwikSUUYRHlshPGyyhr3hNuo6d3QovhKjnxmw#/play

開始使用上，我們需要先將 display 屬性由 block 修改爲 flex

{
    display:block
}

{
    display:flex
}

justify-content 用於控制主軸線方向的排列，有 flex-start、flex-end、space-around、center、space-betwee 等屬性

{
    display:flex;
}

{
    display:flex;
    justify-content: flex-end;
}

{
    display:flex;
    jusitify-content: center
}

{
    display:flex;
    justify-content:space-around;
    // 主線上的平均分配
}

{
    display:flex;
    justify-content:space-between;
    // 主線上的齊頭齊尾
}

align-items 用於控制交錯軸方向上排列，align-items 有 flex-start、flex-end、center、space-between、stretch、baseline等屬性

{
    display:flex;
}

{
    display:flex;
    align-items:flex-end;
}

{
    display:flex;
    align-items:center;
}

{
    display:flex;
    align-items:center;
    justify-content:center
}

{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
}

flex-wrap 屬性定義，如果一條線排不下，如何換行。有 nowrap、wrap、wrap-reverse 等屬性。

display:flex;
flex-wrap:wrap;

{
    display:flex;
    flex-wrap:wrap-reverse;
}

{
    display:flex;
    align-content:flex-start;
    flex-wrap:wrap;
}

align-content 屬性定義了多根軸線的對齊方式，如果只有一條軸線，該屬性不起作用。簡單來說就是有換行行爲出現的時候，才使用align-content。flex-start | flex-end | center | space-between | space-around | stretch;

{
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
    align-content: space-between;
}

flex-direction　用於控制主軸線方向，有row、row-reverse、column、column-reverse 等屬性

{
    display:flex;
    flex-direction:column;
    align-items:center;
}

{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

{
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    align-items:center;
}

{
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    justify-content:center;
}

{
    display:flex;
    flex-direction:column;
    flex-wrap:wrap-reverse;
    align-content:space-between;
}

{
    display:flex;
    flex-direction:column;
    flex-wrap:wrap-reverse;
    align-content:flex-start;
    justify-content:center;
}

{
    display:flex;
    flex-direction:row-reverse;
    justify-content:center;
    align-items:center;
}