关于页面布局

1、文档流布局，也就是普通布局

2、浮动布局

3、定位布局，包括绝对定位、相对定位、固定定位等

4、居中布局，也就是水平居中、垂直居中等

5、flex弹性布局，display:flex

6、grid网格布局，display:grid

7、响应式布局、自适应布局、瀑布流布局等

 

一、关于grid: （详： https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout）

### 参考文档：

https://juejin.cn/post/7017074528752762911

https://juejin.cn/post/7031445725875699719

二、关于flex  (详： https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout)

### 参考文档：

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

https://zhuanlan.zhihu.com/p/25303493

 

###简易总结：

①Flex容器的属性：

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

fiex-direction:按照主轴的排列方向

    row:默认值，主轴为水平方向从左到右

    row-reverse:主轴为水平方向从右到左

    column:主轴为垂直方向从上到下

    column-reverse:主轴为垂直方向从下到上

flex-wrap:是否换行

    nowrap:不换行，会自动调整大小

    wrap:换行，超出后第一行在上面

    wrap-reverse:换行，超出后第一行在下面

justify-content:在主轴上的对齐方式，（以下以水平方向主轴为例）

    flex-start:默认值，左对齐

    flex-end:右对齐      

    center:居中

    space-between:两端对齐，项目之间间隔相等

    space-around:两端对齐，项目之间的间隔比项目与边框的间隔大一倍

align-items:在交叉轴上的对齐方式

    stretch:默认值，如果项目未设置高度或设为auto，将占满整个容器的高度

    flex-start： 交叉轴起点对齐

    flex-end：交叉轴终点对齐

    center：交叉轴中点对齐

    baseline：项目的第一行文字的基线对齐

 

② Flex项目的属性：

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

order:该属性定义了项目在容器中的排列顺序，数值越小，排列越靠前，默认值为0,可以为负值

flex-grow：该属性定义了项目的放大比例，默认为0，当为0时，如果存在剩余空间该项目也不放大

flex-shrink：该属性定义了项目的缩小比例，默认为1，如果剩余空间不足该项目将会缩小，当设置为0时不缩小

flex：该属性为flex-grow, flex-shrink 和 flex-basis的简写，建议优先使用这个属性而不是单独写三个属性

 

三、flex与grid的区别

①Grid网格布局和flexbox的主要区别：flexbox是一维布局（沿横向或者纵向），Grid是二维布局（同时沿着横向和纵向）

举例：当使用flexbox布局，设置了flex-wrap : nowrap;之后，换行后的元素并不会与上一行的元素对齐，当使用了nowrap之后，每个新行都变成了一个新的弹性容器，空间分布只在行内进行。

② 选择grid布局还是flexbox布局？

当需要判断选择哪种布局时，可参考以下三点：

换行需要与上一行元素对齐？选择Grid
需要同时按行和列控制布局？选择Grid
只需要按行或者列控制布局？选择flexbox