CSS——伸缩盒布局

  CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大 小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素 进行排列、对齐和分配空白空间。

容器使用弹性盒布局的父元素 display:flex;

默认情况下，主轴是 X 轴（ main axis ），即 flex 容器中的各个元素在一行中分多列 显示。如果想在一列中显示多行，我们可以将主轴改为Y 轴。

flex-direction: row （列布局）

flex-direction: column （行布局）

自动换行

将每一个 article 设定为宽度至少是 200px

article {

flex: 200px;

}

多个 article 在一行中填充，如果一行放不下，则换行

section {

flex-wrap: wrap;

}

简写

flex-direction: row;

flex-wrap: wrap;

= 》

flex-flow: row wrap;

等比例划分

section {

display: flex;

}

article {

flex: 1;

}

article:nth-of-type(3) {

flex: 2;

}

父元素 section 为一个伸缩盒子容器， article 各占一份，第三个 article 占 2 份，假如共有 3

个 article ，第一个、第二个 article 占 1/4 ，第三个占 1/2 。

剩余部分等比例划分

section {

display: flex;

}

article {

flex: 1 200px;

}

article:nth-of-type(3) {

flex: 2 200px;

}

父元素 section 为一个伸缩盒子容器，每个 article 的宽度至少 200px ，对于屏幕的剩余部

分， article 各占一份，第三个 article 占 2 份，假如共有 3 个 article ，第一个、第二个

article 占 1/4 ，第三个占 1/2 。

纵向居中&横向伸缩



justify-content          控制伸缩盒子在主轴上的对齐方式

取值：

flex-start                    【默认值】在主轴的开始显示

flex-end                         在主轴的结束显示

center                            在主轴的中心显示

space-around                 填充空白自适应在主轴中心显示

space-between             填充空白自适应在主轴中心显示，但是首尾两个元素距离容器没有空白

align-items                 控制伸缩盒子在交叉轴的对齐方式

取值：

flex-start               在伸缩盒子容器的伸缩开始位置显示，即伸缩盒子容器顶部

flex-end                  在伸缩盒子容器的伸缩结束位置显示，即伸缩盒子容器底部

stretch                   【默认值】将盒子在交叉轴上进行拉伸，直至适应整个伸缩盒子容器

center                      盒子在交叉轴中心显示

baseline                    基线对齐

align-content             多轴排列在交叉轴对齐方式

取值：

flex-start

flex-end

center

stretch 【默认】 space-around space-between