flex和grid布局应用

发布：2024-11-17 20:08分类：前端模板评论：1浏览：187

grid 布局确实挺实用

![bj.jpg#100%](/file/upload/image/u10/20241117/6739dc76b5cbf.jpg)

``` html
<!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>flex / grid布局</title>
    <style>
      * {padding:0;margin:0;box-sizing:border-box;}
      body {background: #f6f6f6;}
      .layout {
        margin: 0 auto;
        padding: 30px;
        width: 1200px;
        min-height: 500px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }
      .layout .box {
        width: 260px;
        height: 200px;
        background: #7c9fb0;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        padding: 10px;
        margin-bottom: 40px;
      }
      .layout_g {
        margin: 0 auto;
        padding: 30px;
        width: 80%;
        min-height: 500px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
        display: grid;
        grid-template-columns: repeat(auto-fill,  minmax(260px, 1fr)); 
        gap: 30px; 
      }
      .layout_g .box {
        min-height: 150px;
        background: #ffcf7f;
        border-radius: 8px;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
      }
      .layout_g .box1 {
        grid-row: 1/3; 
        grid-column: 1/3; 
      }
    </style>
  </head>
  <body>
    <h2 style="text-align: center; padding: 10px 0">常用flex布局</h2>
    <div class="layout">
      <div class="box">BOX</div>
      <div class="box">BOX</div>
      <div class="box">BOX</div>
      <div class="box">BOX</div>
      <div class="box">BOX</div>
      <div class="box">BOX</div>
    </div>
    <h2 style="text-align: center; padding: 10px 0">Grid布局</h2>
    <div class="layout_g">
      <div class="box box1">BOX</div>
      <div class="box">BOX</div>
      <div class="box">BOX</div>
      <div class="box">BOX</div>
      <div class="box">BOX</div>
      <div class="box">BOX</div>
      <div class="box">BOX</div>
      <div class="box">BOX</div>
      <div class="box">BOX</div>
      <div class="box">BOX</div>
      <div class="box">BOX</div>
    </div>
  </body>
</html>
```
说明
``` html
<style>
.layout_g{
	grid-template-columns: 1fr 1fr 1fr 1fr; // 表示每行4等份列
	grid-template-columns: repeat(4, 1fr);  // 也可以用重复函数表示
	gap: 30px;  // 间隔
}
</style>
```

grid布局

haohao1 楼
2024-11-18 08:57

💞

0 回复 (0)

发布帖子

作者信息

: keyoumi; 等级：Lv1; 积分：1440; 这家伙很懒，什么都没写呢~

flex和grid布局应用

发布：2024-11-17 20:08分类：前端模板评论：1浏览：187

作者信息

最近热帖