弹性盒常见面试题

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

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 拉伸 没有设置侧轴方向上的宽/高时，等于父盒子的宽或高。

5.align-content

• 控制元素在侧轴上的排列方式。只适用于多行显示的弹性容器。

stretch 拉伸

flex-start 元素紧靠行的起点

flex-end 元素紧靠行的终点

center 元素在行中居中

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

space-around 元素在侧轴方向上的间隔相等。元素之间的间隔比元素与容器边框的间隔要大一倍。

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

6.对比align-items ，align-content的用法(重要）

1.flex-start

对比alingn-items ：flex-start 示例

从侧轴开始的地方对齐。

align-content ： flex-start 示例

2.flex-end

align-items ：flex-end 示例：

align-content ：flex-end ： 示例

3.center

align-items: center ： 中间对齐 示例

align-content: center; 元素在行内居中 示例

7.align-self属性，用于单个元素

• stretch 拉伸
• flex-start 侧轴开始的地方对齐
• flex-end 侧轴结束的地方对齐
• center 中间对齐

8.flex-grow属性

定义：用于将弹性盒子的可用空间，按照比例分配给弹性元素。 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。

示例：b,c将按照1:3的比率分配剩余空间

9.flex-shrink属性

1.定义：

在弹性盒子装不下子元素时，对子元素缩小的比例设置。

设置或检索弹性盒的收缩比率。

根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。

示例：a,b,c将按照1:1:3的比率来收缩空间

flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相
加之后计算比率来进行空间收缩。

10.flex-basis属性

大部分情况下与宽度相等。优先级比宽要高。定义了元素在主轴上的空间。 可直接定义宽度：

11.order属性

定义：

用整数值来定义排列顺序，数值小的排在前面。可以为负值。



【注】 1**.文本节点也可以被弹性布局操作**。 2.绝对定位的元素不参与弹性布局。