一个示例：子元素垂直排列

二个示例：子元素水平垂直居中

三个示例：子元素三个三列九宫格

<style>
    .father {
      display: flex; /* 默认子元素水平排列 */
      flex-direction: column; /* 垂直排列 */
    }

    .son {
      width: 100px;
      height: 100px;
      border: 1px solid red;
    }
  </style>
<body>
  <div class="father">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
  </div>
</body>

二个示例：子元素水平垂直居中

<style>
    .father {
      width: 300px;
      height: 300px;
      border: 1px solid red;
      display: flex; /* 父元素弹性布局 */
      justify-content: center; /* 水平居中 */
      align-items: center; /* 垂直居中 */
    }

    .son {
      width: 100px;
      height: 100px;
      background-color: blue;
    }
  </style>
<body>
  <h1>二个示例：子元素水平垂直居中</h1>
  <div class="father">
    <div class="son"></div>
  </div>
</body>

商品列表--3行3列

<style>
    * {
      margin: 0;padding: 0;
    }
    .wrap {
      width: 750px;
      height: 1000px;
      margin: 0 auto;
      border: 1px solid red;
    }

    .nav {
      display: flex;
      flex-wrap: wrap; /* 换行 */
    }

    .item {
      width: 33.33333%;
      height: 200px;
      border: 1px solid blue;
      box-sizing: border-box;
      background-color: white;
    }
  </style>
<body>
  <h1>商品列表--3行3列</h1>
  <div class="wrap">
    <div class="nav">
      <div class="item">手机</div>
      <div class="item">电脑</div>
      <div class="item">洗衣机</div>
      <div class="item">理财产品</div>
      <div class="item">亏钱宝</div>
      <div class="item">体彩</div>
      <div class="item">亏多宝</div>
      <div class="item">天天亏宝</div>
      <div class="item">彩票</div>
    </div>
  </div>
</body>

CSS3 弹性布局

一个示例：子元素垂直排列

二个示例：子元素水平垂直居中

三个示例：子元素三个三列九宫格

二个示例：子元素水平垂直居中

商品列表--3行3列

猜你喜欢