flex和grid布局应用

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

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 布局确实挺实用

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

xxxxxxxxxx
 
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 布局确实挺实用

bj.jpg#100%

<!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>

说明

<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
💞
文本颜色
背景颜色
插入画图
💞
xxxxxxxxxx

💞
💞
文本颜色
背景颜色
0 回复 (0)

发布帖子

作者信息

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

flex和grid布局应用

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

文本颜色

背景颜色

文本颜色

背景颜色

文本颜色

背景颜色

文本颜色

背景颜色

作者信息

最近热帖