语法

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 的大小为基准的相对度量单位，文本的大小不会随着窗口
的大小改变而改变。