CSS 常见布局方式

发布时间：2017-09-03 编辑：sunshine小小倩 浏览：22883 评论：0

CSS 常见布局方式

本文思维导图，欢迎补充

本文首发于我的个人网站：cherryblog.site

前言

温馨提示：本文较长，图片较多，本来是想写一篇 CSS 布局方式的，但是奈何 CSS 布局方式种类太多并且实现方法太多，所以本文主要是介绍 flex 布局和 grid 布局，以及 CSS 常见的居中方式和两种经典的布局方式“圣杯布局”和“双飞翼布局”。想到哪写到哪，请各位见谅。

传统盒模型布局方式

我们的传统布局方式就是通过盒模型，使用 display 属性（文档流布局） + position 属性（定位布局） + float属性（浮动布局）。这个大家都比较熟悉，没有掌握的同学再去恶补一下基础

文档流布局

这是最基本的布局方式，就是按照文档的顺序一个一个显示出来，块元素独占一行，行内元素共享一行，这个相信大家都比较熟悉了，就不再赘述了

浮动布局

浮动方式布局就是使用 float 属性，使元素脱离文档流，浮动起来。这个大家也比较熟悉，就不再赘述了。

定位布局

我们也可以通过 position 属性来进行定位，这个大家也比较熟悉了，就不再赘述了。

flex 布局

 

 

什么是 flex 布局

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

flex 是一种新型的布局方式，使用该布局方式可以实现几乎所有你想要的效果。但是要注意其浏览器的兼容性，flex 只支持 ie 10+，所有还是要根据你的项目情况使用（没错，我们要求至少 ie 9



flex 的浏览器支持情况

使用 flex 布局

flex 的使用方法很简单，只需要将其 display 属性设置为 flex 就可以，也可以设置行内的 flex，记得 Webkit 内核的浏览器，必须加上 -webkit 前缀。注意，设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。

.ele{

display: -webkit-flex;

display: flex;

display: inline-flex;

display: -webkit-inline-flex;

}

在 flex 中，最核心的概念就是容器和轴，所有的属性都是围绕容器和轴设置的。其中，容器分为父容器和子容器。轴分为主轴和交叉轴（主轴默认为水平方向，方向向右，交叉轴为主轴顺时针旋转 90°）。

在使用 flex 的元素中，默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）
主轴开始的位置称为 main start，主轴结束的位置称为 main end。
同理，交叉轴开始的位置称为 cross start，交叉轴结束的位置称为 cross end。
在使用 flex 的子元素中，占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。



父容器属性

父容器上有六个属性

flex-direction：主轴的方向。

flex-wrap：超出父容器自容器的排列样式。

flex-flow：flex-direction 属性和 flex-wrap 属性的简写形式。

justify-content：子容器在主轴的排列方向。

align-items：子容器在交叉轴的排列方向。

align-content：多根轴线的对齐方式。

flex-direction 属性

flex-direction 属性决定主轴的方向（主轴的方向不一定是水平的，这个属性就是设置主轴的方向，主轴默认是水平方向，从左至右，如果主轴方向设置完毕，那么交叉轴就不需要设置，交叉轴永远是主轴顺时针旋转 90°）。