弹性布局 Flex

1. html 结构

<div id="container">
    <div class="item">
      <h3>Item 1</h3>
    </div>
    <div class="item">
      <h3>Item 2</h3>
    </div>
    <div class="item">
      <h3>Item 3</h3>
    </div>
    <div class="item">
      <h3>Item 3</h3>
    </div>
    <div class="item">
      <h3>Item 3</h3>
    </div>
    <div class="item">
      <h3>Item 3</h3>
    </div>
    <div class="item">
      <h3>Item 3</h3>
    </div>
    <div class="item">
      <h3>Item 3</h3>
    </div>
    <div class="item">
      <h3>Item 3</h3>
    </div>
    <div class="item">
      <h3>Item 3</h3>
    </div>
    <div class="item">
      <h3>Item 3</h3>
    </div>
  </div>

2. css样式

#container {
      display: flex;
      /* 横向排列 */
      /* flex-direction: row; */
      /* flex-wrap: wrap;  */
      /* 混合属性 */
      flex-flow: row wrap;
      /* 横向排列右对齐 */
      /* flex-direction: row-reverse;  */
      /* 纵向排列 */
      /* flex-direction: column; */
    }
    .item {
      background: #f4f4f4;
      border: #ccc solid 1px;
      padding: 1rem;
      text-align: center;
      margin: 0.75rem;
      /* 平均分配 */
      flex: 1;
    }
    .item:first-child {
      /* 对空间进行分配,定义项目的放大比例 */
      flex: 1;
    }

3. 重点

弹性布局的必要

display: flex

横向排列

flex-direction: row;

横向排列右对齐

flex-direction: row-reverse;

纵向排列

flex-direction: column;

自动换行

flex-wrap: wrap;

混合属性

flex-flow: row wrap;

对空间进行分配,定义项目的放大比例

flex: 1;

4. 什么是弹性布局

1. 弹性布局是一种布局方式

2. 脱离标准文档流 (标准文档流是从上到下)