浅谈display属性flex弹性布局、gird网格布局

这个属性用于定义建立布局时元素生成的显示框类型。对于HTML等文档类型，如果使用display不谨慎会很危险，因为可能违反HTML中已经定义的显示层次结构。对于XML，由于XML没有内置的这种层次结构，所有display是绝对必要的。

一、Flex布局

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

它即可以应用于容器中，也可以应用于行内元素。(以上说明结合微信开发者工具说明)，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。

主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

以下6个属性设置在容器上：

flex-direction容器内项目的排列方向(默认横向排列)flex-wrap容器内项目换行方式flex-flow以上两个属性的简写方式justify-content项目在主轴上的对齐方式align-items项目在交叉轴上如何对齐align-content定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

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

属性可选值的范围为row(默认)沿水平主轴由左向右排列、row-reverse沿水平主轴由右向左排列、column沿垂直主轴右上到下和column-reverse。

flex-wrap

.box{2 flex-wrap: nowrap | wrap | wrap-reverse; 3 }

属性可选值的范围为nowrap(默认)不换行、wrap换行（第一行在上方）和wrap-reverse。

flex-flow

.box {2 flex-flow: <flex-direction> || <flex-wrap>; 3 }

写法属性中，将上述两种方法的值用||连接即可。

justify-content

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

项目在主轴上的对齐方式(主轴究竟是哪个轴要看属性flex-direction的设置了)

flex-start：在主轴上由左或者上开始排列

flex-end：在主轴上由右或者下开始排列

center：在主轴上居中排列

space-between：在主轴上左右两端或者上下两端开始排列

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items

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

这里面直接上图片说明的更清楚一些。

align-content

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

以上介绍完了容器中的属性，下面说一下容器中项目的属性：

order项目的排列顺序。数值越小，排列越靠前，默认为0。flex-grow项目的放大比例，默认为0，即如果存在剩余空间，也不放大。flex-shrink项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。flex-basis在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。flex是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。align-self允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

1.item {2 order: <integer>;3}

flex-grow

1.item {2 flex-grow: <number>; /* default 0 */3}

flex-shrink

1.item {2 flex-shrink: <number>; /* default 1 */3}

flex-basis

1.item {2 flex-basis: <length> | auto; /* default auto */3}

flex

1.item {2 flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]3}

align-self

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

容器属性和项目属性是可以配合使用的，用法类似于CSS的行内式和嵌入式的道理一样。希望你可以在实际应用中熟练使用。

二、grid布局

grid网格布局，就是将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局

基本概念

1.容器和项目

采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。

<div class="content"><div class="b">1<p>1</p></div><div class="b">2</div><div class="b">3</div><div class="b">4</div><div class="b">5</div><div class="b">6</div><div class="b">7</div><div class="b">8</div><div class="b">9</div></div>

上面代码中，最外层的<div>元素就是容器，内层的九个<div>元素就是项目。

注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的<p>元素就不是项目。Grid 布局只对项目生效。

2.行和列

容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。

上图中，水平的深色区域就是"行"，垂直的深色区域就是"列"。

3.单元格

行和列的交叉区域，称为"单元格"（cell）。

正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。

4.网格线

划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。

正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。

上图是一个4 x 4的网格，共有5根水平网格线和5根垂直网格线。

容器属性

Grid 布局的属性分成两类。一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。

这部分先介绍容器属性。

1.display

div {display: grid;}

display: grid指定一个容器采用网格布局。

上图是display: grid的效果。

默认情况下，容器元素都是块级元素，但也可以设成行内元素。

div {display: inline-grid;}

上面代码指定div是一个行内元素，该元素内部采用网格布局。

上图是display: inline-grid的效果。

注意，设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

2.grid-template-columns 与grid-template-rows

容器指定了网格布局以后，接着就要划分行和列。grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。

.container {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;}

上面代码指定了一个三行三列的网格，列宽和行高都是100px。

解释：

grid-template-columns：定义每一列的列宽；

grid-template-columns：100px 100px 100px; //总共三列，每列列宽是100px；

grid-template-rows：定义每一行的行高；

grid-template-rows：100px 100px 100px; //从上至下，每行高度为100px；

除了使用像素，还可以使用百分比；

.container {display: grid;grid-template-columns: 33.33% 33.33% 33.33%;grid-template-rows: 33.33% 33.33% 33.33%;}

拓展：

重复写值很麻烦，可以用repeate函数；

repeat(次数，大小)；

例如：

repeat(3,100px); //重复3次，每次100px；

repeat写法：

grid-template-columns：repeat(3,100px);grid-template-rows：repeat(3,100px);

也可以重复某一种不固定大小模式；

例如：

grid-template-columns：100px 80px 100px;

改写成：

grid-template-columns：repeat(2,100px 80px); //代表重复2次100px 80px的模式；也就是4列；

等同于：

grid-template-columns：100px 80px 100px 80px;

如图：

3.关键字

.content {box-shadow: 0 0 1px #f6f;display: grid;grid-template-columns: repeat(auto-fill, 100px);}

2.fr(fraction):如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。

.content {box-shadow: 0 0 1px #f6f;display: grid;grid-template-columns: 400px 1fr 2fr;}

3.minmax();

.content {box-shadow: 0 0 1px #f6f;display: grid;grid-template-columns: 1fr 5fr minmax(100px, 1fr);}

grid-template-columns: 1fr 5fr minmax(100px, 1fr);

解释：第一列是1fr，第二列是5fr，第三列最小值是100px,最大是1fr。当第二列fr无限大时和第三列到100px时，会往第一列借值；

4.auto:自适应；

.content {box-shadow: 0 0 1px #f6f;display: grid;grid-template-columns: 100px auto 100px;}

4.网格线名称

.content {box-shadow: 0 0 1px #f6f;display: grid;grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];}

解释：指定每一根网格线的名字，方便以后的引用。

也可以有多个名字；[c1,c1a]

5.间距

row-gap:行间距；

.content {box-shadow: 0 0 1px #f6f;display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;row-gap: 20px;}

.content {box-shadow: 0 0 1px #f6f;display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;column-gap: 20px;}

简写：

gap:20px 20px;row-gap和column-gap简写形式；gap省略了第二个值，浏览器认为第二个值等于第一个值

6.区域

grid-template-areas：网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。

.content {box-shadow: 0 0 1px #f6f;display: grid;grid-template-areas: 'a b c' 'd e f' 'g h i';}

7.放置顺序

grid-auto-flow：划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行；

默认是row；

.content {box-shadow: 0 0 1px #f6f;display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;grid-template-areas: 'a b c' 'd e f' 'g h i';grid-auto-flow: column;}

8.单元格水平位置和垂直位置

justify-items：属性设置单元格内容的水平位置（左中右）；

align-items：属性设置单元格内容的垂直位置（上中下）；

start：对齐单元格的起始边缘。end：对齐单元格的结束边缘。center：单元格内部居中。stretch：拉伸，占满单元格的整个宽度（默认值）。

简写：place-items；

place-items: align-items justify-items

9.整体内容的位置

justify-content：整个内容区域在容器里面的水平位置（左中右）；

align-content：整个内容区域的垂直位置（上中下）。

.content {box-shadow: 0 0 1px #f6f;display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;justify-content: center;align-content: center;}

简写：place-content；

place-content：align-content justify-content；