flex布局

简介：

1. 概念：CSS3弹性盒子(Flexible Box或 Flexbox)，是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。对于许多应用程序，弹性盒子模型提供了对块模型的改进，因为它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。
2. 兼容性：参考https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes。

相关概念：

1. 弹性容器：包含弹性项目的父元素。通过给这个元素设置display属性的值为flex或者inline-flex来定义弹性容器。
2. 弹性项目：弹性容器的每个子元素都称为弹性项目。
3. 轴：分为主轴和纵轴。默认横向的是主轴，纵向的为纵轴。也可以通过flex-direction:column来将主轴设置为纵向的。主轴其实更加恰当的解释为，元素按顺序排列的那根线。

相关css属性：

1. flex-direction：确定主轴的方向。默认是横向的。

   • row：横向布局。
   • row-reverse：横向反转布局。
   • column：纵向布局。
   • column-reverse：纵向反转布局。

2. justify-content：属性定义了项目在主轴上的对齐方式。

   • flex-start：主轴的起始点对齐（默认）。
   • flex-end：主轴的结束点对齐。
   • center：居中排列。
   • space-between：两端对齐，项目之间的间隔相等。
   • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

3. align-items：确定项目在纵轴上如何对齐。

   • flex-start：纵轴的起始点对齐。
   • flex-end：纵轴的结束点对齐。
   • center：纵轴的中点对齐。
   • stretch：默认值。如果没有设置高度。弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。

4. flex-wrap：指定子元素在一行排列不下的时候，该如何表现。

   • nowrap：不换行，被挤到一行。
   • wrap：被打断到多行中。

5. align-content：确定纵轴的轴线如何对齐。只有在多行的情况下才有效。

   • flex-start：纵轴的起始点对齐。
   • flex-end：纵轴的结束点对齐。
   • center：纵轴的中点对齐。
   • stretch：默认值。在没有给元素设置高度的时候（假如纵轴使用的是竖向的），弹性元素被在侧周方向被拉伸到与容器相同的高度。