前端必须熟悉的几种布局方式

前言

最近在准备整理基础，准备跳槽，找个好一点的东家。😎 记录学习整理的过程，希望能帮到年后跳槽的你，让我们一起来巩固基础吧。<br/>目前在一家国企单位，朝九晚五的生活让我感到舒适，有大量的时间，做自己喜欢的事。时间久了，我感到了焦虑，由于公司是非互联网，开发也是根据自己已知技术去开发，技术成长很慢，技术氛围没那么强，想突破一下自己， 是该逃离舒适区了。 </br> </br> 本章主要是回顾Flex使用 和 一些常用布局的写法。</br>

熟悉HTML页面架构和常用布局

Flex

Flex 概念

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

注意：

• 任何一个容器都可以指定为 Flex
• 行内元素也可以指定为 Flex 布局， display: inline-flex;
• Webkit 内核的浏览器，必须加上-webkit前缀。 display: -webkit-flex; / Safari /

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

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

容器属性

作用于父容器的属性

flex-direction

该属性决定了主轴以什么方向排列

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

1flex-direction: column;

1flex-direction:row-reverse

1flex-direction: row-reverse;

flex-wrap

该属性决定了元素是否在一条轴线上，通过指定它的属性可以子元素换行。

• nowrap :默认，不换行。
• wrap: 让子元素在一条线上有序的排列着，当一条线排不下的时候，会换行。
• wrap-reverse: wrap 的反转。

1flex-wrap: wrap;

1flex-wrap: wrap-reverse;

justify-content

该属性决定了 子元素 在主轴上的对齐方式

属性：

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：均匀排列每个元素,首个元素放置于起点末尾元素放置于终点. 间隔： 元素个数n - 1
• space-evenly :均匀排列每个元素,每个元素之间的间隔相等。 间隔：元素个数n + 1
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

1justify-content: center;

1justify-content: flex-end;

1justify-content: space-between;

1justify-content: space-around;
2

1 justify-content: space-evenly;
2

align-items

该属性是让子元素如何在交叉抽(竖轴)方向上对齐。

属性：

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

1align-items: flex-end;

1align-items: center;

1align-items: baseline;

1align-items: stretch;

align-content

该元素定义了多条轴的对齐方式，当只有一根轴时，不起作用。

属性：

• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch（默认值）：轴线占满整个交叉轴。

​

1align-content: flex-start;

1align-content: flex-end;

1align-content: center;

1align-content: space-between;

1align-content: space-around;

作用于子元素的属性

order

父容器为 flex. 时， 子元素可以通过 order 达到排序的功能，数值越小，排列最前面。

1    <div class="main">
2        <div class="son1">
3            
4        </div>
5        <div class="son2">
6            
7        </div>
8        <div class="son3">
9            
10        </div>
11    </div>
12
13
14<style>
15.main{
16    width: 400px;
17    height: 300px;
18    border-radius: 15px;
19    display: flex;
20    justify-items: center;
21    align-items: center;
22    background: lightseagreen;
23    margin: auto;
24    margin-top: 200px;
25}
26.son1{
27    width: 80px;
28    height: 100px;
29    border-radius: 15px;
30    margin: 10px;
31    order: 1;
32    background: coral;
33}
34.son2{
35    width: 80px;
36    height: 100px;
37    border-radius: 15px;
38    margin: 10px;
39    order: 0.2;
40    background: darkcyan;
41}
42.son3{
43    width: 80px;
44    height: 100px;
45    border-radius: 15px;
46    margin: 10px;
47    order: 3;
48    background: gold;
49}
50</style>

flex-grow

该属性用来指定子元素在父容器中按比例指定大小，如果每一项都指定比例相同的话，那么元素会平分排列布局。

1    <div class="main">
2        <div class="son1">
3            
4        </div>
5        <div class="son2">
6            
7        </div>
8        <div class="son3">
9            
10        </div>
11    </div>

1<style>
2    .main{
3    width: 400px;
4    height: 300px;
5    border-radius: 15px;
6    display: flex;
7    justify-items: center;
8    align-items: center;
9    background: lightseagreen;
10    margin: auto;
11    margin-top: 200px;
12}
13.son1{
14    height: 100px;
15    border-radius: 15px;
16    margin: 10px;
17    flex-grow: 2;
18    background: coral;
19}
20.son2{
21    height: 100px;
22    border-radius: 15px;
23    margin: 10px;
24    flex-grow: 2;
25    background: darkcyan;
26}
27.son3{
28    height: 100px;
29    border-radius: 15px;
30    margin: 10px;
31    flex-grow: 2;
32    background: gold;
33}
34
35</style>

flex-shrink

该属性是按比例缩小子元素， 默认为1， 当主轴空间不足时，它会按比例缩小。

1<style>
2.main{
3    width: 400px;
4    height: 300px;
5    border-radius: 15px;
6    display: flex;
7    justify-items: center;
8    align-items: center;
9    background: lightseagreen;
10    margin: auto;
11    margin-top: 200px;
12}
13.son1{
14    width: 200px;
15    height: 100px;
16    border-radius: 15px;
17    margin: 10px;
18    /* 缩小5 的比例 */
19    flex-shrink: 5; 
20    background: coral;
21}
22.son2{
23    width: 160px;
24    height: 100px;
25    border-radius: 15px;
26    margin: 10px;
27    background: darkcyan;
28}
29.son3{
30    width: 160px;
31    height: 100px;
32    border-radius: 15px;
33    margin: 10px;
34    background: gold;
35}
36</style>

flex-basis

该属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

1.son1{
2    /* 指定了宽度没有作用， flex-basis 决定了占据主轴多少宽度，
3    浏览器会根据剩余宽度来计算主轴还有多少宽度 */
4    width: 300px;
5    height: 100px;
6    border-radius: 15px;
7    margin: 10px;
8    flex-basis: 100px;
9    background: coral;
10}
11.son2{
12    width: 160px;
13    height: 100px;
14    border-radius: 15px;
15    margin: 10px;
16    background: darkcyan;
17}
18.son3{
19    height: 100px;
20    border-radius: 15px;
21    margin: 10px;
22    flex-basis: 100px;
23    background: gold;
24}

flex-self

该属性允许单个 元素 和 其它 元素不同的排列方式，覆盖父元素的 aligin-items

值：

• flex-start 左对齐
• flex-end 右对齐
• center 居中
• baseline 项目的第一行文字的基线对齐。
• stretch 如果项目未设置高度或设为auto，将占满整个容器的高度。

1.son3{
2    border-radius: 15px;
3    margin: 10px;
4    flex-basis: 100px;
5    background: gold;
6    align-self: stretch;
7}

常用布局

全屏布局

全局布局由 顶部，主体，底部 构成。通常一般固定 顶部 和 底部高度, 主体自适应 这样就实现了全屏布局。

可以使用语义化标签， header , main footer.

下面通过 Flex 布局来达到全屏布局的效果。

• 在最外层套一个容器，给容器 指定 display: flex;
• 在容器中指定子元素的排列方式， flex-direction: column;
• 顶部和底部高度，主体使用 flex : 1 比例来达到自适应。

flex 是 flex-grow、flex-shrink、flex-basis的缩写

• flex-grow 属性：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
• flex-shrink 属性：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
• flex-basis 属性：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

1    <div class="full">
2        <header>导航</header>
3        <main>主体内容</main>
4        <footer>底部</footer>
5    </div>

1*{
2    margin: 0;
3    padding: 0;
4}
5.full{
6    width: 100%;
7    height: 100vh;
8    display: flex;
9    flex-direction: column;
10}
11header{
12    height: 60px;
13    font-weight: 900;
14    color: white;
15    text-align: center;
16    background: darkcyan;
17}
18main{
19    flex: 1;
20    align-items: center;
21    font-weight: 900;
22    color: white;
23    text-align: center;
24    background:orange;
25}
26footer{
27    height: 60px;
28    font-weight: 900;
29    color: white;
30    text-align: center;
31    background: rgb(48, 40, 163);
32}

两列布局

最经典的系统管理布局 两列布局 . 它主要由是 两列都固定高度 ， 左端指定宽度,右端通过flex:1 来达到自适应宽度 。

1    <div class="full">
2        <div class="left">
3
4        </div>
5        <div class="right">
6
7        </div>
8    </div>

1*{
2    margin: 0;
3    padding: 0;
4}
5.full{
6    width: 100%;
7    height: 100vh;
8    display: flex;
9    flex-wrap: wrap;
10}
11.left{
12    width: 200px;
13    height: 100vh;
14    background: rgb(0, 140, 255);
15}
16.right{
17    flex:1;
18    height: 100vh;
19    background: rgb(158, 159, 160); 
20}

后台系统布局

我在写后台时，布局页面除了像 两列布局 这种的，也会有这种布局，我叫它 后台系统布局 🤣。

它的特点： 它其实也是两列布局，只是它在右端 分为 顶部 和 主体 两部分， 顶部会放置一些点击左侧菜单关联的菜单，主体放置点击菜单显示的内容

如何进行布局

• 它和两列布局基本相同，不同点就是它在右端显示不一样
• 右端分为主体和顶部， 顶部 固定高度 , 主体 通过 flex:1 来达到自适应
• 右端容器通过 flex-direction: column; 指定子元素 按交叉轴(竖轴) 排列布局。

1    <div class="full">
2        <div class="left">
3
4        </div>
5        <div class="right">
6            <div class="right-head">
7
8            </div>
9            <div class="right-main">
10
11            </div>
12        </div>
13    </div>

1*{
2    margin: 0;
3    padding: 0;
4}
5.full{
6    width: 100%;
7    height: 100vh;
8    display: flex;
9    /* flex-wrap: wrap; */
10}
11.left{
12    width: 200px;
13    height: 100vh;
14    background: rgb(0, 140, 255);
15}
16.right{
17    height: 100vh;
18    display: flex;
19    flex:1;
20    flex-direction: column;
21    background: rgb(158, 159, 160); 
22}
23.right-head{
24    height: 80px;
25    background: cornflowerblue;
26}
27.right-main{
28    flex: 1;
29    background: orange;
30}

居中布局

居中布局在我们日常写页面时经常用到，场景也比较多，eg： 登陆 , 弹窗Dialog .

这里我使用 flex 来实现 居中布局，flex 实现起来更简洁，这里就不讨论其它实现方法了。

如何进行布局

• 通过给父容器 的 宽度 和 高度 都 100% ， 铺满整个屏幕，
• 父容器 display 为 flex, 使用 justify-content: center; 决定 子元素在主轴的方向上怎么显示，在通过 align-items: center; 来决定子元素在交叉轴(竖轴)如何显示。
• 子容器只要指定 width 和 ·height 即可。

1    <div class="full">
2        <div class="login">
3            登陆
4        </div>
5    </div>

1*{
2    margin: 0;
3    padding: 0;
4}
5.full{
6    width: 100%;
7    height: 100vh;
8    background: rgb(0, 110, 255);
9    display: flex;
10    justify-content: center;
11    align-items: center;
12}
13.login{
14    width: 500px;
15    height: 400px;
16    line-height: 400px;
17    text-align: center;
18    border-radius: 15px;
19    background: rgb(70, 25, 129);
20    color: white;
21    font-size: 33px;
22    font-weight: 900;
23}

瀑布流布局

瀑布流布局在我们现在的前端页面中经常会用的到，它可以有效的降低页面的复杂度，节省很多的空间，对于整个页面不需要太多的操作，只需要下拉就可以浏览用户需要看到的数据；并且，在当前这个APP至上的时代，瀑布流可以提供很好的用户体验，通过结合下拉刷新，上拉加载进行数据的懒加载等操作，对于用户的体验感来说是接近于满分的！

瀑布流的特点：

• 等宽不等高，高度是动态识别图像的高度来显示的。
• 它会当计算当前屏幕的宽度，来显示对应的个数，一行排满的话，它会找到第一行高度最低的继续排列第二行，依次类推排列。

实现方法

• CSS 实现方法： column-count + column-gap 来达到分栏排放和每项之间的间距，但使用它有缺点，固定死了 列，不能动态随着浏览器的宽度动态变化而变化分栏。
• JS实现方法： 固定死图片的宽度， 图片放置到一个数组中， 浏览器根据动态识别宽度来判断当前显示多少项，然后遍历数组，将url 放置 src 中， 下拉刷新数据，重新调取请求数据接口，push到数组中，实现下拉请求数据。

本文采用CSS 实现，开发中为了节省时间，可以使用库来实现。

1<div class="container">
2    <div class="waterFall">
3      <div class="item">
4        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1737312773,3182446833&fm=26&gp=0.jpg"
5          alt="">
6        <p>First</p>
7      </div>
8      <div class="item">
9        <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1875486819,805819368&fm=26&gp=0.jpg" alt="">
10        <p>First</p>
11      </div>
12      <div class="item">
13        <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=35353288,1650949252&fm=26&gp=0.jpg" alt="">
14        <p>First</p>
15      </div>
16      <div class="item">
17        <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1474216128,3433531408&fm=26&gp=0.jpg"
18          alt="">
19        <p>First</p>
20      </div>
21
22      <div class="item">
23        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=143483417,2871731501&fm=26&gp=0.jpg" alt="">
24        <p>First</p>
25      </div>
26      <div class="item">
27        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1098989386,3642257866&fm=26&gp=0.jpg"
28          alt="">
29        <p>First</p>
30      </div>
31      <div class="item">
32        <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1040129980,3013621150&fm=26&gp=0.jpg"
33          alt="">
34        <p>First</p>
35      </div>
36    </div>
37  </div>

1 .container {
2      width: 80%;
3      margin: 0 auto;
4    }
5
6    .waterFall {
7      /* 页面分几列显示 */
8      column-count: 4;
9      -webkit-column-count: 4;
10      /* Firfox */
11      -moz-column-count: 4;
12      /*  */
13      /* 列之间的间距 */
14      column-gap: 1em;
15      -webkit-column-gap: 1em;
16      -moz-column-gap: 1em;
17    }
18
19    .item {
20      padding: 1em;
21      margin: 0 0 1em 0;
22      border: 1px solid orange;
23    }
24
25    .item img {
26      width: 100%;
27      margin-bottom: 10px;
28    }

总结

本文主要是HTML布局进行查缺补漏复习，下一章将进行BOM的补充。祝愿大家都能找到一份好的工作！

结语

✨觉得不错的点赞，帮忙转发分享以下，原创不易！

✨关注微信公众号'前端自学社区' 获取更多资料

💥回复加群 可以加入 自学前端群💥