Flex布局的基本概况

Flex布局是一种弹性布局方式。

当使用flex布局时，首先定义 display: flex 然后通过以下属性进行定位操作

flex-direction 共有四个选项,初始值为row

• row (默认) 由左到右
• row-reverse 又右到左
• column 由上到下
• column-reverse 由下到上

 注意：选择 row-reverse 排列起始点也将从左边转变成右边起点

　　　 当你调转行或列的方向后，flex-start和flex-end对应的方向也被调转了

row

 

row-reverse

 

 

column

 

 

 column-reverse 

 

 

 

---

 

flex-wrap

如果一行不够我们就会采用多行来显示视图，若默认设置flex-wrap，则内容会缩小到一行，如果不想这样，我们可以自由的设置flex-wrap

• nowrap
• wrap
• wrap-reverse

1. nowrap 如果是默认设置，假设我们有三个div，每个div的宽度是200px，然而它们的父元素只有400px，那flex布局就会自动压缩子元素空间

 

 

　　 2. wrap 换行，第一行在上面

 

 

　　3. wrap-reverse 换行，第一行在下方

 

 

 

---

justify-content

该属性定义了主轴的对齐方式

box{
  justify-content:  flex-start | flex-end | center | space-around | space-between
 
}

1. flex-start  默认选项，按文档流对齐
2. flex-end 右对齐

 

 

　　3. center 居中对齐

　　4.space-around 子元素两侧的间隔相等

 

 

 　　5.space-between 两端对齐，中间相等

 

 

---

align-items （实现垂直对齐）

如果能实现垂直对齐，必然要设置flex布局的交叉轴，也就是 align-items 属性

box{
  align-items: flex-start | flex-end | center | baseline | stretch
}

1. flex-start 交叉轴的起点对齐

 

 2. flex-end ,交叉轴的终点对齐

 

 　　3.center 交叉轴中点对齐（垂直布局的一种实现方式）

 

 　　4.baseline 基于第一行文字对齐

 

 　　5.tretch 默认值，如果元素未设置高度，将占满整个容器的高度