一只菜鸟对于弹性布局的总结
啥是弹性布局（问号脸）？以前盒子的布局都是使用position、float、display来布局的，其实超级烦的，最近发现了一个知识点，那就弹性布局，那就让我们来看看什么是弹性布局吧！
What's 弹性布局
弹性就是Flex，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 Flex 布局。
例如：.box{display:flex;}
.box{inline-display:flex;}注意，设为flex布局以后，子元素的float、clear和vertical-align属性将失效!!!
基本概念
采用flex布局的元素，称为flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为flex项目（flex item），简称"项目"。
容器有两个轴，一个水平主轴（main axis）一个垂直交叉轴（cross axis），起点终点都是容器的边界。
How to do
说实话其实我了解的也不多，我只能把我知道的写出来啦！
例如，先定义两个盒子：
.box{
width: 200px;
height: 200px;
background-color: rgb(135, 135, 248);
display: flex;
align-items: center;
justify-content: center;
}
.inner {
width: 100px;
height: 100px;
background: pink;
align-self: flex-end;
}<div class="box">
<div class="inner">
</div>
</div>效果图
大家可以看到两个盒子都在屏幕的中间，那是因为我们在蓝色盒子的样式中添加了display: flex;align-items: center;justify-content: center;让我一个个道来。
display:flex让这个盒子拥有了弹性布局的属性，而作为子元素的粉红盒子也被定义了，有其父必有其子嘛，(^▽^)；
justify-content
justify-content为主轴的对齐方式，center顾名思义就是居中咯，当然他还有其他属性啦
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items
align-items为垂直交叉轴对齐方式，拥有的属性如下：
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-self
大家还可以看到，我们的粉盒子并没有在它爸爸的中间，那是因为他也有自己的个性呀，那就是我们的align-self啦！
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
auto（默认值）: 继承父元素的属性。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
stretch：将占满整个容器的高度。
好啦，我要说的就是这么多了，弹性布局真的是很好用的样式！！！?
如若对于此文章不满意还望谅解，一只菜鸟真诚的心！！！♥