弹性盒模型

一、属性介绍

1.1、justify-content

flex-start：默认值，伸缩项目向一行的起始位置靠齐；
flex-end：伸缩项目向一行的结束位置靠齐；
center：项伸缩项目向一行的中间位置靠齐；
space-between：伸缩项目会平均地分布在行里。第一个伸缩项目一行中的最开始位置，最后一个伸缩项目在一行中最终点位置；
space-around：伸缩项目会平均地分布在行里，两端保留一半的空间；
initial：设置该属性为它的默认值；
inherit：从父元素继承该属性。

1.2、align-items

stretch：默认值，项目被拉伸以适应容器；
center：项目位于容器的中心；
flex-start：项目位于容器的开头；
flex-end：项目位于容器的结尾；
baseline：项目位于容器的基线上；
initial：设置该属性为它的默认值；
inherit：从父元素继承该属性。

1.3、flex-direction

CSS flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。

/* The direction text is laid out in a line */
flex-direction: row;

/_ Like <row>, but reversed _/
flex-direction: row-reverse;

/_ The direction in which lines of text are stacked _/
flex-direction: column;

/_ Like <column>, but reversed _/
flex-direction: column-reverse;

/_ Global values _/
flex-direction: inherit;
flex-direction: initial;
flex-direction: unset;

请注意，值 row 和 row-reverse 受 flex 容器的方向性的影响。如果它的 dir 属性是 ltr，row 表示从左到右定向的水平轴，而 row-reverse 表示从右到左; 如果 dir 属性是 rtl，row 表示从右到左定向的轴，而 row-reverse 表示从左到右。

1.4、flex-wrap

flex-wrap 指定 flex 元素单行显示还是多行显示。如果允许换行，这个属性允许你控制行的堆叠方向。

flex-wrap: nowrap; /* Default value */
flex-wrap: wrap;
flex-wrap: wrap-reverse;

/_ Global values _/
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: revert;
flex-wrap: unset;

1.5、flex

Value: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] Initial: 0 1 auto Applies to: flex items

二、实现水平垂直居中效果

对父元素添加下面的样式即可。

.container {
  // 创建flex容器
  display: flex;
  // 竖直垂直居中
  align-items: center;
  // 水平居中
  justify-content: center;
}

三、实现竖向九宫格

要求：使用flexbox布局将9个格子排列成3*3的九宫格，且第一列排完才排第二列。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Flexbox竖向九宫格</title>
    <style>
      html {
        font-family: sans-serif;
      }
      body {
        margin: 0;
      }
      .boxs-wrapper {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        height: 320px;
        width: 320px;
        margin: 0 auto;
      }
      .box {
        background: aqua;
        height: 100px;
        width: 100px;
        text-align: center;
        line-height: 100px;
        margin: 0 10px 10px 0;
      }
      .box:nth-of-type(3n) {
        margin-bottom: 0;
      }
      .box:nth-of-type(n+7) {
        margin-right: 0;
      }
    </style>
  </head>
  <body>
    <section class="boxs-wrapper">
      <article class="box">1</article>
      <article class="box">2</article>
      <article class="box">3</article>
      <article class="box">4</article>
      <article class="box">5</article>
      <article class="box">6</article>
      <article class="box">7</article>
      <article class="box">8</article>
      <article class="box">9</article>
    </section>
  </body>
</html>

弹性盒模型 ​

一、属性介绍 ​

1.1、justify-content ​

1.2、align-items ​

1.3、flex-direction ​

1.4、flex-wrap ​

1.5、flex ​

二、实现水平垂直居中效果 ​

三、实现竖向九宫格 ​

参考资料 ​