一只菜鸟对于弹性布局的总结

啥是弹性布局（问号脸）？以前盒子的布局都是使用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：将占满整个容器的高度。

好啦，我要说的就是这么多了，弹性布局真的是很好用的样式！！！?
如若对于此文章不满意还望谅解，一只菜鸟真诚的心！！！♥