Flex布局

flex布局

image.png

在 flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)，这是默认的设置，当然你可以通过修改使垂直方向变为主轴，水平方向变为交叉轴。
宽度和高度取决于主轴的方向。

flex容器：

实现flex布局需要一个flex容器。通常是在父元素中加上display:flex;

  
child1
  
child2
  
child3

.parent{
  border: 1px solid red;
}
.child{
  border:1px solid black;
}
.child:nth-child(1) {
  background:red;
}
.child:nth-child(2) {
  background:green;
}
.child:nth-child(3) {
  background:blue;
}

image.png

首先我们创建一个容器，里面有3个子元素。

.parent{
  border: 1px solid red;
  display:flex;
}

image.png

给父元素加上display:flex后元素变为1行。
有6种属性可以设置在元素上，分别是：

1. flex-direction：主轴方向（即排列的方向）
2. flex-wrap：决定容器内元素是否换行。
3. flex-flow: flex-direction 和 flex-wrap 的简写形式。
4. justify-content:元素在主轴的对齐方式。
5. align-items：定义了项目在交叉轴的对齐方式。
6. align-content: 定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用

flex-direction

默认值是row，主轴在水平方向，从左边开始。

row-reverse

主轴在水平方向，从右边开始，如下图：

image.png

column

主轴在垂直方向，从上而下。

image.png

column-reverse：

主轴在垂直方向，从下而上。

image.png

flex-wrap

默认情况下，元素都是排在主轴上，使用flex-wrap可以实现换行。

nowrap

默认情况下是nowrap，当主轴尺寸固定的时候，若空间不足，会稍微调整元素大小，使其在空间内。

.parent{
  border: 1px solid red;
  display:flex;
  width: 400px;
  
}
.child{
  border:1px solid black;
  margin:40px;
  height: 100px;
  line-height: 100px;
  width: 100px;
}

我们先将父元素width:400px;然后定义子元素的width:100px,margin:40px;由于宽度不够，子元素被压缩。

image.png

wrap

当我们使用wrap时，由于子元素加上margin的宽度超过了父元素的宽度，所以自动换行。

.parent{
  border: 1px solid red;
  display:flex;
  width: 400px;
  flex-wrap: wrap;
  
}

image.png

wrap-reverse:

第一行的出现在下方，如下图：

image.png

flex-flow

flex-flow是flex-direction和flex-wrap的组合。

flex-flow:  || ;

justify-content

默认是建立在主轴为水平方向的情况。

flex-start

默认值，左对齐。

image.png

flex-end

右对齐

image.png

center

居中对齐

image.png

space-between

两端对齐，元素之间间隔相等，即生于的空间平分。

image.png

space-around

每个元素两侧的间隔相等。

image.png

align-items：

定义了交叉轴上元素的对齐方式。

stretch

默认是stretch，如果元素的高度未设置或者为auto，则自动延申到父元素的高度。

.parent{
  border: 1px solid red;
  display:flex;
  width: 700px;
  height:200px;
  justify-content:center;
  
}
.child{
  border:1px solid black;
  line-height: 100px;
  width: 100px;
}

我们首先定义parent的高度，然后去掉child的高度。

image.png

flex-start

交叉轴的起点对齐。我们首先将元素设置为60px，80px，100px。

image.png

flex-end

交叉轴终点对齐

image.png

center

交叉轴中点对齐。

image.png

baseline

以元素中的第一行文字的基线（通常为底部）为准，进行对齐。

image.png

align-content

定义多条轴线的对齐方式，当只有一根轴时（如flex-wrap设为nowrap时），此时align-content不起作用。

stretch

align-content的默认值，如果我们没有设置子元素的高度，子元素们会平分垂直方向的高度。

.parent{
  border: 1px solid red;
  display:flex;
  width: 500px;
  height:400px;
  flex-wrap: wrap;
  align-content: stretch;
}
.child{
  border:1px solid black;
  line-height: 100px;
  margin:20px;
  width: 100px;
  

}

image.png

flex-start

轴线全在交叉轴的起点对齐

image.png

flex-end

轴线全在交叉轴的终点对齐。

image.png

center

轴线在交叉轴的中间对齐。

image.png

space-between

两端对齐，平分中间剩余空间。

image.png

space-around

每个轴线两侧的间隔相等，所以轴线之间的间隔比轴线与边缘的间隔大一倍

image.png