9.1.4align-items 属性
align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式
align-items: flex-start | flex-end | center
flex-start弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界flex-end弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界center弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）
.flex-container { display: flex; justify-content: center; width: 400px; height: 250px; background-color: lightgrey; align-items: flex-end; }
9.2子元素上的属性
9.2.1flex属性
flex 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间
默认为0，即如果存在剩余空间，也不放大
如果只有一个子元素设置，那么按扩展因子转化的百分比对其分配剩余空间。0.1即10%，1即100%，超出按100%
<div class="flex-container"> <div class="flex-item1">flex item 1</div> <div class="flex-item2">flex item 2</div> <div class="flex-item3">flex item 3</div> </div> <style> .flex-container { display: flex; width: 400px; height: 250px; background-color: gold; } .flex-item1 { height: 150px; background-color: red; flex: 1; } .flex-item2 { height: 150px; background-color: green; flex: 2; } .flex-item3 { height: 150px; background-color: blue; flex: 1; } </style>
十、文档流
文档流是文档中可显示对象在排列时所占用的位置/空间
例如：块元素自上而下摆放，内联元素，从左到右摆放
标准流里面的限制非常多，导致很多页面效果无法实现
- 高矮不齐，底边对齐
- 空白折叠现象
- 无论多少个空格、换行、tab，都会折叠为一个空格
- 如果我们想让img标签之间没有空隙，必须紧密连接
10.1文档流产生的问题
高矮不齐，底边对齐
<span>我是文本内容</span> <img src="1.jpg" alt=""> img{ width: 200px; }
空格折叠
<span>我是文本 内容</span> <img src="1.jpg" alt=""> 复制 img{ width: 200px; }
元素无空隙
<span>我是文本内容</span> <img src="1.jpg" alt=""><img src="1.jpg" alt=""> 复制 img{ width: 200px; }
如果我们现在就要并排顶部对齐，那该怎么办呢？办法是：移民！脱离标准流！
10.2脱离文档流
使⼀个元素脱离标准文档流有三种方式
- 浮动
- 绝对定位
- 固定定位
10.2.1浮动
浮动的定义
float属性定义元素在哪个方向浮动，任何元素都可以浮动。
| 值 | 描述 |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
浮动的原理
- 浮动以后使元素脱离了文档流
- 浮动只有左右浮动，没有上下浮动
元素向左浮动
脱离文档流之后，元素相当于在页面上面增加一个浮层来放置内容。此时可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面，所以会出现折叠现象.
.container{ width: 200px; height: 200px; background-color: #81c784; } .box{ width: 100px; height: 100px; background-color: #fff176; float: left; } <div class="box"></div> <div class="container"></div>
元素向右浮动
.container{ width: 200px; height: 200px; background-color: #81c784; } .box{ width: 100px; height: 100px; background-color: #fff176; float: right; } <div class="box"></div> <div class="container"></div>
所有元素向左浮动
当所有元素同时浮动的时候，会变成水平摆放，向左或者向右
.box{ width: 100px; height: 100px; background-color: #fff176; float: left; margin: 0 5px; } <div class="box"></div> <div class="box"></div> <div class="box"></div>
当容器不足时
当容器不足以横向摆放内容时候，会在下一行摆放
.container{ width: 250px; height: 300px; border: 1px solid red; } .box{ width: 100px; height: 100px; background-color: #fff176; float: left; margin: 5px; } <div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div>
