如何用一行 CSS 实现 10 种现代布局

超级居中

place-item:center 实现垂直居中
父级元素设置一下属性即可

 display: grid;
 place-items: center;

解构煎饼式布局：flex:

baseWidth 是设置盒子基本宽度如果没有设置则取默认的宽度
grow 是当父级盒子有剩余空间时候剩余空间给子级填充剩余空间的比例
shrink 是当父级元素宽度不够时候那么子级元素进行压缩适配父级的比例
案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      height: 50px;
      display: flex;
      background-color: #eee;
    }

    .item {
      height: 50px;
    }

    .item:nth-child(1) {
      width: 50px;
      background: red;
    }

    .item:nth-child(2) {
      width: 70px;
      flex-grow: 1;
      flex-basis: auto;
      background: grey;
    }

    .item:nth-child(3) {
      width: 50px;
      flex-grow: 2;
      flex-basis: 100px;
      background: yellow;
    }

    .container1 {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      height: 100px;
      border: 1px solid red;
      margin-top: 200px;
    }

    .child {
      flex: 1 0 150px;
      margin: 5px;
      height: 100px;
      border: 1px solid yellow;
    }
  </style>
</head>

<body>
  <!-- 第一个案例是一个元素固定 其余元素适配 从pc适配到手机端 -->
  <div class="container">
    <div class="item">123</div>
    <div class="item">456</div>
    <div class="item">789</div>
  </div>
  <!-- 自适应布局 -->
  <div class="container1">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
  </div>
</body>

</html>

侧边栏布局：grid-template-columns: minmax(, ) …)

此布局利用了minmax函数这里是将盒子的最小值设置为150px 当宽度大于150px时候会自动适应父级的25% 如果小于等于150px 就显示为150px
第二个参数是1fr 是css的新的单位自动适配剩余空间

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      display: grid;
      height: 200px;
      border: 1px solid red;
      grid-template-columns: minmax(300px, 25%) 1fr;
    }

    .children {
      height: 200px;
      border: 1px solid pink;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="children">左边列</div>
    <div class="children">右边列</div>
  </div>
</body>

</html>

煎饼堆栈布局：grid-template-rows: auto 1fr auto

就是头部和底部固定在头部和底部中间部分的内容自适应

.parent {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      display: grid;
      grid-template-rows: 200px 1fr auto;
      height: 90vh;
    }
    .border{
      border: 1px solid red;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="border">Header</div>
    <div class="border">Main</div>
    <div class="border">Footer</div>
  </div>
</body>

</html>

经典圣杯布局：grid-template: auto 1fr auto / auto 1fr auto

头部和底部固定中间部分两边固定中间部分自适应
关键样式

.parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}

案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      display: grid;
      grid-template: auto 1fr auto / auto 1fr auto;
      height: 99vh;
    }

    .border {
      border: 1px solid red;
    }

    /* grid-column 表示从哪一列开始 哪一列结束 */
    .header{
      padding: 10px;
      grid-column: 1 / 4; 
    }

    .left{
      grid-column: 1/2;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="border header">Header</div>
    <div class="border left">Left Sidebar</div>
    <div class="border main">Main Content</div>
    <div class="border right">Right Sidebar</div>
    <div class="border footer">Footer</div>
  </div>
</body>

</html>

12 跨网格：grid-template-columns: repeat(12, 1fr)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      height: 90vh;
    }

    .border {
      border: 1px solid red;
    }

    /* grid-column 表示从哪一列开始 哪一列结束 */
    /* grid-column: 1/13;  1/13 相当于1/span 12   2/8 等价于2/ span 6*/
    .span12 {
      padding: 10px;
      grid-column: 1/13;  
    }

    .span6 {
      grid-column: 2/8;
    }

    .span4 {
      grid-column: 1/5;
    }

    .span2 {
      grid-column: 3/8;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="border span12">Span12</div>
    <div class="border span6">Span 6</div>
    <div class="border span4">Span 4</div>
    <div class="border span2">Span 2</div>
  </div>
</body>

</html>

aspect-ratio

宽高等比缩放

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .div{
      aspect-ratio:16/9;
      border:1px solid red;
     padding:100px;
    }
  </style>
</head>
<body>
  <div class="div">
    ssss
  </div>
</body>
</html>

clamp

具有兼容性问题好用但慎用
在这里插入图片描述

{
    font-size: clamp(20px, 18px, 40px); 
    width: clamp(100px, 100%, 200px);
}

当首选值比最小值要小时，则使用最小值。
当首选值介于最小值和最大值之间时，用首选值
当首选值比最大值要大时，则使用最大值。

排列布局：justify-content: space-between

作用和flex布局中的justify-content 一样

.parent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

RAM (Repeat, Auto, MinMax): grid-template-columns(auto-fit, minmax(, 1fr))

RAM 是 Repeat Auto MinMax 的缩小
auto-fit 表示会自动适配剩下的空间
上述例子表示如果屏幕宽度达到最小值则以150px进行展示如果大于150px将自动适配多余的空间
auto-fill 不会适配剩余空间

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      display: grid;
      /* 当元素宽度小于300px时候 以最小单位300px来展示  当大于300px时候 将自适应屏幕
      如果改为auto-fill 当大于300px的时候  不会自适应填充剩下的空间 */
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      height: 90vh;
    }

    .border {
      border: 1px solid red;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="border">1</div>
    <div class="border">2</div>
    <div class="border">3</div>
    <div class="border">4</div>
  </div>
</body>

</html>