弹性盒子

概念

弹性盒子是CSS3的一种新布局模式。

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

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

• 声明

display:flex

定义在弹性盒子上的六个 css 属性

方向

• flex-direction（弹性盒子的方向）：
  • 默认取值：row（行排列）
  • row-reverse（行 反方向排列）
  • column（列排列）
  • column-reverse（反 列方向排列）
  • initial（默认值）
  • inherit（继承）

换行

• flex-wrap（弹性盒子是否换行）
  • 默认取值 nowarp（盒子不换行）
  • wrap（换行）
  • wrap-reverse（反向换行）

换行和方向的合成

• flex-flow:flex-direction flex-warp 合成值

水平方向（主轴方向的对齐方式）

• justify-content
  • flex-start（默认值）主轴的部分边线，也就是水平靠近左
  • center 剧中对齐
  • flex-end 主轴对齐结束部分边线
  • space-between两端对齐
  • space-around 均匀分布

竖直方向（侧轴）

• align-items:
  • flex-start(默认取值);
  • center(居中对齐)
  • flex-end（侧轴结束边线对齐）
  • stretch(拉伸扩展)
  • baseline基线对齐

多行多列对齐方式

• align-content:
  • flex-start开始边线对齐
  • flex-end结束边线对齐
  • center居中对齐
  • space-between两端对齐
  • space-around均匀分布
  • stretch拉伸

定义在弹性项目上的 6 个属性

• order:排序取数值，值越大越排在后面
• flex-grow:是否允许放大，默认为0不允许放大，1允许放大
• flex-shrink：是否允许缩小，默认为1允许缩小，0不允许缩小
• flex-basis:定义弹性项目的基准宽度(基于主轴)
• flex:三者合成属性flex-grow flex-shrink flex-basis
• align-self:弹性项目本身的对齐方式：
  • flex-start(开始边线对齐)
  • flex-end（结束边线对齐）
  • center（侧轴中间对齐）
  • stretch（拉伸）
  • baseline(基线对齐)

其他

定义 css 文本的两端对齐 text-align:justify;