CSS弹性布局&网格布局

一、Flexbox

弹性框布局模块，可更轻松设计灵活的响应式布局，而无需使用浮动或定位。

首先应给容器设置display 属性

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

.flex-container {
  display: flex;
}

其次，flex容器属性有：

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

1.flex-direction属性

指的是在某个方向上堆叠

属性值有

column	垂直堆叠（从上至下）	row	水平堆叠（从左至右）
column-reverse	垂直堆叠（从下至上）	row-reverse	水平堆叠（从右至左）

2.flex-wrap属性

指的是设置是否对flex项目换行

属性有

wrap	规定在必要的时候进行换行
nowrap	固定不换行，同时也是默认设置
wrap-reverse	在有必要换行时，将以相反的顺序换行

3.flex-flow属性

指的是flex-direction 和flex-wrap属性的简写属性

如：flex-flow: row wrap;

4.justify-content属性

用于水平对齐项目

属性值有

center	中心对齐
flex-start	容器开头对齐	flex-end	容器末端对齐
space-around	显示行前间后有空格	space-between	显示行间有空格

5.align-items属性

用于垂直对齐项目

属性值有

center	中心对齐
flex-start	容器顶部对齐	flex-end	容器底部对齐
stretch	拉伸flex项目以填充容器	baseline	使项目基线对齐

6.align-content属性

用于对齐弹性线

属性值有

space-between	使显示的弹性线之间有相等的间距	space-around	使弹性线在其前中后带有空格
stretch	拉伸弹性线以占据剩余位置	center	在容器的中央位置显示弹性线
flex-start	容器顶部显示	flex-end	容器底部对齐

因为justify-content和align-items分别是对水平、垂直方向上对齐，所以两者联系起来就可以实现完美居中。

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

二、css网格布局模块

CSS 网格布局模块提供了带有行和列的基于网格的布局系统，它使网页设计变得更加容易，而无需使用浮动和定位。

在网格项中，垂直线称为列，水平线称为行。每列每行之间的称作间隙

首先，跟弹性布局一样，先设置display属性

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

.grid-container {
  display: grid;  /*或者display: inline-grid;*/
}

1、改变间隙大小

要改变上述间隙大小，则要用到以下属性

grid-column-gap	设置列与列之间的间隙	grid-row-gap	设置行与行之间的间隙
grid-gap	前两者的间歇属性（column,row）/(50px)

2.网格行改变

• 列线(column lines)
• 行线(row lines)

实例

对于某个网格项目

若想实现

那么可以 

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

同样，若想实现

 则代码实现可以是

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}