时间戳

首页 > 解决方案 > 如何用弹性盒子而不是网格来做这个设计？

html - 如何用弹性盒子而不是网格来做这个设计？

问题描述

这是我使用 HTML 和 CSS 使用网格制作的设计。但我想用弹性盒子而不是网格来重新制作它。这个设计是用网格做的： 这个设计是用网格做的

源代码：

演示：

* {
  box-sizing: border-box;
}
.parent {
  margin: 20px auto;
  width: 800px;
  height: 500px;
  background-color: #ddd;
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-template-rows: repeat(3, auto);
  gap: 10px 10px;
  justify-content: space-between;
}
.parent div {
  background-color: red;
  color: white;
  padding: 20px;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS</title>
    <link rel="stylesheet" href="css/master.css" />
  </head>
  <body>
    <div class="parent">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </body>
</html>

我做了一个看起来像这样但使用弹性盒子的设计：这个设计是用弹性盒子做的

源代码：

演示：

* {
  box-sizing: border-box;
}
.parent {
  margin: 20px auto;
  width: 800px;
  height: 500px;
  background-color: #ddd;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.parent div {
  background-color: red;
  color: white;
  padding: 20px;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  border: 0.01px dotted black;
  width: 50px;
  height: 32%;
  margin-right: 100px;
  margin-left: 60px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS</title>
    <link rel="stylesheet" href="css/master.css" />
  </head>
  <body>
    <div class="parent">
      <div style = "margin-left: 0px;">1</div>
      <div>2</div>
      <div>3</div>
      <div  style = "margin-right: 0px;">4</div>
      <div style = "margin-left: 0px;">5</div>
      <div>6</div>
      <div>7</div>
      <div  style = "margin-right: 0px;">8</div>
      <div style = "margin-left: 0px;">9</div>
    </div>
  </body>
</html>

我的问题：

- 我可以通过 flex box 以更好的方式创建这个设计吗？

标签： htmlcssflexbox

解决方案

这就是我的做法，首先避免在 html 标签中使用样式，并使用空格而不是边距来定位元素。

* {
  box-sizing: border-box;
}
.parent {
  margin: 20px auto;
  width: 800px;
  height: 500px;
  background-color: #ddd;
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  padding: 5px;
}

.row div {
  background-color: red;
  color: white;
  padding: 20px;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  border: 0.01px dotted black;
  width: 50px;
  height: 100%;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS</title>
    <link rel="stylesheet" href="css/master.css" />
  </head>
  <body>
    <div class="parent">
      <div class="row">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
      </div>
      <div class="row">
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      </div>
      <div class="row">
      <div>9</div>
      </div>
    </div>
  </body>
</html>

推荐阅读