一.flex 是flexible box 的缩写，即为“弹性布局”，用来为盒子模型提供最大的灵活性，任何容器都可以指定为flex布局；
flex容器：采用 flex 布局的元素，即容器；
flex项目：采用 flex 布局的元素（即父元素）的子元素，即项目；
flex容器属性
1、display:flex 、inline-flex
注意：父元素设为 Flex 布局以后，其子元素的float、clear和vertical-align属性将失效。 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局
2、flex-direction 属性 决定主轴的方向（即项目的排列方向）
flex-direction: row（默认水平） | row-reverse | column（纵向） | column-reverse; 3、flex-wrap 属性 定义子元素是否换行显示
flex-wrap: nowrap（不换行） | wrap（换行） | wrap-reverse;（反向换行） 4、 flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap; 5、 justify-content属性 定义了项目在主轴（）上的对齐方式。
justify-content: flex-start | flex-end | center | space-between | space-around; 6、align-items 属性 定义项目在侧轴(单行)上如何对齐。
align-items: flex-start | flex-end | center | baseline | stretch（默认值）; 7、align-content 属性 定义了多根轴线的对齐方式。（对于单行子元素，该属性不起作用）
align-content: flex-start | flex-end | center | space-between | space-around | stretch; align-content在侧轴上执行样式的时候，会把默认的间距给合并。对于单行子元素，该属性不起作用
二.rem
# rem布局
1.rem单位
rem (root em)是一个相对单位，类似于em
- em是父元素字体大小
- rem是相对html元素的字体大小
**
/* 根html 为 12px */
html {
font-size: 12px;
}
/* 此时 div 的字体大小就是 24px */
div {
font-size: 2rem;
}
rem的原理：通过媒体查询的方式动态改变html标签的font-size的大小 当屏幕越大,让html标签的font-size变大即可 当屏幕越小,让html标签的font-size变小即可。 rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。
