伸缩布局

逃跑的火焰

[backcolor=rgba(255, 255, 255, 0.6)]以前在网页开发过程中，布局一直是不可或缺的，从最早的表格布局，到后来的DIV+CSS布局，现在再到CSS3的伸缩布局。

[backcolor=rgba(255, 255, 255, 0.6)]CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

[backcolor=rgba(255, 255, 255, 0.6)]主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向

[backcolor=rgba(255, 255, 255, 0.6)]侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的

[backcolor=rgba(255, 255, 255, 0.6)]方向：默认主轴从左向右，侧轴默认从上到下

[backcolor=rgba(255, 255, 255, 0.6)]主轴和侧轴并不是固定不变的，通过flex-direction可以互换。

使用说明

• 指定一个父盒子为伸缩盒子，即指定：display: flex
• 明确你需要的主侧轴方向，并设置flex-direction 默认是row ，纵向是column
• 设置父盒子的属性来调整子元素的布局，例如align-items
• 设置子盒子的宽高或者比例，完成具体的子元素在父盒子中的布局
  

各个属性介绍

• flex-direction调整主轴方向（默认为水平方向）
• justify-content调整主轴对齐
• align-items调整侧轴对齐（子元素可以使用align-self覆盖）
• flex-wrap控制是否换行
• align-content堆栈（由flex-wrap产生的独立行）对齐
• flex-flow是flex-direction + flex-wrap的简写形式
• flex是子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
• order控制子项目的排列顺序，正序方式排序，从小到大