语法

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：主轴为垂直方向，起点在下沿。

display属性的值及它们的作用

(1) block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。

(2) none 元素不显示，并从文档中移除。

(3) inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。

(4) inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。

(5) list-item 象块类型元素一样显示，并添加样式列表标记。

(6) table 此元素会作为块级表格来显示。

(7) inherit 规定应该从父元素继承 display 属性的值。

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