flex布局

 通过将 display 属性设置为 flex，flex 容器将可伸缩

（布局原理是通过给父元素添加flex属性 来控制子元素位置）

.box {
  display: flex;
}

 justify-content 属性用于对齐 flex 布局

center 值将 flex 项目在容器的中心对齐

flex-start 值将 flex 项目在容器的开头对齐

flex-end 值将 flex 项目在容器的末端对齐

space-around 值显示行之前、之间和之后带有空格的 flex 属性

例如:

.box {
  display: flex;
  justify-content: space-around;
}

 

.box {
  display: flex;
  justify-content: flex-end;
}

align-items 属性属性用于垂直对齐 flex 

center 值将 flex 项目在容器中间对齐

flex-start 值将 flex 项目在容器顶部对齐

flex-end 值将弹性项目在容器底部对齐

stretch 值拉伸 flex 项目以填充容器

baseline 值使 flex 项目基线对齐

例如:

.box  {
  display: flex;
  height: 200px;
  align-items: center;
}

.box {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

align-content 属性

align-content 属性用于对齐弹性线

space-between 值显示的弹性线之间有相等的间距

space-around 值显示弹性线在其之前、之间和之后带有空格

stretch 值拉伸弹性线以占据剩余空间

例如:

.box {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}

.box {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}

flex-direction 属性

flex-direction 属性定义容器要在哪个方向上堆叠 flex 项目

column 值设置垂直堆叠 flex 项目（从上到下）

column-reverse 值垂直堆叠 flex 项目（但从下到上）

row 值水平堆叠 flex 项目（从左到右）(默认)

row-reverse 值水平堆叠 flex 项目（但从右到左)

.box {
  display: flex;
  flex-direction: row-reverse;

.box {
  display: flex;
  flex-direction: column-reverse;
}

}