深入浅出CSS的Flex布局

Flexbox，弹性盒子布局，跟浮动布局相比，Flexbox的可预测性更好，还能提供更精细的控制。它也能轻松解决困扰我们许久的垂直居中和等高列问题。

Flexbox的原则

首先需要使用display属性，把元素设置为弹性容器，它的子元素就是弹性子元素。

弹性子元素默认是在同一行按照从左到友的顺序并排排列。如下图：

flexbox默认水平方向为主轴，垂直方向为副轴。

需要兼容其他浏览器，则需要添加对应浏览器的前缀：

display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;

Flexbox允许使用​​margin: auto;​​来控制弹性子元素的之间的可用空间。

也可以使用​​margin-left: auto;​​讲最后一个子元素移动到最右边【在最后一个子元素设置margin-left:auto】

通过相邻兄弟选择器设置元素之间的外边距，实现导航菜单：最有一个菜单移动到最右边，其余菜单设置一定的margin-left，

div + div {
    margin-left: 10px;
  }

弹性子元素的大小

flex属性设置子元素的大小【在主轴方向上的大小】

flex属性是flex-grow、flex-shrink、flex-basis的简写

flex-basis

定义子元素大小的基准值，就是定义一个初始值，可以给该元素设置任何的width值，包括px、em、%。

flex-grow

子元素根据flex-basis的值计算出来后，不一定占满这个弹性容器，那么多出来的留白，则通过flex-grow属性来进行分配。如果flex-grow为0，那么该元素的宽度不会超过flex-basis的值。例如：

    <h2>弹性子元素的大小</h2>
    <div className="flexbox-flex">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>

.flexbox-flex {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  border: 1px solid blue;
 
  div {
    background-color: red;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    line-height: 100px;
    border-radius: 5px;
  }
  div +  div{
    margin-left: 10px;
  }
  div:nth-child(1) {
    flex: 0 1 20%;
  }
  div:nth-child(2) {
    flex: 0 1 20%;
  }
  div:nth-child(3) {
    flex: 0 1 40%;
  }
}

如果留白部分由三个子元素平均分配，则三个元素分别设置为

div:nth-child(1) {
    flex: 0 1 20%;
  }
  div:nth-child(2) {
    flex: 0 1 20%;
  }
  div:nth-child(3) {
    flex: 0 1 40%;
  }

flex-grow的值越大，那么它占据留白部分的比例越大。

flex-shrink

计算出子元素的初始尺寸后，它们累加起来可能会超过整个容器，那么导致溢出。
flex-shrink的作用就是控制子元素收缩不溢出

flex-shrink为0，则子元素不收缩。

弹性方向

弹性方向，其实就是切换主轴和副轴，用弹性容器的flex-direction属性来控制

flex-direction的默认值是row，row-reverse反方向排列，

column，主轴为垂直方向；

column-reverse，垂直方向底部往上排列。

.flexbox-direction {
  display: flex;
  flex-direction: column;
  border: 1px solid blue;
  div {
    width: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    background-color: aqua;
    margin-top: 10px;
  }
  div:nth-child(1) {
    flex: 0 0 20%;
  }
  div:nth-child(2) {
    flex: 0 0 20%;
  }
  div:nth-child(3) {
    flex: 0 1 30px;
  }
}

对齐、间距

flex-wrap

设置弹性容器内是否换行展示，默认值：nowrap，不换行

wrap：换行
wrap-reverse：反向换行。

.flexbox-canter {
  display: flex;
  flex-wrap: wrap;
  div {
    width: 300px;
    line-height: 100px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    background-color: bisque;
    margin-bottom: 10px;
    margin-right: 10px;
  }
}

flex-flow

是flex-direction和flex-warp的简写

justify-content

控制子元素在主轴上的对齐方式

<h1>对齐间距</h1>
    <div className="flexbox-canter">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>

.flexbox-canter {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  border: 1px solid blueviolet;
  div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    background-color: bisque;
    margin-bottom: 10px;
    margin-right: 10px;
  }
}

2. flex-end，主轴末尾开始排列；



4. flex-start，主轴起始位置开始排列；



5. center，从中间开始排列；

5. space-between两端对齐；



7. space-around，第一个元素的前面和最后一个元素的后面加上相同的间距



9. space-evenly，子元素两端的间距相同

align-items

控制子元素在副轴上的对齐方式：

/* Basic keywords */
align-items: normal; // 默认值
align-items: stretch; // 弹性元素被在副轴方向被拉伸到与容器相同的高度或宽度。

/* Positional alignment */
align-items: center; // 副轴上居中
align-items: start; /* Pack items from the start */
align-items: end; /* Pack items from the end */
align-items: flex-start; /* Pack flex items from the start */
align-items: flex-end; /* Pack flex items from the end */
align-items: self-start;
align-items: self-end;

/* Baseline alignment */
align-items: baseline;
align-items: first baseline;
align-items: last baseline; /* Overflow alignment (for positional alignment only) */
align-items: safe center;
align-items: unsafe center;

/* Global values */
align-items: inherit;
align-items: initial;
align-items: unset;

以上这些就是常用的flexbox布局属性。