flex布局 面试题及答案.docVIP

flex布局面试题及答案

一、单项选择题

1.以下哪个属性用于定义项目在主轴上的对齐方式？

A.align-items

B.justify-content

C.align-self

D.flex-wrap

答案：B

2.当设置`flex-direction:column`时，主轴是？

A.水平方向

B.垂直方向

C.斜向

D.没有主轴

答案：B

3.`flex-grow`属性的默认值是？

A.0

B.1

C.2

D.3

答案：A

4.哪个属性可以让项目在交叉轴上拉伸以适应容器？

A.align-items:stretch

B.justify-content:stretch

C.flex-shrink:stretch

D.flex-basis:stretch

答案：A

5.如果要让弹性容器内的项目换行显示，应使用哪个属性？

A.flex-flow

B.flex-direction

C.flex-wrap

D.align-content

答案：C

6.`align-self`属性的作用是？

A.定义项目在主轴上的对齐方式

B.定义项目在交叉轴上的对齐方式

C.定义项目的伸缩性

D.定义项目的排列顺序

答案：B

7.当设置`flex-direction:row-reverse`时，项目的排列顺序是？

A.从左到右

B.从右到左

C.从上到下

D.从下到上

答案：B

8.`flex-basis`属性定义的是？

A.项目的初始大小

B.项目的最大大小

C.项目的最小大小

D.项目的伸缩比例

答案：A

9.以下哪个不是`justify-content`属性的取值？

A.center

B.space-around

C.stretch

D.space-between

答案：C

10.如果一个弹性容器内有多个项目，设置`align-content:space-between`会使项目？

A.在交叉轴上两端对齐，中间均匀分布

B.在主轴上两端对齐，中间均匀分布

C.在交叉轴上居中对齐

D.在主轴上居中对齐

答案：A

二、多项选择题

1.以下哪些是`flex-direction`属性的取值？

A.row

B.column

C.row-reverse

D.column-reverse

答案：ABCD

2.`align-items`属性的常见取值有？

A.flex-start

B.flex-end

C.center

D.baseline

答案：ABCD

3.关于`flex-grow`和`flex-shrink`属性，以下说法正确的是？

A.`flex-grow`用于定义项目的放大比例

B.`flex-shrink`用于定义项目的缩小比例

C.它们的默认值都是1

D.它们可以为负数

答案：AB

4.以下哪些属性是用于弹性容器的？

A.display:flex

B.flex-direction

C.justify-content

D.align-items

答案：ABCD

5.当设置`flex-wrap:wrap`时，以下情况可能发生？

A.项目会换行显示

B.项目不会换行显示

C.容器宽度不够时，项目会自动缩小

D.容器宽度足够时，项目会正常排列

答案：AD

6.`flex`属性是哪几个属性的缩写？

A.flex-grow

B.flex-shrink

C.flex-basis

D.flex-direction

答案：ABC

7.以下哪些属性可以改变项目的排列顺序？

A.order

B.flex-direction

C.justify-content

D.align-items

答案：AB

8.若要让弹性容器内的项目在主轴上两端对齐，中间均匀分布，可以使用哪些属性组合？

A.display:flex

B.flex-direction:row

C.justify-content:space-between

D.align-items:center

答案：ABC

9.关于`align-content`属性，以下说法正确的是？

A.它用于多行项目在交叉轴上的对齐方式

B.取值有flex-start、flex-end、center等

C.只有当项目有多行时才起作用

D.它和`align