弹性盒常见面试题

弹性盒常见面试题（详细）

1.flex-direction属性

用于设置盒子中的子元素的排列方向。

• row 从左到右水平排列子元素（默认值）
• column 从上往下垂直排列子元素
• row-reverse 从右到左排列子元素
• column-reverse 从下往上垂直排列子元素

2.flex-wrap属性

nowrap:不换行（默认值）

wrap：换行

wrap-reverse 反向换行。

3.justify-content属性

flex-start 元素紧靠主轴的起点（默认值）

flex-end 元素紧靠主轴的终点

center 元素在主轴上居中。

space-between 第一元素紧靠起点，最后一个元素紧靠终点，余下的元素平均分配剩余空间。

space-around 每个元素两侧的间隔相等。元素之间的间隔比元素与容器边框的间隔要大一倍。

space-evenly 元素间距平均分配。

4.align-items属性

控制元素在侧轴上的排列方式。 多行单行都适用的属性。

• flex-start 从侧轴开始的地方对齐
• flex-end 从侧轴结束的地方对齐
• center 中间对齐
• stretch 拉伸 没有设置侧轴方向上的宽/高时，等于父盒子的宽或高。