弹性布局（基础）

弹性布局

弹性布局是一种全新的布局方式
我们之前的传统布局，基于盒模型，依赖display + position + float。我们之前的处理方式对于某些布局，排布起来不是特别方便，比如：元素垂直居中

flex布局是w3c推出的一种新的布局方案，可以简便，完成，响应式的实现各种页面布局，目前，flex布局已经适配与所有浏览器

基于盒模型 + flex布局
flex的基本概念：
1.容器(flex container)：设置了display：flex或者inline-flex的元素
2.弹性子元素(flex item)：容器的子元素

容器内部默认存在两条轴：主轴(mian axis)和侧轴/交叉轴(cross axis)

• 主轴的方向默认是水平的，默认方向从容器左边(main start)延申到容器的右边(main end)

• 侧轴的方向默认是垂直的，默认方向从容器的顶边(cross start)延申到容器的底边(cross end)

注意：主轴和侧轴不是真实存在的，它只是我们为了方便识别方向规定的概念

与flex布局有关的样式

一.与容器有关的样式

1. 将元素设置为容器：display：flex/inline-flex

• 默认弹性子元素会沿着主轴的起点开始一直排布到主轴的终点

2. 设置主轴的方向：flex-direction

• row 默认值，水平方向，从左至右
• row-reverse 水平方向，从右至左
• column 垂直方向，从上至下
• column-reverse 垂直方向，从下至上

3. 换行方式：flex-wrap

• nowrap 默认值，不换行，如果宽度不够，强制压缩弹性子元素的宽
• wrap 换行
• wrap-reverse 反向换行

4. 弹性子元素在主轴上的对齐方式：justify-content

• flex-start 默认值，主轴方向起点对齐
• flex-end 主轴方向终点对齐
• center 主轴方向居中
• space-between 两端的元素靠边，其余元素间隔等距
• space-around 所有元素左右等距

5.弹性子元素在侧轴上的对齐方式：align-items

• flex-start 侧轴方向起点对齐
• flex-end 侧轴方向终点对齐
• center 侧轴方向居中
• stretch 默认值，规定弹性子元素的默认高度，该值只有在不设定弹性子元素的高度时有效，默认填满整个侧轴
• e. baseline 基线对齐

6.多行弹性子元素在侧轴上的对齐方式：align-co