CSS浮动与Flex布局

一、浮动

1.浮动（float）

属性值

• left：左对齐
• right：右对齐

例：

div {
  float: left;
}

特点：

• 浮动后的盒子顶对齐
• 浮动后的盒子具备行内块特点
• 浮动后的盒子脱标，不占用标准流的位置

2.清除浮动（clear）

属性值：both
例：

 .clearfix {
  clear: both;
 }

二、Flex布局

1.Flex组成

设置方式：给父元素设置 display: flex，子元素可以自动挤压或拉伸
组成部分：

• 弹性容器
• 弹性盒子
• 主轴：默认在水平方向
• 侧轴 / 交叉轴：默认在垂直方向

2.主轴对齐方式（justify-content）

属性值	说明
flex-start	默认值，弹性盒子从起点依次排列
flex-end	弹性盒子从终点依次排列
center	弹性盒子沿主轴居中排列
space-between	弹性盒子沿主轴均匀排列，左右没有空白
space-around	弹性盒子沿主轴均匀排列，弹性盒子有左右margin值
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

3.侧轴对齐方式

• align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
• align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）

属性值	说明
stretch	弹性盒子沿着侧轴线被拉伸至铺满容器
center	弹性盒子沿侧轴居中排列
flex-start	弹性盒子从起点依次排列
flex-end	弹性盒子从终点依次排列

4.修改主轴方向（flex-direction）

属性值	说明
row	水平方向，从左到右（默认）
column	垂直方向，从左到右
row-reverse	水平方向，从右到左
column-reverse	垂直方向，从右到左

5.弹性伸缩比（flex）

属性值：整数数字，表示占用父级剩余尺寸的份数
例：

 .fix {
  flex: 1;
 }

6.弹性盒子换行（flex-wrap）

属性值

• wrap（换行）
• nowrap（不换行，默认值）