六、CSS第四天（标准流、浮动、Flex布局）
1. 标准流——标签默认排列规则（块级、行内、行内块）
2. 浮动、Flex布局——使块级元素在一行显示
-
浮动：float : left|right
-
特点：顶对齐，具备行内块显示模式特点
[浮动脱标：浮动的标签不再占用标准流的位置，例如两个盒子，有一个添加浮动属性，另外一个不加，那么添加浮动属性的标签就会浮在另一个上方]
-
清除浮动——由于子级浮动，父级没有高度，子级无法撑开父级高度
- 双伪元素法
-
-
Flex布局（推荐）
<style> /*三个盒子在一行中均匀排布*/ .box{ display: flex; justify-content: space-between; height: 300px; border: 1px solid #000; } .box div{ width: 200px; height: 100px; background-color: pink; } </style> <body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> </div> </body>
（1）Flex组成
- 设置方式——给父级元素设置 display:flex，子元素可以自动挤压或拉伸
- 组成部分：
- 弹性容器（父级）
- 弹性盒子（子级）
- 主轴：默认在水平方向（弹性盒子沿着主轴方向排列）
- 侧轴|交叉轴：默认在垂直方向
| 描述 | 属性 |
|---|---|
| 创建flex容器 | display:flex |
| 主轴对齐方式 | justify-content |
| 侧轴对齐方式 | align-self |
| 某个弹性盒子侧轴对齐方式 | align-self |
| 修改主轴方向 | flex-direction |
| 弹性伸缩比 | flex |
| 弹性盒子换行 | flex-wrap |
| 行对齐方式 | align-content |
（2）主轴对齐方式：justify-content
| 属性值 | 效果 |
|---|---|
| flex-start | 默认值，弹性盒子从起点开始依次排列 |
| flex-end | 弹性盒子从终点开始依次排列 |
| center | 弹性盒子沿主轴居中排列 |
| space-between | 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间 |
| space-around | 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧 |
| space-evenly | 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等 |
（3）侧轴对齐方式：
align-items : 当前弹性容器内所有弹性盒子的侧轴对齐方式（给容器设置）
align-self : 单独控制某个弹性盒子的侧轴对齐方式 （给弹性盒子设置）
| 属性值 | 效果 |
|---|---|
| stretch | 弹性盒子沿着侧轴先被拉伸至铺满容器 |
| center | 弹性盒子沿侧轴居中排列 |
| flex-start | 弹性盒子从起点开始依次排列 |
| flex-end | 弹性盒子从终点开始依次排列 |
（4）修改主轴方向——使盒子垂直排列
flex-direction : column (侧轴自动变为水平方向)
（5）弹性伸缩比：控制弹性盒子的主轴方向尺寸——flex
*主轴方向尺寸是靠内容撑开，侧轴默认拉伸
.box div:nth-child(2){
flex: 1; /*占容器剩余尺寸的1/3*/
}
.box div:nth-child(3){
flex: 2; /*占容器剩余尺寸的2/3*/
}
(6) 弹性盒子换行与行对齐
*弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示
换行：flex-wrap : wrap|nowrap(默认)
行对齐：align-content : 属性值与主轴对齐方式完全一样
707
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
