flex步局 11.02

语法

justify-content: flex-start | flex-end | center | space-between | space-around

flex-start：弹性盒子元素将向行起始位置对齐。

flex-end：弹性盒子元素将向行结束位置对齐。

center：弹性盒子元素将向行中间位置对齐。

space-between：弹性盒子元素会平均地分布在行里。

space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。

(1) 设置在容器上的属性

1) flex-direction：row | row-reverse | column | column-reverse 项目的排列方向

2) flex-wrap：nowrap | wrap | wrap-reverse 是否换行

3) flex-flow：<flex-direction> || <flex-wrap> flex-direction 和 flex-wrap 的简写

4) justify-content：flex-start | flex-end | center | space-between | space-around 在水平

方向上的对齐方式5) align-items: flex-start | flex-end | center | baseline | stretch 定义在垂直方向上的对齐

方式

6) align-content: flex-start | flex-end | center | space-between | space-around | stretch

定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用(item 有多行

时)

(2) 设置在项目上的属性

1) order：<number> 定义项目在容器中的排列顺序，数值越小，排列越靠前，默认值为 0

2) flex-basis：<length> | auto 定义了在分配多余空间之前，项目占据的主轴空间，浏览器

根据这个属性，计算主轴是否有多余空间

3) flex-grow: <number> 定义项目的放大比例。默认值为 0，即如果存在剩余空间，也不放

大

4) flex-shrink: <number> 定义项目的缩小比例。默认值: 1，即如果空间不足，该项目将缩

小，负值对该属性无效。

5) flex：none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]flex-grow, flex-shrink

和 flex-basis 的简写 默认值：0 1 auto， 即不放大，可缩小，大小就是项目本身的大

小。

6) align-self：auto | flex-start | flex-end | center | baseline | stretch 允许单个项目有与其

他项目不一样的对齐方式

flex-direction属性

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

 有四个值：

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

 

面试题：

31. 清除浮动有哪些方式

(1) 在浮动元素下方添加一个非浮动元素

<div>

<div style="float:left;width:45%;"></div>

<div style="float:right;width:45%;"></div>

<div style="clear:both;"></div>

</div>

父容器现在必须考虑非浮动子元素的位置，而后者肯定出现在浮动元素下方，所以显示出来，父容

器就把所有子元素都包括进去了。这种方法比较简单，但是要在页面中增加冗余标签，违背了语义

网的原则。

(2) 将父容器也改成浮动定位

<div style="float:left;">

<div style="float:left;width:45%;"></div>

<div style="float:right;width:45%;"></div>

</div>

这种方法不用修改 HTML 代码，但是缺点在于父容器变成浮动以后，会影响到后面元素的定位，而

且有时候，父容器是定位死的，无法变成浮动。

(3) 父容器设置 overflow: hidden 或者 auto。（开启 BFC）

<div style="overflow: hidden;">

<div style="float:left;width:45%;"></div>

<div style="float:right;width:45%;"></div>

</div>

缺点：一个是 IE6 不支持，另一个是一旦子元素的大小超过父容器的大小，就会出显示问题。

(4) 利用:after 伪选择符，在父容器的尾部自动创建一个子元素 ==（推荐这种）== .clearfix:after {

content: "";

display: block;

clear: both;

}

//兼容 ie6：激活父元素的"hasLayout"属性，让父元素拥有自己的布局

.clearfix {

zoom: 1; //或者 height：1%；

}

32. 响应式布局原理

媒体查询，查询到当前屏幕(媒介媒体)的宽度，针对不同的屏幕宽度设置不同的样式来适应不同屏

幕。

33. 请解释一下 CSS3 的 Flexbox（弹性盒布局模型）,以及适用场景？

(1) 一个用于页面布局的全新 CSS3 功能，Flexbox 可以把列表放在同一个方向（从上到下排列，从

左到右），并让列表能延伸到占用可用的空间。

(2) 较为复杂的布局还可以通过嵌套一个伸缩容器（flex container）来实现。

(3) 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。

(4) 它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

(5) 常规布局是基于块和内联流方向，而 Flex 布局是基于 flex-flow 流可以很方便的用来做局中，

能对不同屏幕大小自适应。

(6) 在布局上有了比以前更加灵活的空间。

34. flex 布局

(1) 设置在容器上的属性

1) flex-direction：row | row-reverse | column | column-reverse 项目的排列方向

2) flex-wrap：nowrap | wrap | wrap-reverse 是否换行

3) flex-flow：<flex-direction> || <flex-wrap> flex-direction 和 flex-wrap 的简写

4) justify-content：flex-start | flex-end | center | space-between | space-around 在水平

方向上的对齐方式5) align-items: flex-start | flex-end | center | baseline | stretch 定义在垂直方向上的对齐

方式

6) align-content: flex-start | flex-end | center | space-between | space-around | stretch

定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用(item 有多行

时)

(2) 设置在项目上的属性

1) order：<number> 定义项目在容器中的排列顺序，数值越小，排列越靠前，默认值为 0

2) flex-basis：<length> | auto 定义了在分配多余空间之前，项目占据的主轴空间，浏览器

根据这个属性，计算主轴是否有多余空间

3) flex-grow: <number> 定义项目的放大比例。默认值为 0，即如果存在剩余空间，也不放

大

4) flex-shrink: <number> 定义项目的缩小比例。默认值: 1，即如果空间不足，该项目将缩

小，负值对该属性无效。

5) flex：none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]flex-grow, flex-shrink

和 flex-basis 的简写 默认值：0 1 auto， 即不放大，可缩小，大小就是项目本身的大

小。

6) align-self：auto | flex-start | flex-end | center | baseline | stretch 允许单个项目有与其

他项目不一样的对齐方式

35. 设置 p 的 font-size:10rem，当用户重置或拖曳浏览器窗口时，文本大小

是否会也随着变化？

不会。rem 是以 html 根元素中 font-size 的大小为基准的相对度量单位，文本的大小不会随着窗口

的大小改变而改变。