简介
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属性
- 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;//从下向上
- 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与两端之间的距离的一半
- 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;//基准线对齐，文字基准线
- flex-wrap
flex-wrap决定了flex container是单行还是多行，要不要换行，默认为单行，有3个取值nowrap(默认)、wrap、wrap-reverse
flex-wrap: nowrap;//默认值，单行，不换行
wrap;//多行
wrap-reverse;//多行(对比wrap，交叉轴start与交叉轴end相反)
- flex-flow
flex-flow是flex-direction || flex wrap的简写
flex-flow: column wrap；等价于
flex-direction: column;
flex-wrap: wrap;
//从上到下排列，并且多行显示
- 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属性
- order
order决定了flex items的排布顺序，可以设置任意整数(正整数、负整数、0)，值越小就越排在前面，默认值为0 - 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，效果一致
- 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
- 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
- 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
- flex
flex是flex-grow flex-shrink？|| flex-basis的简写
flex: 0 1 auto;//默认值 本身的值
none;//0 0 auto 不显示
此篇文章参考小码哥flex布局，特此感谢！
