10day-弹性盒子

弹性盒子

css3的一种新的布局模式
是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

display:flex;

• 主轴：元素默认沿着主轴进行排列，（比如页面上的水平方向）
• 交叉轴（侧轴）：是垂直于flex元素放置方向的轴。

特点

• 弹性盒子由弹性容器和弹性子元素组成
• 弹性容器通过设置display的值为flex将其定义为弹性容器
• 弹性容器中包含一个或多个弹性子元素
• 如果子元素的高度没有设置，则高度是默认拉伸的

注意：

• 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器布局。
• 弹性子元素通常在弹性容器内一行显示，默认情况每个容器只有一行。
• 设为flex布局以后，子元素的float、clear和vertical-align属性将会失效。
• 弹性子元素设置绝对定位后，依旧生效，可以看作在这个弹性容器中，只有它一个弹性子元素。

定义弹性容器的主轴 flex-direction

该属性指定在弹性容器中如何摆放弹性子元素，即定义弹性容器主轴，弹性子元素默认则会按这条主轴进行排列。

flex-direction:row ｜ row-reverse | column | column-reverse;

• row:默认，弹性容器主轴为水平轴（从左往右）
• row-reverse:弹性容器主轴为倒叙水平轴（从右往左）
• column：将弹性容器的主轴设为垂直方向（从上往下）
• column-reverse：将弹性容器的主轴设为倒叙的垂直方向（从下往上）

弹性子元素换行 flex-wrap

flex-wrap: nowrap | wrap | wrap-reverse

• nowrap：默认值，不允许换行
• wrap：允许换行，换行方向，正常向下换行
• wrap-reverse：允许换行并倒叙，换行方向变为向上换行

布置弹性容器主轴方向元素如何排列 justify-content

justify-content:flex-start | flex-end | center | space-between | space-around | space-evenly

• flex-start：默认值，弹性子元素紧靠主轴的起始边依次排列
• flex-end：与start相反，弹性子元素紧靠主轴的结束边（终边）
• center：将所有的弹性子元素看作为一个整体，居中显示在主轴的中点。
• space-between：起始和结尾两个子元素紧靠在边界，其余子元素在中间均匀排列（间隙相等）。
• space-around：起始和结尾两个子元素距离边界的间隙与中间子元素之间的间隙比例为1:2
• space-evenly：所有弹性子元素之间的间隙都相等。

弹性容器行内元素侧轴对齐方式 align-items

align-items:flex-start ｜ flex-end | center

• flex-start：元素在侧轴上紧靠侧轴起始边依次排列
• flex-end：与start相反，元素在侧轴上紧靠终边依次排列。
• center：居中对齐，将弹性子元素的中点与所在行的侧轴中点进行对齐

弹性容器行侧轴对齐方式 align-content

align-content: stretch ｜ flex-start | flex-end | center | space-between | space-around | space-evenly

• stretch：默认值，侧轴上的额外空间将会平均分配到每个弹性元素行中，增加元素行的侧轴尺寸，直到边与边重合
• flex-start：弹性元素行紧靠侧轴的起始边，额外空间将全部放在侧轴吧终边那一侧。
• flex-end：与start相反。
• center：将所有的元素行看作一个整体，将这个整体的中点与侧轴的中点对齐
• space-between：起始和结尾两个元素行紧靠在边界，其余元素行在中间均匀排列（间隙相等）。
• space-around：起始和结尾两个元素行距离边界的间隙与中间元素行之间的间隙比例为1:2
• space-evenly：所有弹性元素行之间的间隙都相等。

定义某个或某些弹性子元素的侧轴对齐方式 align-self

align-self:flex-start | flex-end | center

• flex-start：元素在侧轴上紧靠侧轴起始边依次排列
• flex-end：与start相反，元素在侧轴上紧靠终边依次排列。
• center：居中对齐，将弹性子元素的中点与所在行的侧轴中点进行对齐

flex属性

flex-grow 增长因子

定义弹性容器有多余空间时，是否允许弹性子元素增大，以及允许增大且有多余空间时，相对其他同辈的元素以怎样的比例增大。

即如果容器中有多余空间，多出的空间将根据各弹性子元素的非零增长因子按比例分配给各弹性子元素

它的值始终为一个数字，但不能是负数，可以使用小数，只要大于或等于0即可。默认值为0

flex-grow: number;

flex-shrink 缩减因子

与增长因子取值相同，元素之间的缩减值，按照缩进因子设置的值按比例缩减
它的值始终为一个数字，但不能是负数，可以使用小数，只要大于或等于0即可。默认值为1

flex-shrink:number

<!-- 父元素的宽度 -->
f：400

<!-- 每个元素的宽度 -->
y1:100
y2:100
y3:100
y4:100
y5:100

<!-- 待缩放的宽度 -->
元素总宽减去父元素的宽度
500 - 400 = 100

<!-- 分配缩放比例总和 -->
2
1
1
1
1

z:6

<!-- 计算每个元素的缩减量 -->
y1:2 / 6 = 0.3333333
y2:1 / 6 = 0.1666667
y3:1 / 6 = 0.1666667
y4:1 / 6 = 0.1666667
y5:1 / 6 = 0.1666667

<!-- 计算每个元素的缩减量 -->
y1:100 * 0.333333 = 33.3333333
y2:100 * 0.166667 = 16.6666667
y3:100 * 0.166667 = 16.6666667
y4:100 * 0.166667 = 16.6666667
y5:100 * 0.166667 = 16.6666667

<!-- 每个元素最终的宽度 -->
y1:100 - 33.33333 = 66.666666
y2:100 - 16.66667 = 83.333333
y3:100 - 16.66667 = 83.333333
y4:100 - 16.66667 = 83.333333
y5:100 - 16.66667 = 83.333333

flex-basis 定义弹性子元素的宽度

定义了弹性子元素的初始尺寸，即根据增长因子或缩减因子分配空间前的元素大小。

flex-basis:number | auto | inhert

默认值为auto；

复合语法 flex

flex:flex-grow flex-shrink flex-basis;

/* 如果只调整增长因子 */
flex:1;

flex:1 0;

order属性

用于改变弹性子元素在页面中的排列位置

order:number;

默认情况下，所有弹性元素的顺序值都为0，则代表在同一排序组中，元素是按照源码中的顺序沿着主轴方向排列。

注意：order改变的仅仅是视觉上的排序