flex布局学习总结

最近项目主要是小程序，小程序里面的布局主要采用flex布局，以前对flex 布局只是稍做了解，总结下flex 布局的经常使用套路

容器

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器均可以指定为Flex布局。像这样:

.container{
   display: flex;
}

轴(Axis)

每一个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(cross axis)。

flex-direction 确立主轴。
justify-content 定义了在当前行上，弹性项目沿主轴如何排布。
align-items 定义了在当前行上，弹性项目沿侧轴默认如何排布。
align-self 定义了单个弹性项目在侧轴上应当如何对齐，这个定义会覆盖由 align-items 所确立的默认值。

方向(Direction)

弹性容器的主轴起点(main start)/主轴终点(main end)和侧轴起点(cross start)/侧轴终点(cross end)描述了弹性项目排布的起点与终点。它们具体取决于弹性容器的主轴与侧轴中，由 writing-mode 确立的方向（从左到右、从右到左，等等）。

order 属性将元素与序号关联起来，以此决定哪些元素先出现。
flex-flow 属性是 flex-direction 和 flex-wrap 属性的简写，决定弹性项目如何排布。

行(Line)

根据 flex-wrap 属性，弹性项目能够排布在单个行或者多个行中。此属性控制侧轴的方向和新行排列的方向。

尺寸(Dimension)

根据弹性容器的主轴与侧轴，弹性项目的宽和高中，对应主轴的称为主轴尺寸(main size) ，对应侧轴的称为 侧轴尺寸(cross size)。

min-height 与 min-width 属性初始值将为 0。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写，描述弹性项目的总体的伸缩性

CSS属性flex规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。这是一个简写属性，用来设置flex-grow, flex-shrink与flex-basis。
大多数状况下，开发者须要将flex设置为auto，initial，none，或一个无单位正数

1. auto
   元素会根据自身的宽度与高度来肯定尺寸，可是会自行伸长以吸取flex容器中额外的自由空间，也会缩短至自身最小尺寸以适应容器。这至关于将属性设置为 "flex: 1 1 auto".
2. initial
   属性默认值， 元素会根据自身宽高设置尺寸。它会缩短自身以适应容器，但不会伸长并吸取flex容器中的额外自由空间来适应容器 。至关于将属性设置为"flex: 0 1 auto"。
3. none
   元素会根据自身宽高来设置尺寸。它是彻底非弹性的：既不会缩短，也不会伸长来适应flex容器。至关于将属性设置为"flex: 0 0 auto"。

参考

• flex [MDN]
• Flex 布局语法教程