原文鏈接 : https://lz5z.com/FlexLayoutLearning/
什么是 flex 布局
傳統布局的核心是盒子模型，依賴 display 屬性 + position 屬性 + float 屬性，可以看出來傳統布局非常容易實作像 word 左對齊，右對齊這樣的功能，可以說，傳統布局更適合于文字排版，
flex 是 flexible Box 的縮寫，可以看做彈性的盒子模型，
flex 用法
使用 flex 首先要設定父元素 display: flex，任何元素都可以指定為 flex 布局：
塊狀元素：
.box {
display: flex;
}
行內元素
.box {
display: inline-box;
}
設為 flex 布局以后，子元素的 float、clear 和 vertical-align 屬性將失效，
flex 兩個基本概念
flex 的核心的概念就是 容器 和 軸，容器包括外層的 父容器 和內層的 子容器，軸包括 主軸 和 交叉軸，如下圖所示：
容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis），主軸的開始位置叫做 main start，結束位置叫做 main end；交叉軸同理，子容器默認沿主軸排列，單個子容器占據的主軸空間叫做 main size，占據的交叉軸空間叫做 cross size，
容器具有這樣的特點：父容器可以統一設定子容器的排列方式，子容器也可以單獨設定自身的排列方式，如果兩者同時設定，以子容器的設定為準，
父容器
父容器一共有6個屬性: flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content
flex-direction 屬性決定主軸的方向
Untitled
flex-wrap 決定子容器是否換行排列
Untitled
flex-flow
flex-direction 屬性和 flex-wrap 屬性的簡寫形式，默認值為 row nowrap
justify-content 設定子容器在主軸上的對齊方式
Untitled
align-items 設定子容器沿交叉軸的對齊方式
Untitled
子容器
子容器一共有6個屬性： order, flex-grow, flex-shrink, flex-basis, flex, align-self
order 改變子容器的排列順序
默認值為 0，可以為負值，數值越小排列越靠前，order 只能為整數，
Untitled
flex-grow 定義子容器如何瓜分剩余空間
默認值為 0，就是即使存在剩余空間，也不瓜分，如果定義了非 0 值，則按照比例瓜分，flex-grow 只能為整數，
Untitled
flex-shrink 定義了子容器的縮小比例，
默認為1，即如果空間不足，則子容器將縮小，如果所有子容器的 flex-shrink 都為1，當空間不足時，都將等比例縮小，如果某個子容器的 flex-shrink 為0，其他子容器都為1，則空間不足時，前者不縮小，
Untitled
flex-basis 用來改變子容器占據主軸空間的大小
表示在不伸縮的情況下子容器占據主軸空間的大小，默認為 auto，表示子容器本來的大小，
flex
flex-grow, flex-shrink 和 flex-basis 的簡寫，默認值為 0 1 auto
align-self 用來覆寫父容器的 align-items 屬性
align-self 屬性允許單個子容器有與其他子容器不一樣的對齊方式，默認值為auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同于 stretch，改屬性的取值與 align-items 相同，
Untitled
參考資料
- MDN CSS Flexible Box Layout
- Flex 布局教程：語法篇
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/255228.html
標籤：其他
上一篇：初識JavaScript