CSS常见布局

CSS常见布局如下图所示:

其中CSS3之前的常用布局是

文档流
浮动流
定位流

CSS3之后的新增布局

Flex弹性盒子布局 —— 一维空间布局
Grid网格布局 —— 二维空间布局
Multicol多列布局 —— 文本，内容的多列展示

1 文档流布局

文档流布局（或称常规流）是默认的布局方式，常规流中的盒子分为块级盒子（block）和内联级盒子（inline）

块级盒子参与BFC（Block Formatting Content块级格式上下文）

内敛级盒子参加IFC(Inline Formatting Content内联级格式上下文)，常规流中的所有元素都会以这种布局方式运作。

也就是：块元素独占一行（左），行内元素共享一行（右）

在不满足于这样的块,行布局的情况下，产生了脱离文档流的布局，以下浮动和定位都是“脱标”

面试点：什么是BFC？如何触发一个BFC特性？外边距塌陷？如何解决？

下列元素会脱离常规流：

display:float 浮动的元素
设置 position 属性为 absolute 或者 fixed 的元素
the root element (html) 根元素

2 浮动布局

"浮动的本质就是为了实现文字环绕效果 ——《CSS世界》"

把一个元素“浮动”(float) 起来，会改变该元素本身和在文档布局流中跟随它的其他元素的行为。这一元素会浮动到左侧或右侧，并且从文档布局流中移除，这时候其他的周围内容就会在这个被设置浮动float的元素周围环绕

用浮动布局搭建的网页结构

浮动布局的容错性很差，缺少弹性，一旦某列高度变高了，整个列表就会产生布局错位，牵一发而动全身所以在CSS3出现了类似flex弹性布局这种更自适应的布局

3 定位布局

定位 position 能够让我们把一个元素从它原本在正常布局流中应该在的位置移动到另一个位置。

但它并不是一种用来做主要页面布局的方式，而更像是管理和微调页面中的一个特殊项的位置

定位类型一共有五种static,relative，absolute，fixed,sticky

3.1 static

定义 static是position属性的默认值

特点如果省略position属性，浏览器就认为该元素是static定位，页面按照默认的文档流布局

使用注意点 这个时候top，right，bottom 和 left，z-index五个属性是无效的

3.2 relative

定义图

在static的基础上，有一个相对的基点（如下图蓝色的点） 3D5CX)}{5H9Z`VK{UD2D4.png

特点

不脱离文档流的布局，只改变自身的位置，在文档流原来的位置遗留空白区域（下面浅色的框框位置还是在的）
定位的起始位置是原先在文档流的位置（以浅色框框的左上角，相对进行了一定的偏移）
偏移量通过top，right，bottom 和 left设定

3.3 absolute

定义图 2AN8FVM3MLQJX3G~7HA9O.png 特点

脱离文档流的位置，遗留下来的空间由后面的元素填充
定位的起始位置为最近的父元素且postion不为static；否则为Body文档本身，然后通过通过top，right，bottom 和 left设定偏移位置，不设置起始位置走正常文档流

总结：父相子绝

3.4 fixed

定义图 fixed表示，相对于视口（浏览器窗口）进行偏移 GT$[UQ][}]YJ@1`DR(XPRSM.png

特点

定位基点是浏览器窗口
元素不随页面滚动而变化，好像固定在网页上一样
不设置偏移量走文档标准流

3.5 sticky

position属性sticky

总结

CSS的 position 属性用于指定一个元素在文档中的定位方式。一般要搭配top，right，bottom 和 left，z-index属性使用，才能决定了该元素的最终位置，如下段代码所示：

position: relative;
top: 40px; 
left: 40px;

其中relative，absolute，fixed属性值都是相对某个基点的定位

4 flex布局

在有一些情况下光靠float和position是无法实现的，比如：在父内容里面垂直居中一个块内容等等

这个时候就可以引入flex布局，如下图所示，container是flex父盒子，items是flex布局里面的子盒子

左边两列（紫色背景）为父元素属性，右边一列（橙色背景）为子元素属性

4.1 flex container父盒子属性

4.1.1 flex-direction

设置主轴的方向

.container { 
    flex-direction: 
    row | row-reverse | column | column-reverse; 
}

4.1.2 flex-wrap

默认的，flex的盒子都会想要排在一行上，可以通过这个属性来修改

.container { 
    flex-wrap: nowrap | wrap | wrap-reverse;
}

4.1.3 flex-flow

就是上面两个属性的集合，比如：

.container { 
    flex-flow: column wrap;
}

4.1.4 justify-content

这个属性决定了main axis主轴上如果有剩余的空间，该如何分配

.container { 
    justify-content: 
        flex-start | flex-end | center | space-between | space-around | space-evenly; }

4.1.5 align-items

这个属性定义了子盒子在cross axis交叉轴（垂直于主轴的方向）上如何对齐

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

4.1.6 align-content

和之前justify-content的属性相对应，这个属性决定了cross axis交叉轴（垂直于主轴的方向）上如果有剩余的空间，该如何分配，

但是只在有多根轴线的时候才起作用

This property only takes effect on multi-line flexible containers, where flex-wrap is set to either wrap or wrap-reverse

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

4.1.7 gap

注意：这个属性是控制盒子flex items之间的距离，而不是和外部的距离（从第二个gap：30px就可以看出来）

4.2 flex items子盒子属性

4.2.1 order

默认情况下盒子会按照顺序排列，但是也可以通过order来改变排列顺序

.item {
    order: 5;
    } /* default is 0 */

4.2.2 flex-grow

flexgrow定义items的放大比例，默认为0，即如果存在剩余空间，也不放大

4.2.3 flex-shrink

flexgrow定义items的缩小比例，默认为1

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

4.2.4 flex-basis

子容器在不伸缩情况下的原始尺寸，主轴为横向时，代表宽度，主轴为纵向时，代表高度。

4.2.5 flex

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

4.2.6 align-self

允许items中的单个item有与其他item不一样的对齐方式，可覆盖align-items属性

.item { 
    align-self: 
        auto | flex-start | flex-end | center | baseline | stretch; 
       }

5 grid布局

是一个用于 web 的二维布局系统。利用网格，你可以把内容按照行与列的格式进行排版

（由于自己还没有用到过，所以贴个别人的帖子）grid布局

6 双飞翼布局

双飞翼布局以及圣杯布局

7 圣杯布局

参考文章：

Flex 布局教程：语法篇

A Complete Guide to Flexbox

字节前端初阶训练营|理解CSS

【CSS】常见布局 | 青训营笔记