一、Flex布局

能够使用Flex布局模型灵活、快速的开发网页

1.Flex布局/弹性布局：

是一种浏览器提倡的布局模型2. 布局网页更简单、灵活 3.避免浮动脱标的问题

2.作用

基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。 2. Flex布局非常适合结构化布局

3. 设置方式

父元素添加 display: flex，子元素可以自动的挤压或拉伸

4. 组成部分

弹性容器 2. 弹性盒子3. 主轴 4. 侧轴 / 交叉轴

5.弹性容器

添加了df的这个盒子，叫做弹性容器 特点： 1.默宽度就是父元素的宽度，高度由内容所撑开

6.弹性盒子

弹性盒子：就是弹性容器的最近一级子元素特点： 1.默认宽度由内容所撑开，默认的高度和父元素一样高； 2.弹性盒子没有块级元素，行内块元素，行内元素之分，统统叫做弹性盒子，弹性盒子可以设置宽高; 3.弹性盒子默认不会换行，会沿着主轴方向一行显示； 4.要注意弹性盒子的概念

二、主轴对齐方式

使用justify-content调节元素在主轴的对齐方式 flex-start 默认值, 起点开始依次排列 flex-end 终点开始依次排列 center 沿主轴居中排列 space-around 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧 space-between 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间 space-evenly 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等

三、侧轴对齐方式

使用align-items调节元素在侧轴的对齐方式

1.修改侧轴对齐方式属性:

1.align-items（添加到弹性容器）2. align-self：控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子

flex-start 默认值, 起点开始依次排列 flex-end 终点开始依次排列 center 沿侧轴居中排列 stretch 默认值, 弹性盒子沿着主轴线被拉伸至铺满容器

移动web