持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

什么是flex布局

flex布局意为弹性布局（弹性盒子），全称为Flexible Box。这是 CSS3 中的一种新的布局模式，可以简便、完整、响应式地实现各种页面布局。并且如今开发网页可能显示在不同的屏幕上，这就要求我们做出不同的适配，如果使用我们的flex布局，那么就会在不同的屏幕上得到自适应。并且flex属性支持大部分浏览器，兼容性比较好。

flex布局的使用

属性列表

属性	描述
display	指定 HTML 元素的盒子类型， 设置为flex
flex-direction	指定弹性盒子中子元素的排列方式 ，可以设置为row 和 column 2种。
flex-wrap	设置当弹性盒子的子元素超出父容器时是否换行，常用wrap 和 nowrap
flex-flow	flex-direction 和 flex-wrap 两个属性的简写
justify-content	设置弹性盒子中元素在主轴方向上的对齐方式
align-items	设置弹性盒子中元素在侧轴方向上的对齐方式
align-content	修改 flex-wrap 属性的行为，类似 align-items，但不是设置子元素对齐，而是设置行对齐
order	设置弹性盒子中子元素的排列顺序
align-self	在弹性盒子的子元素上使用，用来覆盖容器的 align-items 属性
flex	设置弹性盒子中子元素如何分配空间
flex-grow	设置弹性盒子的扩展比率
flex-shrink	设置弹性盒子的收缩比率
flex-basis	设置弹性盒子伸缩基准值

基础使用

如果我们一个布局要放三个元素，并且平均分布，那么可以使用如下

        .v-flex{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		
	}

这是设置横向布局平均分布，同时justify-content 可以设置为space-between，效果如下

如果设置为center,效果如下

我们在开发中常用的就是这三种效果。 同样的如果是竖向排列，那么这些排列方式就变成竖向了，但是要注意，竖向需要有高度。

主轴侧轴区别

常用到的2个属性 justify-content 和 align-items 如果设置的方向是横向 那么justify-content 设置的就是横向的位置排列，即为主轴。 如果设置的方向是竖向，那么justify-content 设置的就是竖向的位置排列，即为主轴。 相对的 align-items 同样为此。

总结

常用的flex布局非常需要掌握，在以后的开发中必不可少，下一次总结通过flex实现一些常用布局。