「这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战」。

如有错误，欢迎指正，谢谢！

常见页面布局方式

传统布局
Flex布局（本篇重点）
Grid布局

1、传统布局

基于盒模型，通过display、position、float进行布局，优点：兼容性好，缺点：布局过程相对繁琐；对于特殊布局非常不方便，垂直居中就非常不容易实现；对于开发人员，需要掌握的知识较多而且相对复杂，这里就不过多介绍了

2、Flex布局

借鉴阮一峰老师的文章，www.ruanyifeng.com/blog/2015/0…

Flex 布局（又称为 flexbox）是一种一维的布局模型，学习flex布局之前，首先来了解一下flex布局中的几个重要概念容器：采用flex布局的元素，就称为容器项目：容器里的所有子元素称为项目容器默认存在两根轴，水平的主轴和垂直的交叉轴。项目默认按主轴排列

容器的属性

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction

指定主轴的方向（即项目的排列方向）

.box{
    flex-direction:row|row-reverse|column|column-reverse
}

flex-direction:row，主轴为水平方向，起点在左端

flex-direction:row-reverse，主轴为水平方向，起点在右端

flex-direction:column，主轴为垂直方向，起点在上沿

flex-direction:column-reverse，主轴为垂直方向，起点在下沿

flex-wrap:定义项目在一条轴线上排不下时，如何换行

.box{
    flex-wrap:nowrap|wrap|wrap-reverse
}

flex-wrap:nowrap(默认，不换行）

flex-wrap:wrap,换行，第一行在上方

flex-wrap:wrap-reverse,换行，第一行在下方

flex-flow

flex-direction和flex-wrap的简写，默认值：row nowrap

.box{
    flex-flow:flex-direction flex-wrap
}

justify-content

项目在主轴上的对齐方式

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

align-items

定义项目在交叉轴上如何对齐。

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

align-items:flex-start,交叉轴的起点对齐

align-items:flex-end,交叉轴的终点对齐。

align-items:center,交叉轴的中点对齐。

align-items:baseline,项目的第一行文字的基线对齐。

align-items:stretch,（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content

定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

这个图太难画了，用一下阮一峰老师的

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

项目的属性

order
flex-grow
flex-shrink
flex-basis
flex
align-self

order

定义项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow

定义项目的放大比例，默认为0，如果存在剩余空间，也不放大如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）

flex-shrink

定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

flex-basis

定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

flex

是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

align-self

取值：除了auto,其他和align-items属性一致允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

3、Grid布局

这个就有时间再更吧

常见的网页布局方式