学伸缩布局(flex)这一篇文章就够了——伸缩布局的布局思路

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情 本篇文章中只会讲一些flex布局中常用的代码，一些用不到的这里不会讲

什么是伸缩布局

伸缩布局又被称为弹性布局，它可以快速实现一些常见的布局，和浮动和定位比起来，他就友好太多了，给子盒子加上宽高，父盒子开启伸缩布局加上一些代码子盒子就可以自己去排列。

如何使用伸缩

开启伸缩布局 flex

开启伸缩布局是使用 display:flex;

// 开启伸缩布局
display: flex;

给父级开启伸缩布局之后，里面的子元素不管是块级标签还是什么，都会默认弄成一行

justify-content

justify-content有三个常用的属性

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

我们先来看对应的效果

从图片中我们可以看出
space-between 是两边的元素贴边，然后中间以相同的距离隔开
space-around 是距离两遍一点距离，然后中间以相同的距离隔开
space-evenly 是所有的距离都相等
center 是居中
我们可以随便打开一个网页看一下，几乎所有的导航栏都可以拿这个做到

align-items

有时候父元素里面的子元素并不都是一样的大小，但是我们要让他们都处于同一条线上，就可以使用 align-items，让它们在同一条线上

align-items: start;
align-items: center;
align-items: end;

start 这个我们可以不用记它，因为开启伸缩布局之后就是以顶部去排列的，然后 end 也是，很少有布局会用到它，就只用记住 center 这个让它垂直居中的属性
这个 align-items: center 我做网页的时候只要是水平布局的地方我都会加上它，因为一样的，加上这个更好看一点，慢慢的这也成为了我的习惯

flex-direction

flex-direction就一个常用的属性 column，它的作用是让水平的布局变成垂直的布局
这时候就有人会说了，为什么不写一个让他变成水平布局的，因为打开伸缩布局之后他就是水平的

flex-direction: column;

align-content

align-content 和 justify-content 俩的效果是一样的，只不过 align-content 是垂直排列的

align-content: space-between;
align-content: space-around;
align-content: space-evenly;
align-content: center;

这里我偷个懒，我就不搞了，你们可以自己试一下

flex布局思路

导航栏的布局思路应该就不用说了，我这里说一下其他的

就这个页面将这个区域分为左右两个盒子，右边的盒子就一张图片，左边开启伸缩布局之后让他垂直排列，再使用 justify-content: space-between 去给他进行排列

我这里没有这么去做，就随便写了几个字，主要就是懒
我们看到一个东西时，我们看到的每一个页面中的东西，都是可以用伸缩布局去做出来的，虽然这样做css的代码会剧增，这时候我们可以给看flex布局写一个公共的样式

.f {
    display: flex;
}

.fd-c {
    flex-direction: column;
}

.jcc {
    justify-content: center;
}

.jc-sb {
    justify-content: space-between;
}

.jc-sa {
    justify-content: space-around;
}

.jc-se {
    justify-content: space-evenly;
}

.ac-sb {
    align-content: space-between;
}

.ac-sa {
    align-content: space-around;
}

.ac-se {
    align-content: space-evenly;
}

.ai-c {
    align-items: center;
}

那个元素要用到某个效果，给他加上对应的类名就可以实现，这样就可以节省非常多的代码