css3前端布局（一）弹性盒布局
本文介绍的是 CSS3 规范中引入的新布局模型：弹性盒模型（flex box）。弹性盒模型可以用简单的方式满足很多常见的复杂的布局需求。它的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式。浏览器会负责完成实际的布局。
1.简介
弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。即便容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。在该布局模型中，容器会根据布局的需要，调整其中包含的条目的尺寸和顺序来最好地填充所有可用的空间。当容器的尺寸由于屏幕大小或窗口尺寸发生变化时，其中包含的条目也会被动态地调整。比如当容器尺寸变大时，其中包含的条目会被拉伸以占满多余的空白空间；当容器尺寸变小时，条目会被缩小以防止超出容器的范围。
我们假设父类容器类名定为.fix-container,子类条目类名.fix-item,对父类和子类有如下css属性
2.弹性盒模型布局css
首先，弹性盒模型布局有两个相互垂直的坐标轴，一般固定主轴为 水平方向，垂直为交叉轴
对于父元素.fix-container来说：
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content:flex-start;
}
- display: flex;作为弹性和布局模型渲染div
- flex-direction: 用来确定主轴的方向，从而确定基本的条目排列方式有以下几种：
- row:条目排列顺序与页面文档顺序一致，并设主轴为水平方向
- row-reverse:与row相反，主轴为水平，条目顺序与文档顺序相反
- column:条目排列为由上向下，主轴为垂直方向
- column-reverse:条目排列顺序为由下向上，主轴认为垂直方向
- flex-wrap:当条目尺寸（宽度或高度）大于容器尺寸时，会出现条目重叠或超出容器范围的现象，用
flex-wrap来决定这种行为，有以下几种：- nowrap：默认值，可能出现条目重叠或超出容器；
- wrap:当超出容器尺寸时，把条目排列到下一行，下一行方向为交叉轴方向
- warp-reverse:和wrap类似，只是排列方向为交叉轴反方向
- align-content:当容器在交叉轴方向上有空白空间时，属性"align-content"用来对齐容器中的行,和下面align-items相同
对于子元素.fix-item来说：
.flex-item{
flex-grow: 1;
flex-basis:auto;
flex-shrink:1;
justify-content:flex-start;
align-item:flex-start;
}
.flex-item:last-child {
order: -1;
}
- order:整数值，表示在html中出现在最前面
- 弹性盒模型的核心是容器条目的尺寸是弹性的，分别用
flex-grow、flex-basis\、flex-shrink调整容器条目的尺寸- flex-basis:条目的尺寸被容器调整之前的初始值,若为auto，则为主轴尺寸属性值
- flex-grow:默认为1，当容器有多余空间时，在不同条目之间的空间分配比例
- flex-shrink:表示当空间不足时，条目尺寸缩小的比例
- 当然：三则可合起来表示：flex:none|flex-grow flex-shrink flex-basis
- justify-content:设置主轴方向上的对齐方式：
- flex-start/flex-end：条目于主轴正/反方向
- center:条目集中在主轴之间位置，可用来设置居中元素
- space-between:每行第一个条目和最后一个条目分别与主轴正、反方向的开始和结束对齐，其他条目平均分配空间
- space-around:类似于space-between，每行第一个条目和最后一个条目留白的空间是中间的一半
- align-items：设置容器中所有条目在交叉轴上的默认对齐方向，而条目上的属性"align-self"，和justify-content类似，前三个相同，只是主轴变为交叉轴，主要看其他两个
- baseline:条目在基准线上保持对齐
- stretch:尽可能占满在交叉轴方向上的空间
3.flex视图分析
4.总结
作为 CSS3 规范的一部分，弹性盒布局模型可以在很多典型的场景中简化完成布局所需的 CSS 代码。该布局模型也提供了很多实用的特性来满足常见的布局要求，包括对容器中条目的排列、对齐、调整大小和分配空白空间等。弹性盒布局模型可以作为 Web 开发人员工具箱中的一个很好的工具。
注：本文仅是自己对css3弹性盒布局模型的理解，不代表权威，内容仅供参考！
