一、Flex布局是什么

Flex 是 Flexible Box 的缩写， "弹性布局”， 用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局

.box {
   
   display: flex;
}

注意：设为Flex布局以后，子元素的float、clear、和vertical-align属性将失效

二、基本概念

采用Flex 布局的元素，称为Flex容器（flex container），简称“容器”。它的所有子元素自动为容器成员，称为Flex项目（flex item），简称"项目"

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

三、容器的属性

以下6个属性设置在容器上

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

3.1 flex-direction 属性
flex-direction 属性决定主轴的方向（即项目的排列方向）

.box {
   
   flex-direction: row | row-reverse | column | column-reverse;
}

  • row(默认值）：主轴为水平方向，起点在左端
  • row-reverse： 主轴为水平方向，起点在右端
  • column： 主轴为垂直方向，起点在上沿
  • column-reverse：主轴为垂直方向，起点在下沿

3.2 flex-wrap 属性
默认情况下，项目都排在一条线是哪个。flex-wrap属性定义，如果一条轴线排不下，如何换行

.box {
   
  flex-wrap: nowrap | wrap | wrap-reverse;
}

可能取得值
（1） nowrap（默认）： 不换行

(2) wrap: 换行，第一行在上方

(3) wrap-reverse: 换行，第一行在下方

3.4 justify-content 属性
justify-content 属性定义了项目在主轴上的对齐方式

.box {
   
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
  • flex-start(默认值）：左对齐
  • flex-end： 右对齐
  • center： 居中
  • space-between：两端对其，项目之间的间隔都相等
  • space-around： 每个项目两侧的间隔相等


3.5