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

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

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

一、Flex布局

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

它即可以应用于容器中，也可以应用于行内元素。(以上说明结合微信开发者工具说明)2009年，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　　定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

• flex-direction

 .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。

• order

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.关键字

1. auto-fill;如果容器大小不固定，项目大小固定，可以用auto-fill关键字

.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；