簡(jiǎn)介
flex布局(Flexible布局垫竞，彈性布局)是在開發(fā)中經(jīng)常使用的布局方式
開啟了flex布局的元素叫flex container，flex container里面的直接子元素叫做flex items
設(shè)置display屬性為flex或者inline-flex应闯，則表示為flex布局纤控，可以成為flex container
display: flex; //flex container以block-level(塊級(jí))形式存在
display:inline-flex; //flex container以inline-level(行內(nèi)塊)形式存在
官方文檔
https://www.w3.org/TR/CSS-FLEXBOX-1/
https://www.w3.org/TR/css-align-3/
常用CSS屬性-應(yīng)用在flex container上的CSS屬性
- flex-direction
flex items默認(rèn)都是沿著主軸(main axis)從main start開始往main end方向排布，flex-direction決定了主軸(main axis)的方向碉纺，有4個(gè)取值 row(默認(rèn)值)船万、row-reverse刻撒、column、column-reverse
交叉軸(cross axis)總是垂直于主軸耿导，方向?yàn)橄蛳禄蛘呦蛴?/li>
flex-direction: row; //默認(rèn)值声怔，從左向右
row-reverse; //從右向左
column;//從上向下
column-reverse;//從下向上
- justify-content
justify-content決定了flex items在主軸(main axis)上的對(duì)齊方式，有6個(gè)取值 flex-start(默認(rèn)值)碎节、flex-end、center抵卫、space-between狮荔、space-around、space-evenly
justify-content: flex-start;//與main start對(duì)齊
flex-end;//與main end對(duì)齊
center;//居中對(duì)齊
space-between;//flex items之間的距離相等介粘，并且主軸方向兩端對(duì)齊
space-evenly;//flex items之間的距離相等殖氏，并且等于flex items與兩端之間的距離，相當(dāng)于flex items將剩余距離平分
space-around;//flex items之間的距離相等姻采，并且等于flex items與兩端之間的距離的一半
- align-items
align-items決定了flex items在交叉軸上的對(duì)齊方式雅采，有5個(gè)取值stretch、flex-start慨亲、flex-end婚瓜、center、baseline
align-items:stretch;//(默認(rèn)值)當(dāng)flex items在交叉軸方向的size為auto時(shí)刑棵，會(huì)自動(dòng)拉伸填充flex container
flex-start;//與cross start(交叉軸起點(diǎn))對(duì)齊
flex-end;//與cross end(交叉軸終點(diǎn))對(duì)齊
center;//與cross axis居中對(duì)齊
baseline;//基準(zhǔn)線對(duì)齊巴刻，文字基準(zhǔn)線
- flex-wrap
flex-wrap決定了flex container是單行還是多行，要不要換行蛉签，默認(rèn)為單行胡陪，有3個(gè)取值nowrap(默認(rèn))、wrap碍舍、wrap-reverse
flex-wrap: nowrap;//默認(rèn)值柠座，單行，不換行
wrap;//多行
wrap-reverse;//多行(對(duì)比wrap片橡，交叉軸start與交叉軸end相反)
- flex-flow
flex-flow是flex-direction || flex wrap的簡(jiǎn)寫
flex-flow: column wrap妈经；等價(jià)于
flex-direction: column;
flex-wrap: wrap;
//從上到下排列，并且多行顯示
- align-content
align-content決定多行flex items在交叉軸上的對(duì)齊方式捧书，用法與justify-content類似狂塘，有7個(gè)取值stretch(默認(rèn)值)、 flex-start鳄厌、flex-end荞胡、center、space-between了嚎、space-around泪漂、space-evenly
align-content:stretch;//(默認(rèn)值)當(dāng)flex items在交叉軸方向的size為auto時(shí)廊营，會(huì)自動(dòng)拉伸填充flex container
flex-start;//與cross start對(duì)齊
flex-end;//與cross end對(duì)齊
center;//居中對(duì)齊
space-between;//flex items之間的距離相等，并且交叉軸方向兩端對(duì)齊
space-evenly;//flex items之間的距離相等萝勤，并且等于flex items與兩端之間的距離露筒，相當(dāng)于flex items將剩余距離平分
space-around;//flex items之間的距離相等，并且等于flex items與兩端之間的距離的一半
常用CSS屬性-應(yīng)用在flex items上的CSS屬性
- order
order決定了flex items的排布順序敌卓，可以設(shè)置任意整數(shù)(正整數(shù)慎式、負(fù)整數(shù)、0)趟径，值越小就越排在前面瘪吏，默認(rèn)值為0 - align-self
flex-items可以根據(jù)align-self覆蓋flex container設(shè)置的align-items，有6個(gè)取值auto(默認(rèn)值)蜗巧、stretch掌眠、flex-start、flex-end幕屹、center蓝丙、baseline
align-self:auto;//默認(rèn)值，遵從flex container的align-items的設(shè)置
其他五個(gè)值效果參考align-items望拖，效果一致
- flex-grow
flex-grow決定了flex items如何擴(kuò)展渺尘，可以設(shè)置任意非負(fù)數(shù)字(正小數(shù)、正整數(shù)说敏、0)沧烈，默認(rèn)值是0，
需要注意的是：
- 當(dāng)flex container在主軸(main axis)方向上有剩余size時(shí)像云，flex-grow屬性才會(huì)有效
- 如果所有flex items 的flex-grow總和sum超過1锌雀，每個(gè)flex item 擴(kuò)展的size為 剩余size*flex-grow / sum
- 如果所有flex items 的flex-grow總和sum不超過1，每個(gè)flex item 擴(kuò)展的size為 剩余size*flex-grow
- flex items擴(kuò)展后的最終size不能超過設(shè)置的max-width/max-height
- flex-shrink
flex-shrink 決定了 flex items 如何收縮 迅诬，可以設(shè)置任意非負(fù)數(shù)字(正小數(shù)腋逆、正整數(shù)、0)侈贷，默認(rèn)值是 1
需要注意：
- 當(dāng) flex items 在 main axis 方向上超過了 flex container 的 size惩歉，flex-shrink 屬性才會(huì)有效
- 如果所有 flex items 的 flex-shrink 總和超過 1，每個(gè) flex item 收縮的 size為 flex items 超出 flex container 的 size * 收縮比例 / 所有 flex items 的收縮比例之和
- 如果所有 flex items 的 flex-shrink 總和 sum 不超過 1俏蛮，每個(gè) flex item 收縮的 size為 ?flex items 超出 flex container 的 size * sum * 收縮比例 / 所有 flex items 的收縮比例之和
- 收縮比例 = flex-shrink * flex item 的 base size 撑蚌，base size 就是 flex item 放入 flex container 之前的 size
- flex items 收縮后的最終 size 不能小于 min-width\min-height
- flex-basis
flex-basis 用來設(shè)置 flex items 在 main axis 方向上的 base size 有2個(gè)取值：auto(默認(rèn)值)、content:取決于內(nèi)容本身的 size
- 決定 flex items 最終 base size 的因素搏屑，從優(yōu)先級(jí)高到低 max-width\max-height\min-width\min-height > flex-basis >width\height>內(nèi)容本身的 size
- flex
flex是flex-grow flex-shrink争涌？|| flex-basis的簡(jiǎn)寫
flex: 0 1 auto;//默認(rèn)值 本身的值
none;//0 0 auto 不顯示
此篇文章參考小碼哥flex布局，特此感謝辣恋！
