css flex 图片不拉伸_CSS的flex布局看完这篇你就懂了

我们之前已经学过一些布局模型，比如说浮动，绝对定位等等，但是这些布局方式一是不够简洁，而是使用的范围确实是太窄了。

flex模型拥有比较多的属性，来设置多样的布局方式，接下来我们就详细介绍各种属性对布局的改变，最后再对属性做一个汇总

先看一下flex的基本模型，如下图所示：

container父容器里有三个子元素flex-item。当给父容器设置display:flex;直接子元素就有布局模型了，上图中还有主轴和纵轴分别是布局的一个方向，后面的属性会详细说到。

接下来就先从flex-container属性开始介绍

1.flex-container

1.1 flex-direction(主轴方向)

flex-direction:row;  (布局为一行，从start开始排)

flex-direction:row-reverse;  (布局为一行，从end开始排)

flex-direction:column;   (布局为一列，从start开始排)

flex-direction:column-reverse;  (布局为一列，从end开始排)

1.2  flex-wrap(一条轴线排不下如何换行)

flex-wrap：