1. flex布局概述
盒子模型
浮动布局
弹性布局（或者叫弹性盒子布局），这是一种更先进的布局方式，可以让网页布局更简洁，更易于维护。
2.flex容器
.box{
display:flex;
}
此容器会变成一个flex容器（flex container），容器内部的元素被称为flex项目（flex item），
在这个容器内部浮动会失效，通过设置flex容器的css样式，可以改变内部项目的布局方式。
一个flex容器默认存在两个轴，横向的主轴（main轴）和纵向的交叉轴（cross轴）。
默认情况下flex项目按照main轴排列，通过设置，可以让项目按照cross轴排列，示例代码如下所示：
<divclass="container">
<divclass="box">1</div>
<divclass="box">2</div>
<divclass="box">3</div>
</div>
.container{
display:flex;
}
.box{
border:1px solid red;
}
默认情况下flex容器内部的元素是按照主轴排列的，并且块元素不会独立成行。
2.1 flex-direction
通过flex-direction属性，可以设置flex容器按主轴或是交叉轴排列。
flex-direction:row;默认值，项目按主轴排列，高度为容器高度。
flex-direction:column;项目按交叉轴排列，长度为容器长度。
.container{
display:flex;/* flex-direction: column; */
flex-direction:row;
border:1px solid #00f;
height:200px;
}
.box{
border:1pxsolidred;
}
flex项目按照主轴排列，此功能可以完全取代浮动布局，而且不必考虑浮动元素脱离文档流的种种弊端。
如果不考虑浏览器兼容问题，那么flex布局大部分情况都可以很好地替代浮动布局。
2.2 justify-content
justify-content属性可以控制flex项目在容器中的水平排列方式
.container{
display:flex;
border:1px solid #00f;
height:200px;/* flex项目按水平排列 */j
ustify-content:center;
}
justify-content:flex-start;flex项目在主轴开始位置展示
justify-content:flex-end;flex项目在主轴结束位置展示
justify-content:flex-center;flex项目在主轴居中展示
此前我们将一个元素居中显示，通常将设置元素设置为固定宽度，然后为其设置属性margin：0 auto;
对于宽度不固定的元素，我们只能使用一些奇淫技巧让其居中。
现在有了flex布局，我们可以很轻易的让一个或多个不定宽度的元素居中。
2.3 align-items
align-items属性可以控制flex项目在容器中的垂直排列方式，示例代码如下所示
.container{
display:flex;
border:1px solid #00f;
height:200px;
justify-content:center;
align-items:center;
}
.box{
border:1px solid #f00;
height:50px;
}
align-items:flex-start;flex项目在交叉轴开始位置展示
align-items:flex-end;flex项目在交叉轴结束位置展示
align-items:flex-center;flex项目在交叉轴居中展示
nter;}.box{border:1pxsolid#f00;height:50px;}.item1{flex:1;}.item2{flex:2;}.item3{flex:3;}
1. grid布局概述
1.1 grid布局与flex布局对比
grid布局可以为网页提供更强大的布局功能，它与flex布局的区别是。
flex布局为一维布局，一般一行或一列的布局使用flex布局。
grid布局为二维布局，同时需要兼顾行与列的布局，可以使用gird布局。
如果不考虑兼容问题，flex布局和grid布局可以很好地替代浮动布局。
1.2 grid布局基本概念
grid容器的水平区域成为行（row），垂直区域成为列（column），行与列之间的较差与是单元格（cell），划分网格的线成为网格线（gird line），了解了这些基本概念之后，就可以开始用相应的css属性设置grid容器中的项目了。
2. grid容器
2.1 设置grid容器
.container{
display:grid;
}
gird容器内部的元素称为grid容器的项目，grid项目的float属性会失效，通过grid容器的进一步设置，可以让内部的项目按要求排列。
2.2grid-template-columns属性与grid-template-rows属性
grid-template-columns可以设置gird容器中的项目有多少列，并指定列的宽度，实例代码如下所示
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
.container{
display:grid;
grid-template-columns:100px 100px 100px;
}
.item{
border:1px solid red;
}
通过上面的样式设置，可以将grid容器设置成为三列，并将每一列的宽度设置为100px。
除了设置制定尺寸的像素，还可以通过fr单位设置列宽度的比例。修改上面的grid容器样式如下所示
.container{
display:grid;
grid-template-columns:1fr 1fr 2fr;
}
可以看到整个gird容器的列被4等分，其中第一列和第二列占1份（1fr），第三列占2份（2fr）。
gird-template-rows属性可以设置gird容器中的项目有多少行，并指定行的宽度
.container{
display:grid;
grid-template-columns:100px 100px 100px;
grid-template-rows:100px 100px 100px;
}
通过上面的样式，可以将grid容器设置成为一个三行三列的布局，并且每一个单元格都为100px。
2.3grid-column-gap属性与grid-row-gap属性
grid-column-gap属性与grid-row-gap属性可以为grid容器的行与列之间设置间距：
.container{
display:grid;
grid-template-columns:100px 100px 100px;
grid-template-rows:100px 100px 100px;
grid-row-gap:20px;
grid-column-gap:30px;
}
可以将行（row）之间的间距设置为20像素，将列（column）之间的间距设置为30像素。
2.4justify-items属性与align-items属性
justify-items属性与align-items属性可以设置单元的水平位置和垂直位置
.container{
display:grid;
grid-template-columns:100px 100px 100px;
grid-template-rows:100px 100px 100px;
/* 在单元格内水平居中 */justify-items:center;
/* 在单元格内存执居中 */align-items:center;
}
默认的情况下，grid容器单元格内的块元素会适应单元的的宽度和高度，设置justify-items后，单元格内的元素会适应自身内容的宽度，设置align-items后，单元格内的元素会使用内容的高度。
将justify-items和align-items两个属性设置为center，可以将单元格内的内容垂直水平居中显示。
2.5justify-content属性与aling-content属性
通过justify-content属性与aling-content属性可以设置整个内容区域在容器里面的水平位置和垂直位置。
3.grid项目
justify-self属性可以设置单元格内容的水平位置。
align-self属性可以设置单元内容的垂直位置。
grid-column-start属性与grid-column-end属性
指定左右边框垂直网格线
grid-row-start属性与grid-row-end属性
指定上下边框水平网格线
