弹性布局

弹性布局

弹性布局是css3主推的一个布局，传统布局是基于文档流和盒子模型的，主要以浮动布局，定位 布局等。

给父元素加display：flex；使子元素横向排列，不用每个子元素浮动了 父元素不需要清除浮动了，高度依然被子元素撑开

一、弹性布局的基本概念

1. 项目和容器

使用flex布局的元素（父元素），称为"容器"

它的所有“子元素”自动成为容器成员，称为 "项目"

它们各自有控制布局的属性，必须是容器包裹着项目

2. 主轴

主轴就是项目的排列方向，主轴会出现四个方向：

x轴：起点在左侧

x轴：起点在右侧

y轴：起点在顶端

y轴：起点在底端

3. 交叉轴

交叉轴就是在主轴的垂直方向（绕主轴顺时针旋转90°），项目可在交叉轴上移动

二、将容器指定为flex布局

任何一个容器都可以指定为 Flex 布局:

.box{display: flex;}

行内元素也可以使用 Flex 布局:

.box{display: inline-flex;}

**注意: **设为 Flex 布局以后，子元素的float、clear等属性将失效。

三、容器的属性

1. 主轴的方向

flex-direction

row 从左到右

row-reverse 从右到左

column 从上到下

column-reverse 从下到上

2. 项目换行

flex-wrap 默认情况下，项目都排在一条线上

nowrap 默认不换行

wrap 换行

wrap-reverse 反向换行

3. 主轴和换行的简写方式

flex-flow 默认值 为 row nowrap 横向排列不换行

4 主轴上的对齐方式

justify-content 默认起点对齐

flex-start 默认起点对齐

flex-end 终点对齐

center 居中对齐，一起居中

space-between 两端对齐，项目之间的间隔都相等，左右贴边

space-around 每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍

5. 交叉轴的对齐方式

align-items

flex-start 交叉轴的起点对齐

flex-end 交叉轴的终点对齐

center 交叉轴的中点对齐

baseline 项目的第一行文字的基线对齐,需要给项目设置单独的高度和内上边距和行高可以看 出来

stretch 默认值，如果项目未设置高度或设为auto，将占满整个容器的高度

6. 多轴线对齐方式

align-content

flex-start 与交叉轴的起点对齐。

flex-end 与交叉轴的终点对齐。

center 与交叉轴的中点对齐。

space-between 第一行和最后一行贴开始和结束，其他均分中间位置

space-around 每行间距两侧或上下间距相等，比边框间距大一倍

stretch 默认值

三、项目的属性

1. 项目排列次序

.item {
	order: /*数值，值越大排的越靠后，默认为0;*/
}

2. 项目的放大比例（多吃多占）

flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

当项目设置了该属性之后，原来的宽度或宽度失效。

项目不换行时： 父元素有多余的空间，设置放大比例的元素按照比例占据多余空间 父元素没有多余空间，当父元素总长度等于和低于元素宽度或者高度相加总和时，元素们 同等比例缩小，无特殊化，放大比例失效。

项目换行时： 父元素会有多余空间，因为只要空间不够就换行了，只要有多余空间，放大比例元素会在 当前行按照自己的比例分隔剩余空间。默认比例的元素会正常按照宽度占位 父元素宽度与元素宽（高度）相加正好相等，多余空间是0，那么设置放大比例的元素， 则暂时不会变更宽度。

.item {
	flex-grow: <number>比例值; /* default 0 */
}

3. 项目的缩小比例（缩水比例）

flex-shrink 定义了项目的缩小比例，默认为1，负值无效

前提是容器设置不换行才能看出效果，容器设置宽度看的更清晰

flex-shrink：0 ：项目不换行容器缩小，其中的项目同等压缩，但设置了flex-shrink：0的项 目不会压缩，会保持自己的宽度（高度）也就是不参与压缩

flex-shrink ：其他值如2、10等，缩小比例值越大，缩小的比重就越大

4. 项目的自动尺寸（特立独行）

当 flex-basis 和 width 属性同时存在时， width 属性不生效 flex布局有多余空间时，item的宽度为 flex-basis 设置的宽度 当flex空间不够时，由于 flex-shrink 的默认值为1，所以所有flex items容器等比例被压缩， 设置 flex-basis 的项目也会按照最大值的相对比例压缩，不会和其他元素比例相同。

5. flex属性简写

flex属性是flex-grow(放大比例), flex-shrink(缩小比例) 和 flex-basis(自动尺寸)的简写，默认值为0 1 auto。后两个属性可选。

常用设置是：flex:0 0 ??px; 不放大，不缩水，占多少尺寸