Flex布局详解（一）

Flex布局的特点：
1、块级布局侧重垂直方向、行内布局侧重水平方向，flex布局是与方向无关的。
2、flex布局可以实现空间自动分配，自动对齐（flexible：弹性、灵活）
3、flex适用于简单的线性布局，更复杂的布局要交给grid布局

图解重点理解1和2里面都是叫flex item，包裹1和2边框叫flex container。其次要注意是主轴方向不一定是横的，也可以是竖的，侧轴也是一样。

1、flex container的属性：

（1）、flex-direction常用得属性值有row、row-reverse、column、column-reverse,默认情况下属性值是row。
HTML

<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>

CSS

.parent{
  background:#ddd;
  display:flex;
  flex-direction:row;    //更改属性值得下面四个效果图
}
.child{
  width:50px;
  height:50px;
  background:white;
  margin:10px;
}

  <div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
    <div class="child">7</div>
  </div>

CSS

.parent{
  background:#ddd;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;   //更改属性值可以得下面三图效果
}
.child{
  width:50px;
  height:50px;
  background:white;
  margin:10px;
}

（3）、flex-flow其实是flex-direction和flex-wrap两个缩写，其中属性值可以搭配使用。
CSS

.parent{
  background:#ddd;
  display:flex;
  flex-flow:column wrap;
  height:300px;  //这个细节要注意，不给父元素高度，会导致不会换行，因为高度一直往下延伸
}
.child{
  width:50px;
  height:50px;
  background:white;
  margin:10px;
}

.parent{
  background:#ddd;
  display:flex;
  flex-direction:row;
  justify-content:center;  //更改属性得下面5图
}
.child{
  width:50px;
  height:50px;
  background:white;
  margin:10px;
}

 <div class="parent">
    <div class="child">
      1 <br>
      1 <br>
      1 <br>
      1 <br>
      1 <br>
    </div>
    <div class="child">
      2 <br>
      2 <br>
      2 <br>
    </div>
    <div class="child">3</div>
  </div>

CSS

.parent{
  background:#ddd;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  justify-content:space-around;
  align-items:flex-end;   //属性值改变时如下图变化所示
}
.child{
 width:50px;
 background:white;
}

.parent{
  background:#ddd;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  height:230px;
  align-content:center;   //更改属性值如下图所示变化
}
.child{
  width:50px;
  height:90px;
  background:white;
  margin:1px;
}