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

什么是伸缩布局

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

如何使用伸缩

开启伸缩布局 flex

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

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

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

justify-content

justify-content有三个常用的属性

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly; 

我们先来看对应的效果

align-items

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

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

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布局思路

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

.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;
} 

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

最后

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。

有需要的小伙伴，可以点击下方卡片领取，无偿分享