flexble 彈性布局

flex container：開(kāi)啟 flex 布局的容器；

flex item： flex container里面的元素；

display:

• flex：開(kāi)啟后，元素為塊級(jí)元素；
• inline-flex：開(kāi)啟后，元素為行內(nèi)元素；

默認(rèn)：

主軸的大小就是 元素的寬度； main size;

側(cè)軸的大小就是 元素的高度： cross size;

應(yīng)用：

父：

• flex-flow：
• flex-direction：設(shè)置主軸的方向；
• row 行，默認(rèn)值，左到右；
• row-reverse 行，右到左；
• column 列，從上到下；
• column-reverse 行，從下倒上；
• justify-content： 設(shè)置 flex item 在主軸上的對(duì)齊方式；
• flex-start：開(kāi)頭對(duì)齊；
• flex-end： 結(jié)尾對(duì)齊；
• center：居中對(duì)齊；
• space-between；兩邊貼緊；
• space-evenly： 邊距相等；
• space-around：兩邊是 flex item 邊距的一半；
• align-items ： 設(shè)置側(cè)軸上的對(duì)齊方式；
• normal：將 flex item 的高度，在側(cè)軸方向進(jìn)行拉伸（前提是 flex item 沒(méi)有設(shè)置高度）；
• flex-start：開(kāi)始對(duì)齊；
• flex-end：尾部對(duì)齊；
• center： 中心對(duì)齊；
• baseline： 基線對(duì)齊（第一行的基線）；
• flex-wrap：決定主軸是否換行；
• nowrap： 默認(rèn)，不允許換行；
• wrap： 換行；
• wrap-reverse：在 側(cè)軸 相反排列；
• flex-flow： flex-direction 和 flex-wrap 的縮寫；
• align-content：決定 flex item（多行） 在側(cè)軸上的對(duì)齊方式；（多行沒(méi)設(shè)置時(shí)，側(cè)軸會(huì)平分大?。?。

子：

• order： 決定 flex item 的排序順序；值越小就越排在前面；（默認(rèn)值為0，支持正，負(fù)，零數(shù)）；
• align-self：決定 flex item 在側(cè)軸的對(duì)齊方式；
• flex-grow: 決定子元素按比例分父元素的剩余寬度；
• 總大于1,時(shí)，子元素會(huì)填滿父元素；
• 總小于1時(shí)，子元素不會(huì)填充完父元素；
• flex-shrink： 設(shè)置 flex item 的收縮大小，默認(rèn)為 1；
• flex-basis：設(shè)置主軸的 flex item 的寬度；
• flex 以下的縮寫
• flex-grow
• flex-shrink
• flex-basis

三個(gè)值

1. 沒(méi)有單位，就是 flex-grow；
2. 沒(méi)有單位，就是 flex-shrink；
3. 有單位就是 flex-basis；

flex items 的大小 高 到 低：

• max / min
• flex-basis
• width / height
• 內(nèi)容本身的 size