flex弹性布局面试题

1、在弹性盒子中，改变主轴方向的样式是:

A.flex-wrap
B.justify-content
C.align-content
D.flex-direction

正确答案：D

解析：flex-direction用于设置弹性盒子的主轴方向，有四个值：row（水平），row-reverse（水平翻转），column（垂直），column-reverse（垂直翻转）

2、下面关于弹性盒子内子元素描述正确的是:

A.当弹性盒子宽度小于子元素整体宽度时，子元素将自动换行。
B.当弹性盒子宽度小于子元素整体宽度时，子元素宽度将自动收缩。
C.当弹性盒子宽度小于子元素整体宽度时，子元素的超出部分将被截取。
D.当弹性盒子宽度小于子元素整体宽度时，子元素将超出到弹性盒子的外部。

正确答案：B

解析：在不设置flex-wrap是否换行时，默认是将子元素的宽度自动收缩

 

 3、弹性盒子中有三个子元素，子元素样式如下，对运行结果描述正确的是().

.one { flex:1; }  .two{ flex:0 0 300px; }  .three{ flex:3; }

A.第一个子元素占据整个父元素宽度的四分之一。第二个子元素宽度固定为300px。
第三个子元素占据整个父元素宽度的四分之三。

B.第一个子元素占据剩余父元素宽度的四分之一。
第二个子元素宽度固定为300px。
第三个子元素占据剩余父元素宽度的四分之三。

C.第一个子元素占据整个父元素宽度的三分之一。第二个子元素宽度固定为300px。
第三个子元素占据整个父元素宽度的三分之二。

D.第一个子元素占据剩余父元素宽度的三分之一。第二个子元素宽度固定为300px。
第三个子元素占据剩余父元素宽度的三分之二。

正确答案：B

4、对于弹性布局以下描述错误的是:

A.一个元素的display属性值设置为flex，那么这个元素中的子元素，就会遵循弹性布局的规则。
B.弹性布局元素也称为弹性盒子
C.弹性布局元素中，块状元素依然独占一行。
D.弹性布局元素中, vertical-align属性都不能用了。

正确答案：C

5、对于主轴与侧轴，下面描述错误的是:

A.主轴永远是水平方向。
B.弹性盒子中默认存在两根轴，一个是水平方向的主轴，一个是垂直方向的侧轴。
C.主轴的开始位置叫做main start、结束位置叫做main end,
D.侧轴永远垂直于主轴。

正确答案：A

解析：通过flex-direction可以改变弹性盒子的主轴方向

 

 6、对于flex-wrap样式，下面描述错误的是:

A.如果在父容器宽度足够时，也可以通过flex-wrap:wrap;设置来换行。
B.弹性布局中的子元素能自动伸缩。
c.在弹性盒子中，默认子元素不换行，即使是容器宽度不够时，子元素也不换行，只是宽度缩小。
D.如果在父容器宽度不够时想要自动换行，那么设置: flex-wrap:wrap;

正确答案：A

解析：只有在父容器宽度不足，并且设置了flex-wrap:wrap的时候，子元素才会自动换行

7、对于justify-content样式，下面描述错误的是:

A.justify-content样式可以设置主轴方向子元素的对齐方式。
B.justify-content样式的默认值是:flex-start
C.justify-content:space-between两端对齐，子元素之间间距都相等。
D.justify-content:flex-end:子元素左对齐。

正确答案：D

解析：flex-start是从盒子的起始位置开始，即子元素左对齐，flex-end为结束位置，即右对齐

8、对于align-items样式，下面描述错误的是:

A.子元素垂直方向默认靠上。
B.弹性布局容器不设置高度时，子元素也可以垂直居中。
C.align-items样式可以设置子元素在垂直方向上的对齐方式。
D.align-items:center:子元素垂直方向居中。

正确答案：B

8、对于一个PC端页面来说，下面描述正确的是:

A.—个PC端页面的宽度和高度都应该固定。
B.—个PC端页面的宽度和高度都不应该固定。
C.—般来说，PC端页面采用定宽不定高的原则。
D.PC端页面中的内容是固定不变的。

正确答案：C

解析：PC端页面一般为宽度固定，高度由子元素的内容撑开

10、下面那一个标签属于语义化结构标签:

A.title
B.span
C.footer
D.h5

正确答案：C