## 概述 CSS3在布局方面做了非常大的改进,使得我们队块级与安娜苏的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开发中可以发挥极大的作用. 主轴:flex容器的主轴主要用来配置flex项目,默认是水平方向. 侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向. 方向:默认主轴从左向右,侧轴默认从上到下. 主轴和侧轴并不是固定不变的,通过flex-direction可以互换. ## 使用方法 在父盒子中设置属性display: flex;,然后在子盒子中设置flex: 1; 后面数字没有单位. 就可以设置平均划分的等分. 而且是响应式的. ## 最小最大宽度 min-width: 300px; 设置最小像素,小于这个数值就不进行缩放了 max-width:300px; 设置最大像素,不能大于这个数值. ## 固定宽度 设置固定宽度的盒子不进行缩放,并且不参与盒子的划分.此盒子不设置flex属性,并且直接设置一个宽度即可. 父盒子1000像素-固定宽度,然后剩余的像素再进行划分. ## 伸缩布局排列方式 在父盒子中设置 flex-direction: column; 设置主轴方向,即可以竖着排列了. flex-direction: row就是水平排列. flex-direction: row-reverse; 父盒子设置进行水平翻转. 看案例 : http://m.ctrip.com/html5/ ## justify-content 属性 子盒子显示方式 flex-start 贴着父盒子左侧对齐 flex-end 贴着父盒子右侧对齐,但是顺序不变. centre 居中显示 justify-content: space-between 每个子盒子显示缝隙.左右的盒子是贴着父盒子的. justify-content: space-around; 子盒子左右都有空隙.类似左右设置margin. ## flex-wrap属性 当子盒子内容宽度大于父盒子,是否换行.在父盒子设置 flex-wrap: wrap; 换行 flex-wrap: nowrap; 默认值,不换行,强制一行内显示. flex-wrap: wrap-reverse; 基本不用 ## align-items(调整轴对齐,对用于单行) align-items: center; 即可以垂直居中. align-items: stretch; 子盒子不给高度,子盒子的高度就和父盒子的高度一样了,子元素的高度拉伸以适应父盒子. ## alingn-content(堆栈) 是针对flex容器里面多轴(多行)居中的情况,必须给父盒子设置下面的属性,否则没有效果. display: flex; flex-flow: row wrap; ## order属性 可以通过此属性来控制盒子的排列顺序,默认值是0. 数值越小,排列越靠前. 但是父盒子要设置display:flex;