flex布局

简介

flex布局(Flexible布局，弹性布局)是在开发中经常使用的布局方式
开启了flex布局的元素叫flex container，flex container里面的直接子元素叫做flex items
设置display属性为flex或者inline-flex，则表示为flex布局，可以成为flex container

display: flex; //flex container以block-level(块级)形式存在
display:inline-flex; //flex container以inline-level(行内块)形式存在

官方文档

https://www.w3.org/TR/CSS-FLEXBOX-1/
https://www.w3.org/TR/css-align-3/

常用CSS属性-应用在flex container上的CSS属性

1. flex-direction
   flex items默认都是沿着主轴(main axis)从main start开始往main end方向排布，flex-direction决定了主轴(main axis)的方向，有4个取值 row(默认值)、row-reverse、column、column-reverse
   交叉轴(cross axis)总是垂直于主轴，方向为向下或者向右

flex-direction: row; //默认值，从左向右
                        row-reverse; //从右向左
                         column;//从上向下
                         column-reverse;//从下向上

2. justify-content
   justify-content决定了flex items在主轴(main axis)上的对齐方式，有6个取值 flex-start(默认值)、flex-end、center、space-between、space-around、space-evenly

justify-content: flex-start;//与main start对齐
flex-end;//与main end对齐
center;//居中对齐
space-between;//flex items之间的距离相等，并且主轴方向两端对齐
space-evenly;//flex items之间的距离相等，并且等于flex items与两端之间的距离，相当于flex items将剩余距离平分
space-around;//flex items之间的距离相等，并且等于flex items与两端之间的距离的一半

3. align-items
   align-items决定了flex items在交叉轴上的对齐方式，有5个取值stretch、flex-start、flex-end、center、baseline

align-items:stretch;//(默认值)当flex items在交叉轴方向的size为auto时，会自动拉伸填充flex container
flex-start;//与cross start(交叉轴起点)对齐
flex-end;//与cross end(交叉轴终点)对齐
center;//与cross axis居中对齐
baseline;//基准线对齐，文字基准线

4. flex-wrap
   flex-wrap决定了flex container是单行还是多行，要不要换行，默认为单行，有3个取值nowrap(默认)、wrap、wrap-reverse

flex-wrap: nowrap;//默认值，单行，不换行
wrap;//多行
wrap-reverse;//多行(对比wrap，交叉轴start与交叉轴end相反)

5. flex-flow
   flex-flow是flex-direction || flex wrap的简写

flex-flow: column wrap；等价于
flex-direction: column;
flex-wrap: wrap;
//从上到下排列，并且多行显示

6. align-content
   align-content决定多行flex items在交叉轴上的对齐方式，用法与justify-content类似，有7个取值stretch(默认值)、 flex-start、flex-end、center、space-between、space-around、space-evenly

align-content:stretch;//(默认值)当flex items在交叉轴方向的size为auto时，会自动拉伸填充flex container
 flex-start;//与cross start对齐
flex-end;//与cross end对齐
center;//居中对齐
space-between;//flex items之间的距离相等，并且交叉轴方向两端对齐
space-evenly;//flex items之间的距离相等，并且等于flex items与两端之间的距离，相当于flex items将剩余距离平分
space-around;//flex items之间的距离相等，并且等于flex items与两端之间的距离的一半

常用CSS属性-应用在flex items上的CSS属性

1. order
   order决定了flex items的排布顺序，可以设置任意整数(正整数、负整数、0)，值越小就越排在前面，默认值为0
2. align-self
   flex-items可以根据align-self覆盖flex container设置的align-items，有6个取值auto(默认值)、stretch、flex-start、flex-end、center、baseline

align-self:auto;//默认值，遵从flex container的align-items的设置
其他五个值效果参考align-items，效果一致

3. flex-grow
   flex-grow决定了flex items如何扩展，可以设置任意非负数字(正小数、正整数、0)，默认值是0，
   需要注意的是：

• 当flex container在主轴(main axis)方向上有剩余size时，flex-grow属性才会有效
• 如果所有flex items 的flex-grow总和sum超过1，每个flex item 扩展的size为 剩余size*flex-grow / sum
• 如果所有flex items 的flex-grow总和sum不超过1，每个flex item 扩展的size为 剩余size*flex-grow
• flex items扩展后的最终size不能超过设置的max-width/max-height

4. flex-shrink
   flex-shrink 决定了 flex items 如何收缩 ，可以设置任意非负数字(正小数、正整数、0)，默认值是 1
   需要注意：

• 当 flex items 在 main axis 方向上超过了 flex container 的 size，flex-shrink 属性才会有效
• 如果所有 flex items 的 flex-shrink 总和超过 1，每个 flex item 收缩的 size为 flex items 超出 flex container 的 size * 收缩比例 / 所有 flex items 的收缩比例之和
• 如果所有 flex items 的 flex-shrink 总和 sum 不超过 1，每个 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

5. flex-basis
   flex-basis 用来设置 flex items 在 main axis 方向上的 base size 有2个取值：auto(默认值)、content:取决于内容本身的 size

• 决定 flex items 最终 base size 的因素，从优先级高到低 max-width\max-height\min-width\min-height > flex-basis >width\height>内容本身的 size

6. flex
   flex是flex-grow flex-shrink？|| flex-basis的简写

flex: 0 1 auto;//默认值  本身的值
none;//0 0 auto  不显示

此篇文章参考小码哥flex布局，特此感谢！