Flex布局基本概念
Flexbox能控制子元素的空间分配、对齐、视觉顺序。Flexbox能轻松对元素进行垂直水平排布。并且能实现响应式页面。
通过对元素设置display: flex 或者 display: inline-flex，那么该元素变成flex container，并触发flex格式化上下文。该元素的子元素变为flex items。
Flex Container的属性
以下6个属性设置在容器上。
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
这些属性全局排布flex container里的flex items。
其中flex-direction属性用于设置主轴、交叉轴的方向。
justify-content 属性用于设置主轴上flex item的排布。
align-items、align-content属性用于设置交叉轴上flex item的排布。align-content属性只能用于多行的flex container，对于flex-wrap属性值为nowrap的flex container是不起作用的。
其中justify-content 属性、align-items属性、align-content属性的值很像。
- justify-content 属性值为flex-start | flex-end | center | space-between |
space-around | space-evenly - align-items属性值为flex-start | flex-end | center | baseline |
stretch - align-content属性值为flex-start | flex-end | center | space-between |
space-around | space-evenly | stretch
Flex Items的属性
以下6个属性设置在Flex Items上。
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
这些属性用于精确控制单个Flex Items的排布。
align-self 属性用于覆盖父容器align-items属性的值，所以align-self属性的可取值与align-items属性的可取值一样。
都为flex-start | flex-end | center | baseline | stretch
order属性控制 flex items的显示顺序。默认为0，属性值小的在前面，大的在后面。
flex属性最重要。flex是由flex-grow flex-shrink flex-basis 构成。默认值是0 1 auto。
flex的共同属性值(common flex values)：
- flex:initial 表示Flex Items的大小基于width或者height属性。允许Flex Items缩小。下面两行代码等价：
- flex:auto 表示Flex Items的大小基于width或者height属性。允许Flex Items增大或缩小。下面两行代码等价：
- flex:none 表示Flex Items的大小基于width或者height属性。不允许Flex
Items增大或缩小。下面两行代码等价：
- flex:< number > 表示Flex Items的增长因子设为输入的< number >。不允许Flex Items缩小。Flex Items的width或者height属性作为minimum size。下面两行代码等价：
flex-grow属性
该Flex Items的增长因子。Flex Items增长值的计算方式如下：
比方是一共需要增长 x px才能填充flex container。所有的Flex Items的flex-grow加起来是y。
那么
该Flex Items需要增长的px = 该Flex Items的flex-grow属性值 * x / y
flex-shrink属性
flex-shrink属性用于声明当flex container没有足够空间放置Flex Items时，Flex Items该如何缩小。
如果Flex Items包括固定长度的图片或者视频，那么该Flex Items不能缩小的比该图片或者视频短。
Flex Items的缩小值与Flex Items的宽度和flex-shrink属性值有关。Flex Items缩小值的计算方式如下：
----选至《css权威指南》
可以看到其实和计算Flex Items增长不同的是
- 计算shrinkPercent时分母需要乘上 Flex Items的宽度。
- 使用shrinkPercent计算缩减px的方式不同。
flex-basis属性
flex basis设置flex item盒子的大小。它能取长度值或者百分数。默认值为auto。
- auto 值表示flex item盒子的大小为盒子的的width值或者height值。
- 长度值 那么长度值会覆盖盒子的的width值或者height值。
- 百分数 相对于flex container的长度。
min-width, max-width, min-height, max-height 属性会影响flex item盒子的大小。
flex格式化上下文
flex级盒子产生flex格式化上下文。
特点是flex格式化上下文的孩子节点包括非空文本节点或者孩子元素会变成flex items。
flex items特点
float、clear和vertical-align属性将失效。margin不塌陷。images 标签等 行内级标签只要不是定位会被块级化。