flex弹性布局

概念：flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。当设置容器为弹性容器时，它会默认该容器中存在两个轴：x轴和y轴，或者称为水平轴和垂直轴。当设置容器为flex属性时，如下图所示(align-item:center;justify-content:center;)，默认状态下，主轴方向(x)和侧轴(y)方向如图所示，当然我们也要指定子元素的宽高和margin值。

1、优点：可以控制子元素的排列方式，相对浮动来说，它更简单方便，不需要单独考虑是左浮动还是右浮动，以及浮动后对下面的元素的影响。
2、缺点：它属于一维布局，不能很好的针对页面进行布局，譬如：在做筛子页面时，你需要设置多个容器为flex，使代码增加繁琐。这便是它相对grid布局短板。
3、flex在使用时的注意点

1. flex作用在父容器上
   比如我们想要将某一容器设置为弹性容器时，我们一般需要这样设置display:flex;我们可以通过此属性来控制子元素的排列方式和对齐方式。常用的属性有：flex-direction(控制主轴的方向)、justify-content、align-items、align-content、flex-wrap(控制子元素是否换行)。

<style>
    *{ margin: 0;padding: 0}
    .parent{ display: flex;width: 300px;height: 300px;border: 1px solid black;}
     .parent div{ background: red;height: 30px;width: 50px;border: 1px solid black;}
</style>
<div class="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

					控制子元素的排列方式和对齐方式

<style>
    *{ margin: 0;padding: 0}
    .parent{ display: flex;width: 300px;height: 300px;border: 1px solid black;
        /* 子元素沿主轴方向对齐方式 */
        justify-content: center;
        /* 子元素沿侧轴方向的对齐方式(单行) */
        /* align-items: center; */
         /* 子元素沿侧轴方向的对齐方式(两行及以上) */
         /* align-content: center; */
    }
    .parent div{ background: red;height: 30px;width: 50px;border: 1px solid black;}
</style>
<div class="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

2. 作用在子元素上的属性
   它的属性值有order(排序)、flex-grow、flex-shrink、flex-basis、align-self.其中flex是flex-grow、flex-shrink、flex-basis的符合写法，有顺序的，后面两个属性值可以省略。当flex:1时，即与flex : 1 1 0 是相同的；当flex:0时，即与flex : 0 1 0是相同的。align-self属性是设置当前元素在侧轴方向上的排列方式。
   注：子元素的属性应设置在子元素身上，设置在父元素上不起作用。