flexbox布局

🎈flexbox布局

flexbox这个名词也是我今年突然看到的，当时就很好奇，flexbox通俗一点来讲就是：

采用flex布局的盒子模型

🪶flex布局

🦓1.flex-drection
flex-drectoin其实就是对齐的方向，一般分为垂直方向和水平方向，它有4个方向：

> row                             水平方向
> row-reverse                     水平反向
> colum                           垂直方向
> colum-reverse                   垂直方向

flex-drection属性决定了你弹性盒子里面子盒子的排列方向
🦗2.flex-wrap
flex-wrap属性决定盒子元素是否换行，常用的值有：

flex-wrap:wrap     换行
flex-wrap:nowrpa   不换行

👹3.justify-content
justify-content决定了弹性盒子里面在主轴上的对齐方式

flex-start      从弹性盒子的左侧头对齐
flex-end        从弹性盒子的右侧尾对齐
space-between   弹性盒子两端对齐
center          居中对齐
space-around    子元素左右两侧空格宽度相等

🐸4.align-item
align-item决定了纵轴的对齐方式

flex-start    在纵轴上从头部对齐
flex-end      在纵轴上从尾部对齐
center        在纵轴上居中对齐
stretch       在纵轴上子元素高度占满父元素高度（子元素设置了高度自适应）
baseline      项目的第一行文字的基线对齐

🐧5.flex
flex的值可以是整数或小数，具体是可以支持等比例的放大或缩小，具体和你给的flex的值有关，其实flex中的值包含了3个属性，不过实际开发中已经简写成了一个

flex-shrink          缩小比例
flex-grow            放大比例
flex-basis           计算子元素占用的主轴空间

👽6.结尾
flexbox布局在移动端真的可以说是用到最多的一个布局，学好flexbox,走遍移动端不怕，请大家多多支持，如果我讲的有不太理解的，可以看下官网！
flex布局