彻底理解flex布局及其一些属性

前言
在传统的布局中，如果我们想要进行行列的操作布局，往往会用到浮动，而浮动又会引发一些新的问题，比如高度宽度不好掌控，以及高度坍塌的问题等等。于是就有了flex布局，这对所以前端人员来说就是一大福音。

什么是flex布局

Flex是Flexible Box的缩写，意为”弹性布局”，她可以为传统的盒子布局提供最大的灵活性，并且任何东西都可以设置，行内元素也可以，只需要设置display:flex或者inline-flex；

注意：felx布局对浏览器具有兼容性的问题

可以看到最主要的问题还是处在 IE浏览器 身上，从 IE10 起，IE浏览 器也开始兼容flex布局，至于其他浏览器，一般没什么大问题，可以放心使用。

开始正题
首先认识flex容器，也就是flex-container，容器内的元素称为flex-items 看图简单画一下

也就是任何一个容器（盒子），我们都可以开启flex布局，那么我们要如何开启flex布局呢？只需要一行代码，那就是在flex-container 上添加display:flex 或者display: inline-flex;

容器默认有两条轴线，一条为水平方向的主轴（main axis）和垂直方向的交叉轴（cross axis），主轴默认从左到右，主轴开始的地方叫做 main start，结束的地方叫做 mian end，交叉轴默认从上到下，开始的地方叫cross start，结束位置叫做cross end。下面的属性也是围绕这些特性来展开。

flex布局中有一些重要的属性首先我们先了解flex-container上的属性
flex-direction: value;
value的值有：row，row-reverse，column，column-reverse四种

当设置 flex-direction:row ;时

当设置flex-direction: row-reverse;时

当设置 flex-direction: column;时，因为没有设置高度，默认就是文字内容高度。

当设置 flex-direction: column-reverse;时

flex-warp觉得flex盒子的内容是否换行？默认不换行
1.当设置flex-wrap：nowarp的时候

会自动缩小盒子宽度使其字啊一行显示，缩小最小范围为文字内容宽度
2.当设置** flex-wrap: wrap;就是换行**

justify-content为主轴上的对齐方式使用方法和值有justify-content: flex-start | flex-end | center | space-between | space-around|space-evenly;






align-items属性
定义项目在交叉轴上如何对齐。
这里有一点需要注意，如果flex-items没有定义高度，在垂直方向上默认会拉伸和父盒子一样的高度。
也就是align-items：stretch、normal：
代码已经把高度注释

效果如下：

**align-items：flex-start；**交叉轴的起点对齐。

**align-items：flex-end；**交叉轴的终点对齐。

align-items：center；交叉轴的中点对齐。

**align-items：baseline；**项目的第一行文字的基线对齐。
如果不知道基线是什么的自行百度哈

align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
他的作用和上面的justify-content作用差不多，不多这个属性是作用在交叉轴上的；
属性有： align-content: flex-start | flex-end | center | space-between | space-around | stretch;
下面演示一下几个属性（不完全演示）：
align-content: center

align-content: space-between

align-content:space-around

到这里flex-container上面的属性就讲完了，下面演示flex-items上的属性
1. order属性
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

效果图：

2 flex-grow属性
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
按照下图讲解，作用就是把剩余空间（剩余空间÷5）就是每一份的，item1的flex-grow:1,也就是在原来的宽度上加多一份，其他同理

于是有这样的效果：

3. align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch（一句话说，就是搞特殊的，这个属性）

剩下还有别的属性，用的特别少，我就不讲解了。。。

就写到这里吧，希望能给你帮助
我也是小白，大家一起努力学前端