常用的布局方式之 Flex 布局

头像
饺子丶就酒
    阅读 11 分钟
    3

    常用的布局方式之 Flex 布局

    一、 Flex布局介绍

    人们已经慢慢放弃了低版本浏览器，所以 flex 布局是现在首选的布局方式。 flex 布局又称之为 弹性布局 ，任何一个标签都可以使用 flex 布局，

    行内元素也可以使用 flex 布局， 当时标签使用了 flex 布局以后，那么子元素的 float 、clear 等属性都将失效。

    .box{
  display: flex;
}

    使用了 display: flex 属性的标签，我们称之为 容器，它的所有子元素自动成为容器成员，我们称之为 项目 。

    容器 默认有两个轴，主轴(默认为水平)和侧轴(默认为侧轴)，项目 默认沿主轴排列。

    二、 容器的属性

    容器常用的属性有六个。

    flex-direction          // 控制主轴方向
justify-content         // 设置主轴方向对齐方式
align-items             // 控制侧轴方向对齐方式
align-content           // 当侧轴内容多行时，设置侧轴对齐方式
flex-wrap               // 控制项目是否允许换行
flex-flow               // 是flex-direction 和 flex-wrap 的简写

    如果没有特殊说明，以下代码演示模板一律如下。

    <nav class="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</nav>

<style>
.box{
  display: flex;
  width: 500px;
  height: 300px;
  border: 1px solid #ccc;
}
div{
  width: 50px;
  height: 50px;
  border: 1px solid red;
}
</style>

    2.1 flex-direction

    flex-direction 决定主轴的方向，也就是项目的排列方向。

    .box{
  flex-direction: row;
}

    clipboard.png

    .box{
  flex-direction: row-reverse;
}

    clipboard.png

    .box{
  flex-direction: column;
}

    clipboard.png

    .box{
  flex-direction: column-reverse;
}

    clipboard.png

    2.2 justify-content

    justify-content 用来控制项目在主轴的对齐方式。

    .box{
  justify-content: flex-start;
}

    clipboard.png

    .box{
  justify-content: flex-end;
}

    clipboard.png

    .box{
  justify-content: center;
}

    clipboard.png

    .box{
  justify-content: space-around;
}

    clipboard.png

    .box{
  justify-content: space-between;
}

    clipboard.png

    .box{
  justify-content: space-evenly;
}

    clipboard.png

    2.3 flex-wrap

    容器的 flex-wrap 属性用来控制项目是否允许换行。

      <nav class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
  </nav>
<style>
  .box{
    flex-wrap: nowrap;
  }
</style>

    clipboard.png

    .box{
  flex-wrap: wrap;
}

    clipboard.png

    .box{
  flex-wrap: wrap-reverse;
}

    clipboard.png

    2.4 align-items

    align-items属性用来控制项目在侧轴的对齐方式。

    .box{
  align-items: flex-start;
}

    clipboard.png

    .box{
  align-items: flex-end;
}

    clipboard.png

    .box{
  align-items: center;
}

    clipboard.png

    2.5 align-content

    当侧轴有多行时，可以使用 align-content 来设置侧轴的对齐方式。

      <nav class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
  </nav>
<style>
  .box{
    align-content: flex-start;
  }
</style>

    clipboard.png

    .box{
  align-items: flex-end;
}

    clipboard.png

    .box{
  align-items: center;
}

    clipboard.png

    .box{
  align-items: sapce-between;
}

    clipboard.png

    .box{
  align-items: sapce-around;
}

    clipboard.png

    2.6 flex-flow

    flex-flow 是flex-direction和flex-wrap的简写形式。

    .box{
  flex-flow: row nowrap;
}

    clipboard.png

    .box{
  flex-flow: row wrap;
}

    clipboard.png

    .box{
  flex-flow: column wrap;
}

    clipboard.png

    .box{
  flex-flow: column nowrap;
}

    clipboard.png

    三、 项目的属性

    项目的常用属性有三个。

    order          // 项目的排列顺序
align-self     // 项目在侧轴的对齐方式
flex           // flex-grow, flex-shrink 和 flex-basis的简写

    3.1 order

    order 属性是控制项目的排列顺序，默认值是 0，数值越小排列越靠前，可以有负数。

     <nav class="box">
   <div>1</div>
   <div>2</div>
   <div class="test">3</div>
 </nav>
 
 <style>
   .box{ 
      display: flex;
      width: 500px;
      height: 300px;
      border: 1px solid #ccc;
    }
    div{
      width: 50px;
      height: 50px;
      border: 1px solid red;
    }
    .test{
      order: -1;
    }
 </style>

    clipboard.png

    3.2 align-self

    align-self 是控制当前项目的侧轴的对齐方式，可以覆盖 align-items 属性。

    <nav class="box">
  <div>1</div>
  <div>2</div>
  <div class="test">3</div>
</nav>
<style>
    .box{ 
      display: flex;
      align-items: center;
      width: 500px;
      height: 300px;
      border: 1px solid #ccc;
    }
    div{
      width: 50px;
      height: 50px;
      border: 1px solid red;
    }
    .test{
      align-self: flex-end;
    }
</style>

    clipboard.png

    3.3 flex

    项目使用的属性 flex 其实是 flex-grow(放大), flex-shrink(缩小) 和 flex-basis的简写，默认值是 0 1 auto。
    我们通常设置的 flex：1， 其实等价于 flex-grow: 1，也就是占有剩余空间的宽度。

    <nav class="box">
  <div>1</div>
  <div>2</div>
  <div class="test">3</div>
</nav>
<style>
    .box{ 
      display: flex;
      width: 500px;
      height: 300px;
      border: 1px solid #ccc;
    }
    div{
      width: 50px;
      height: 50px;
      border: 1px solid red;
    }
    .test{
      flex: 1
    }
</style>

    clipboard.png

    有时候，我们也会设置 flex: 33.333%， 容器整个宽度就是100%，每个项目占33.333%，所以就是一行展示三个。

      <nav class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
  </nav>
<style>
   div{
      box-sizing: border-box;
    }
    .box{ 
      display: flex;
      flex-wrap: wrap;
      width: 500px;
      height: 300px;
      border: 1px solid #ccc;
    }
    div{
      width: 50px;
      height: 50px;
      border: 1px solid red;
      flex: 33.333%;
    }
</style>

    clipboard.png

    四、 利用 flex 制骰子布局

    4.1 一个点

    <nav class="box">
  <div></div>
</nav>

<style>
  .box{ 
      display: flex;
      justify-content: center;
      align-items: center;
      width: 300px;
      height: 300px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
  div{
      width: 50px;
      height: 50px;
      background: red;
      border-radius: 50%;
    }
</style>

    clipboard.png

    4.2 两个点

    <nav class="box">
  <div></div>
  <div class="test"></div>
</nav>

<style>
  .box{ 
      display: flex;
      justify-content: space-between;
      width: 300px;
      height: 300px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
  div{
      width: 50px;
      height: 50px;
      background: red;
      border-radius: 50%;
    }
   .test{
      align-self:flex-end;
   }
</style>

    clipboard.png

    4.3 三个点

    <nav class="box">
  <div></div>
  <div class="center"></div>
  <div class="test"></div>
</nav>

<style>
  .box{ 
      display: flex;
      justify-content: space-between;
      width: 300px;
      height: 300px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
  div{
      width: 50px;
      height: 50px;
      background: red;
      border-radius: 50%;
    }
  .center{
    align-self: center;
  }
   .test{
      align-self:flex-end;
   }
</style>

    clipboard.png

    4.4 四个点

    <nav class="box">
    <div class="row">
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <div class="row">
      <div class="item"></div>
      <div class="item"></div>
    </div>
</nav>

 <style>
    .box{ 
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 300px;
      height: 300px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    .item{
      width: 50px;
      height: 50px;
      background: red;
      border-radius: 50%;
    }
    .row{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
</style>

    clipboard.png

    4.5 五个点

     <nav class="box">
    <div class="row">
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <div class="row">
      <div class="item"></div>
    </div>
    <div class="row">
      <div class="item"></div>
      <div class="item"></div>
    </div>
</nav>

 <style>
    .box{ 
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 300px;
      height: 300px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    .item{
      width: 50px;
      height: 50px;
      background: red;
      border-radius: 50%;
    }
    .row{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    .row:nth-child(2){
      display: flex;
      justify-content: center;
    }
</style>

    clipboard.png

    4.6 六个点

     <nav class="box">
    <div class="row">
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <div class="row">
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <div class="row">
      <div class="item"></div>
      <div class="item"></div>
    </div>
</nav>

 <style>
    .box{ 
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 300px;
      height: 300px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    .item{
      width: 50px;
      height: 50px;
      background: red;
      border-radius: 50%;
    }
    .row{
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
    }
</style>

    clipboard.png

    本文参考了阮一峰大神的 http://www.ruanyifeng.com/blo... 。

    css
    饺子丶就酒
    6 声望1 粉丝

    引用和评论

    推荐阅读
    头像
    使用CSS给标题添加书名号并超出省略

    XboxYan赞 3阅读 2.6k

    头像
    CSS grid 布局如何添加分隔线?

    XboxYan赞 3阅读 2k

    头像
    Html&Css测试试题（简单版）

    云绮棠兮赞 2阅读 12k

    头像
    浏览器如何确定最终的CSS属性值？解析计算优先级与规则

    南玖赞 3阅读 3.1k评论 1

    头像
    原子化的未来？了解一下全面进化的CSS attr函数

    XboxYan赞 1阅读 503

    头像
    万能的渐变！CSS 渐变实现自适应进度条

    XboxYan赞 1阅读 698

    头像
    CSS专题之继承

    CodePencil赞 1阅读 723

    0 条评论
    得票最新