弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
CSS3 弹性盒子内容
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
弹性盒父集属性：
1.flex-direction 决定轴的方向
row 默认值。元素将水平显示，正如一个行一样。
row-reverse 与 row 相同，但是以相反的顺序。
column 元素将垂直显示，正如一个列一样。
column-reverse 与 column 相同，但是以相反的顺序。
2.flex-wrap 控制换行情况
nowrap 默认值。规定元素不换行。
wrap 规定元素在必要的时候换行。
wrap-reverse 规定元素在必要的时候以相反的顺序换行。
先按正序换行然后将行倒叙。
3.flex-flow 轴和换行的简写
.flex-container { flex-flow: <flex-direction> <flex-wrap> }
4.align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
stretch - 默认。各行将会伸展以占用剩余的空间。
flex-start - 各行向弹性盒容器的起始位置堆叠。
flex-end - 各行向弹性盒容器的结束位置堆叠。
center -各行向弹性盒容器的中间位置堆叠。
space-between -各行在弹性盒容器中平均分布。
space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
5.justify-content 以交叉侧轴为中心的集聚方式（元素在主轴方向上的对齐方式）
flex-start默认值。项目位于容器的开头。
flex-end项目位于容器的结尾。
center项目位于容器的中心。
space-between项目位于各行之间留有空白的容器内。
space-around项目位于各行之前、之间、之后都留有空白的容器内。
6.align-items 以交叉横轴为中心的挤聚方式
stretch 。项目被拉伸以适应容器。
center 项目位于容器的中心。
flex-start 默认值 项目位于容器的开头。
flex-end 项目位于容器的结尾。
baseline 项目位于容器的基线上。
flex-item 弹性盒子元素属性
1.order设置弹性盒子的子元素排列顺序。int 默认为0 小的在前
2.flex-grow设置或检索弹性盒子元素的扩展比率。int
3.flex-shrink指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和`大于容器 的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。int 默认值1
4.flex-basis用于设置或检索弹性盒伸缩基准值。int 默认值auto
如果子盒子不会因内容多寡而发生伸缩，则和width:20%一个效果
但会根据内容的多寡而进一步计算子元素实际所占宽度，所以说这个属性 设置的百分比只是一个参考值或叫理想值
5.flex设置弹性盒子的子元素如何分配空间。
flex-grow、flex-shrink 和 flex-basis 属性的简写属性
flex: flex-grow flex-shrink flex-basis | auto | initial | inherit;
6.align-self在弹性子元素上使用。覆盖容器的 align-items 属性。
auto默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
stretch元素被拉伸以适应容器。
center元素位于容器的中心。
flex-start元素位于容器的开头。
flex-end元素位于容器的结尾。
baseline元素位于容器的基线上。
initial设置该属性为它的默认值。
inherit从父元素继承该属性。
网友评论