flex弹性盒子的使用

如何使用弹性盒子

在CSS中使用display:flex;，即可使元素转为弹性盒子，子元素同时转为弹性元素，会根据父元素设定的弹性属性自动排列位置。

代码实例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex实例</title>
    <style>
      .container {
        width: 300px;
        display: flex;
      }
      .container > .item {
        width: 60px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>
</html>

运行效果：
flex实例

`flex`属性

调整整体子元素的属性

justify-content:控制所有项目在主轴上的对齐方式
属性值：

justify-content: flex-start; /*起点对齐*/
justify-content: flex-end;/*结束对齐*/
justify-content: center;        /*居中对齐*/
justify-content: space-between;  /*两端对齐，中间剩余空间平均分配*/
justify-content: space-around; /*分散对齐,项目两侧全部平均分配*/
justify-content: space-evenly; /*分散对齐，剩余空间平均分配*/

align-content：多行容器项目排列方式

注意，使用多行容器前必须设置flex-wrap:wrap，意思是将弹性盒子设置为多行。

align-content: stretch;/*默认，以元素自身宽度或高度以主轴顺序对齐，根据元素数量自动填满交叉轴空间*/
align-content: flex-start;/*以主轴方向的起始位顺序对齐，忽略原元素交叉轴方向大小值，只取项目内容值的大小来显示项目*/
align-content: flex-end;/*以主轴方向的结尾处开始前前对齐，忽略原元素交叉轴方向大小值*/
align-content: center;/*以主轴方向排列，并以交叉轴方向居中对齐,忽略原元素交叉轴方向大小值*/
/* 2. 容器剩余空间在所有项目“之间”的如何分配 ，将项目视为一个个独立的个体*/
align-content: space-between;/*两端对齐，中间剩余空间平均分配*/      
align-content: space-around;/*分散对齐,项目两侧全部平均分配*/
align-content: space-evenly;/*分散对齐，剩余空间平均分配*/

align-items：交叉轴项目排列方式


     /* 项目在交叉轴上默认是自动伸缩的 */
     align-items: stretch;
     /* 项目在交叉轴起始位对齐排列 */
     align-items: flex-start;
     /* 项目在交叉轴结尾处对齐排列 */
      align-items: flex-end;
      /* 项目在交叉轴上居中 */
     align-items: center;

order：控制项目顺序


   .container > .item:first-of-type {
     /* order: 将第一个项目移动到第三个项目的位置上 */
     order: 3;
   }

弹性盒子应用实例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>利用flex制作导航</title>
    <style>
      /* 初始化 */
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      a {
        text-decoration: none;
        color: #ccc;
      }
      nav {
        height: 40px;
        background-color: #333;
        padding: 0 50px;
        /* 转为弹性盒布局 */
        display: flex;
      }
      nav a {
        height: inherit;
        line-height: 40px;
        padding: 0 15px;
      }
      nav a:hover {
        background-color: seagreen;
        color: white;
      }
      /* 登录/注册放在最右边 */
      nav a:last-of-type {
        margin-left: auto;
      }
    </style>
  </head>
  <body>
    <header>
      <nav>
        <a href="">首页</a>
        <a href="">教学视频</a>
        <a href="">社区问答</a>
        <a href="">资源下载</a>
        <a href="">登录/注册</a>
      </nav>
    </header>
  </body>
</html>