1.定位三列布局与导航

如下图导航与三列布局图例：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>导航和三列布局</title>
  <style>
    /* 初始化 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    a {
      text-decoration: none;
      color: #666;
    }
    nav {
      height: 40px;
      background-color: lightsteelblue;
      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;
    }
    /* 页眉与页脚 */
    .header,
    .footer {
      height: 40px;
      background-color: lightsteelblue;
    }
    .content {
      width: 960px;
      margin: auto;
      /* background-color: #ccc; */
    }
    .content ul li {
      float: left;
      line-height: 40px;
      padding: 0 15px;
    }
    .content ul li:hover {
      background-color: limegreen;
    }
    /* 页脚 */
    .content p {
      text-align: center;
      line-height: 40px;
    }
    /* 主体用定位来做 */
    .container {
      width: 1600px;
      margin: 10px auto;
      /* background-color: seashell; */
      min-height: 800px;
      /* 防止浮动元素塌陷 */
      overflow: hidden;
    }
    .container > .left {
      width: 300px;
      background-color: navajowhite;
      min-height: 950px;
      float: left;
    }
    .container > .right {
      width: 300px;
      background-color: navajowhite;
      min-height: 950px;
      float: right;
    }
    .container > .main {
      background-color: plum;
      min-height: 950px;
      width: 980px;
      float: left;
      margin-left: 10px;
    }
  </style>
</head>
<body>
  <header>
    <nav>
      <div class="content">
        <a href="">首页</a>
        <a href="">公司产品</a>
        <a href="">行业新闻</a>
        <a href="">联系我们</a>
      </div>
      <a href="">注册/登录</a>
    </nav>
  </header>
  <!-- 主体 -->
  <div class="container">
    <div class="left">左</div>
    <div class="main">中</div>
    <div class="right">右</div>
  </div>
  <!-- 页脚 -->
  <div class="footer">
    <div class="content">
      <p>脚部</p>
    </div>
  </div>
</body>
</html>

2.内容多行或多列，分3列并在中间加分割竖线

<style>
    div {
      border: 1px solid #000;
      padding: 1rem;
      width: 60rem;
      margin: 30px auto;
    }
    div {
      /* 分列显示 */
      column-count: 3;
      /* 加分割条 */
      column-rule: 1px solid red;
    }
</style>

3.flex弹性盒子布局

FlexBox弹性盒子多行布局
单行容器的项目对齐方式
多行容器的项目对齐方式
主轴为垂直方向时的项目对齐方式
交叉轴时的项目对齐方式
主轴方向与项目排列简写
如下图：

例举其中一个flex弹性盒子多行布局代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>FlexBox弹性盒子多行布局</title>
  <style>
    .container {
      width: 300px;
      /* 弹性容器，用火狐 */
      display: flex;
    }
    .container > .item {
      width: 60px;
      width: 50px;
      width: 150px;
    }
    /* 宽度过多时，换行显示 */
    .container {
      flex-wrap: wrap;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <!-- <div class="item">6</div> -->
    <!-- <div class="item">7</div> -->
    <!-- <div class="item">8</div> -->
  </div>
</body>
</html>

4.order控制项目顺序

注意代码使用：

  <style>
    .container > .item:first-of-type {
      order: 3;
    }
    .container > .item:last-of-type {
      order: 5;
    }
  </style>

5.order调整元素顺序,例如小相册

进行上下顺序调整，如图：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>order调整元素顺序，小相册</title>
  <style>
    .container {
      width: 300px;
      display: flex;
      flex-direction: column;
    }
    .container > .item {
      border: 1px solid #000;
      padding: 10px;
      display: flex;
      /* 加以下定位才能上下移动 */
      position: relative;
    }
    .container > .item > div {
      display: flex;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">
      images-1.jpg
      <div>
        <button onclick="up(this)">Up</button
        ><button onclick="down(this)">Down</button>
      </div>
    </div>
    <div class="item">
      images-2.jpg
      <div>
        <button onclick="up(this)">Up</button
        ><button onclick="down(this)">Down</button>
      </div>
    </div>
    <div class="item">
      images-3.jpg
      <div>
        <button onclick="up(this)">Up</button
        ><button onclick="down(this)">Down</button>
      </div>
    </div>
  </div>
  <!-- 运用到以下js -->
  <script>
    let up = (ele) => (ele.offsetParent.style.order -= 1);
    let down = (ele) => (ele.offsetParent.style.order += 1);
  </script>
</body>
</html>