【学习css3】使用flex和grid实现等高元素布局

过往的实现方法是使用浮动加计算布局来实现,当flex和grid问世时,这一切将变得简单起来

一、简单的两列实现

1、先看页面效果

2、css代码

css 复制代码
    .container {
      padding: 10px;
      width: 100ch;
      margin: 0 auto;
      box-shadow: inset 0 0 0 2px #ccc;
    }
    .column {
      margin: 20px;
      background-color: #ccc;
      padding: 10px;
    }
    .flexbox {
      display: flex;
    }

    .grid {
      display: grid;
      grid-auto-flow: column;
    }

3、html代码

html 复制代码
    <div class="container">flex布局</div>
  <div class="container flexbox">
    <div class="column">
      <div class="element">
        <p> 松饼冰淇淋小熊软糖。甜苹果派,蛋糕,糖果,胡萝卜蛋糕。糖蛋奶酥,柠檬糖软糖。</p>
      </div>
    </div>
    <div class="column">
      <div class="element">
        <p>提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p>
      </div>
    </div>
  </div>
  <div class="container">grid布局</div>
  <div class="container grid">
    <div class="column">
      <div class="element">
        <p>松饼冰淇淋小熊软糖。甜苹果派,蛋糕,糖果,胡萝卜蛋糕。糖蛋奶酥,柠檬糖软糖。</p>
      </div>
    </div>
    <div class="column">
      <div class="element">
        <p>提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p>
      </div>
    </div>
  </div>

二、每行放置3列,多出来的自动到下一行

1、还是先看页面效果

2、css代码

css 复制代码
    .container {
      padding: 10px;
      width: 100ch;
      margin: 0 auto;
      box-shadow: inset 0 0 0 2px #ccc;
    }
    .column {
      margin: 20px;
      background-color: #ccc;
      padding: 10px;
    }
    .flexbox {
      display: flex;
    }
    .flexbox.col-3 {
      flex-wrap: wrap;
    }
    .flexbox.col-3 .column {
      margin: 0.5rem;
      width: calc((100% / 3) - 1rem);
    }


    .grid {
      display: grid;
      grid-auto-flow: column;
    }
    .grid.col-3 {
      grid-gap: 1rem;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-flow: unset;
    }
    .grid.col-3 .column {
      margin: 0;
    }

3、html代码

html 复制代码
<div class="container">flex布局</div>
  <div class="container flexbox col-3">
    <div class="column">
      <div class="element">
        <p>flexbox col-3: 甜苹果派,蛋糕,糖果,胡萝卜蛋糕。糖蛋奶酥,柠檬糖软糖。</p>
      </div>
    </div>
    <div class="column">
      <div class="element">
        <p>提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p>
      </div>
    </div>
    <div class="column">
      <div class="element">
        <p>松饼冰淇淋小熊软糖。甜苹果派,蛋糕,糖果,胡萝卜蛋糕。糖蛋奶酥,柠檬糖软糖。</p>
      </div>
    </div>
    <div class="column">
      <div class="element">
        <p>蛋奶酥馅饼,柠檬糖,小熊软糖,棒棒糖,甜点,芝麻饼干。提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p>
      </div>
    </div>
  </div>
  <div class="container">grid布局</div>
  <div class="container grid col-3">
    <div class="column">
      <div class="element">
        <p>grid col-3:甜苹果派,蛋糕,糖果,胡萝卜蛋糕。糖蛋奶酥,柠檬糖软糖。</p>
      </div>
    </div>
    <div class="column">
      <div class="element">
        <p>提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p>
      </div>
    </div>
    <div class="column">
      <div class="element">
        <p>松饼冰淇淋小熊软糖。甜苹果派,蛋糕,糖果,胡萝卜蛋糕。糖蛋奶酥,柠檬糖软糖。</p>
      </div>
    </div>
    <div class="column">
      <div class="element">
        <p>蛋奶酥馅饼,柠檬糖,小熊软糖,棒棒糖,甜点,芝麻饼干。提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p>
      </div>
    </div>
  </div>

三、全部代码

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>使用flex和grid实现等高元素布局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .container {
      padding: 10px;
      width: 100ch;
      margin: 0 auto;
      box-shadow: inset 0 0 0 2px #ccc;
    }
    .column {
      margin: 20px;
      background-color: #ccc;
      padding: 10px;
    }
    .flexbox {
      display: flex;
    }
    .flexbox.col-3 {
      flex-wrap: wrap;
    }
    .flexbox.col-3 .column {
      margin: 0.5rem;
      width: calc((100% / 3) - 1rem);
    }


    .grid {
      display: grid;
      grid-auto-flow: column;
    }
    .grid.col-3 {
      grid-gap: 1rem;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-flow: unset;
    }
    .grid.col-3 .column {
      margin: 0;
    }
  </style>
</head>
<body>
  <div class="container">flex布局</div>
  <div class="container flexbox">
    <div class="column">
      <div class="element">
        <p> 松饼冰淇淋小熊软糖。甜苹果派,蛋糕,糖果,胡萝卜蛋糕。糖蛋奶酥,柠檬糖软糖。</p>

      </div>
    </div>
    <div class="column">
      <div class="element">
        <p>提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p>
      </div>
    </div>
  </div>
  <div class="container">grid布局</div>
  <div class="container grid">
    <div class="column">
      <div class="element">
        <p>松饼冰淇淋小熊软糖。甜苹果派,蛋糕,糖果,胡萝卜蛋糕。糖蛋奶酥,柠檬糖软糖。</p>

      </div>
    </div>
    <div class="column">
      <div class="element">
        <p>提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p>
      </div>
    </div>
  </div>
  <div class="container">flex布局</div>
  <div class="container flexbox col-3">
    <div class="column">
      <div class="element">
        <p>flexbox col-3: 甜苹果派,蛋糕,糖果,胡萝卜蛋糕。糖蛋奶酥,柠檬糖软糖。</p>
      </div>
    </div>
    <div class="column">
      <div class="element">
        <p>提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p>
      </div>
    </div>
    <div class="column">
      <div class="element">
        <p>松饼冰淇淋小熊软糖。甜苹果派,蛋糕,糖果,胡萝卜蛋糕。糖蛋奶酥,柠檬糖软糖。</p>
      </div>
    </div>
    <div class="column">
      <div class="element">
        <p>蛋奶酥馅饼,柠檬糖,小熊软糖,棒棒糖,甜点,芝麻饼干。提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p>
      </div>
    </div>
  </div>
  <div class="container">grid布局</div>
  <div class="container grid col-3">
    <div class="column">
      <div class="element">
        <p>grid col-3:甜苹果派,蛋糕,糖果,胡萝卜蛋糕。糖蛋奶酥,柠檬糖软糖。</p>
      </div>
    </div>
    <div class="column">
      <div class="element">
        <p>提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p>
      </div>
    </div>
    <div class="column">
      <div class="element">
        <p>松饼冰淇淋小熊软糖。甜苹果派,蛋糕,糖果,胡萝卜蛋糕。糖蛋奶酥,柠檬糖软糖。</p>
      </div>
    </div>
    <div class="column">
      <div class="element">
        <p>蛋奶酥馅饼,柠檬糖,小熊软糖,棒棒糖,甜点,芝麻饼干。提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p>
      </div>
    </div>
  </div>
</body>
</html>
相关推荐
并不会4 分钟前
多线程案例-单例模式
java·学习·单例模式·单线程·多线程·重要知识
淬渊阁6 分钟前
汇编学习之《push , pop指令》
汇编·学习
吴梓穆24 分钟前
UE5学习笔记 FPS游戏制作33 换子弹 动画事件
笔记·学习·ue4
吴梓穆30 分钟前
UE5学习笔记 FPS游戏制作31 显示计分板
笔记·学习·ue4
ddd...e_bug1 小时前
常用天然地震链接
学习
木木黄木木1 小时前
使用HTML5和CSS3实现炫酷的3D立方体动画
3d·css3·html5
杉之3 小时前
Java中的不可变集合
java·笔记·学习
viperrrrrrrrrr74 小时前
大数据学习(95)-谓词下推
大数据·sql·学习
唔665 小时前
flutter 曲线学习 使用第三方插件实现左右滑动
javascript·学习·flutter
haoly19895 小时前
离散数学问题集--问题4.40
学习