如何使用弹性布局？如何做到自适应?

多种布局介绍

1、简单介绍如何使用弹性布局

1、父元素必须的属性：display:flex;；
这里，我一般都会写一个弹性样式的class，如下：

/*默认横向显示的*/
.flex-row{
	display:flex
}
/**写一个纵向显示的*/
.flex-column{
	display:flex;
	flex-direction:column;
}

这样，父级元素的弹性盒子我们就写好了。
2、如果我们想换行怎么办？默认是不换行的哦；只需要再父级元素上加上下面的这个样式即可。

flex-wrap:wrap;

注意：以下3和4是针对.flex-row的水平和垂直方向。如果是.flex-column就是相反的
3、水平的样式：

    justify-content: space-between;

以下说明是我自己的话说的，凭个人理解的。

1. space-between 两端对齐
2. space-around 元素两侧的距离相等
3. space-evenly 平均分配
4. flex-end 子元素显示在父元素的结尾处
5. flex-start 子元素显示在父元素的起始处
   4、垂直方向

    align-items: center;/*我平时用的比较多*/

感兴趣的博友自己去官网了解一下。

2、自适应如何去做？

方案一：

flex:1;/*常用的*/

方案二：

在这里插入代码片