我正在努力将心形布局从基于CSS网格的结构过渡到更灵活、适应性更强的Flexbox实现[关闭]

问题描述 投票：0回答：1

不使用javascript。

有人告诉我：

正如 A Haworth 之前所说，JavaScript 只是为了渲染 与手动完成 72 次相同的 HTML。 grn 和 red 数组是 与 b:bth-child(N+1) 相同（N 是索引号，因此有 +1 CSS 中的偏移量）。继续复制并粘贴 72，然后在 CSS 中添加 20 b:nth-child(N+1) {背景：绿色} 然后 26 b:nth-child(N+1) {背景：红色}。如果你这样做并使用我的答案中发布的 CSS 这将是相同的结果。我的回答确实解决了您的问题 或没有 JavaScript。

对于 grn 数组中的每个数字（例如每个数字是 N）都是一行 CSS: b:nth-child(N+1) {background: green} 接下来，对于中的每个数字 红色数组是 CSS 中的一行：b:nth-child(N+1) {background: red}。使用 答案中的 CSS，添加我刚刚向您解释的 46 行（对于 第二次），使用相同的 HTML，并在其中添加 72 

<section>
。

但我不明白。

我如何将这个网格心转换为 Flex？

这就是我在代码中尝试做的事情：

如何将此网格心形布局转换为弹性盒布局？

我试图在此处的代码中使用 Flexbox 达到相同的效果。目前，心形是使用 CSS Grid 构建的，但我想探索如何使用 Flexbox 来达到相同的目的。主要区别在于，虽然 CSS Grid 擅长二维布局，但 Flexbox 更适合一维布局。

对于 Flex 我是这么想的：

类似这样的：

{
  height: 400px;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--bg-color);
  color: white;
  margin: 1rem auto;
  gap: 4px;
}

类似这样的：

{
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 4px;
}

网格代码：

代码：https://liveweave.com/PGNNak

.heart-beat {
  position: relative;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(8, 1fr);
  grid-template-areas:
    "a1 a2 a3 a4 a5 a6 a7 a8 a9"
    "b1 b2 b3 b4 b5 b6 b7 b8 b9"
    "c1 c2 c3 c4 c5 c6 c7 c8 c9"
    "d1 d2 d3 d4 d5 d6 d7 d8 d9"
    "e1 e2 e3 e4 e5 e6 e7 e8 e9"
    "f1 f2 f3 f4 f5 f6 f7 f8 f9"
    "g1 g2 g3 g4 g5 g6 g7 g8 g9"
    "h1 h2 h3 h4 h5 h6 h7 h8 h9";
  margin: auto;
  width: 302px;
  background: black;
  color: white;
  gap:4px;
  border: 66px solid #000;
  border-right-width: 49px;
  border-left-width: 49px;
}

.heart-beat p{
  margin: 0;
  aspect-ratio: 1 /1;
  background: red;
  display:flex;
  align-items:center;
  justify-content:center;
}
p:nth-child(1) {grid-area: a2;background:green;}
p:nth-child(2) {grid-area: a3;background:green;}
p:nth-child(3) {grid-area: a7;background:green;}
p:nth-child(4) {grid-area: a8;background:green;}
p:nth-child(5) {grid-area: b1;background:green;}
p:nth-child(6) {grid-area: b2;}
p:nth-child(7) {grid-area: b3;}
p:nth-child(8) {grid-area: b4;background:green;}
p:nth-child(9) {grid-area: b6;background:green;}
p:nth-child(10) {grid-area: b7;}
p:nth-child(11) {grid-area: b8;}
p:nth-child(12) {grid-area: b9;background:green;}
p:nth-child(13) {grid-area: c1;background:green;}
p:nth-child(14) {grid-area: c2;}
p:nth-child(15) {grid-area: c3;}
p:nth-child(16) {grid-area: c4;}
p:nth-child(17) {grid-area: c5;background:green;}
p:nth-child(18) {grid-area: c6;}
p:nth-child(19) {grid-area: c7;}
p:nth-child(20) {grid-area: c8;}
p:nth-child(21) {grid-area: c9;background:green;}
p:nth-child(22) {grid-area: d1;background:green;}
p:nth-child(23) {grid-area: d2;}
p:nth-child(24) {grid-area: d3;}
p:nth-child(25) {grid-area: d4;}
p:nth-child(26) {grid-area: d5;}
p:nth-child(27) {grid-area: d6;}
p:nth-child(28) {grid-area: d7;}
p:nth-child(29) {grid-area: d8;}
p:nth-child(30) {grid-area: d9;background:green;}
p:nth-child(31) {grid-area: e2;background:green;}
p:nth-child(32) {grid-area: e3;}
p:nth-child(34) {grid-area: e4;}
p:nth-child(35) {grid-area: e4;}
p:nth-child(36) {grid-area: e4;}
p:nth-child(32) {grid-area: e3;}
p:nth-child(33) {grid-area: e4;}
p:nth-child(33) {grid-area: e4;}
p:nth-child(33) {grid-area: e4;}
p:nth-child(33) {grid-area: e4;}
p:nth-child(34) {grid-area: e5;}
p:nth-child(35) {grid-area: e6;}
p:nth-child(36) {grid-area: e7;}
p:nth-child(37) {grid-area: e8;background:green;}
p:nth-child(38) {grid-area: f3;background:green;}
p:nth-child(39) {grid-area: f4;}
p:nth-child(39) {grid-area: f4;}
p:nth-child(40) {grid-area: f5;}
p:nth-child(41) {grid-area: f6;}
p:nth-child(42) {grid-area: f7;background:green;}
p:nth-child(43) {grid-area: g4;background:green;}
p:nth-child(44) {grid-area: g5;}
p:nth-child(45) {grid-area: g6;background:green;}
p:nth-child(46) {grid-area: h5;background:green;}
<div class="heart-beat">
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
  <p>10</p>
  <p>11</p>
  <p>12</p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p>22</p>
  <p>23</p>
  <p>24</p>
  <p>25</p>
  <p></p>
  <p>27</p>
  <p>28</p>
  <p>29</p>
  <p>30</p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</div>

html css flexbox
1个回答
0
投票

由于每个方块的宽度为 30 像素，宽度为 9，因此根据每个方块的边距，将 Flex 容器宽度设置为 278 像素到 300 像素左右。更重要的是，弹性容器必须具有 

flex-wrap: wrap
或 
flex-flow: row wrap
，以便每经过 9 个方格后它们就会换行到下一行。顺便说一句，我使用 JavaScript 生成每个方块，为其背景着色并编号。不要浪费时间手动编写所有标记。

const sec = document.querySelector("section");
const grn = [1, 2, 6, 7, 9, 12, 14, 17, 18, 22, 26, 27, 35, 37, 43, 47, 51, 57, 59, 67];
const red = [10, 11, 15, 16, 19, 20, 21, 23, 24, 25, 28, 29, 30, 31, 32, 33, 34, 38, 39, 40, 41, 42, 48, 49, 50, 58];

for (let i = 0; i < 72; i++) {
  const b = document.createElement("b");
  b.textContent = i;
  sec.append(b);
  if (grn.indexOf(i) > -1) {
    b.style.backgroundColor = "#0f0";
    continue;
  }
  if (red.indexOf(i) > -1) {
    b.style.backgroundColor = "#f00";
    continue;
  }
}
main {
  width: 400px;
  margin: 10px auto;
  padding: 66px 0 66px 130px; 
  background: #000;
}

section {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  background: #000;
}

b {
  display: block;
  width: 30px;
  height: 30px;
  margin: 1px;
  line-height: 2;
  text-align: center;
  background: #000;
}
<main>
  <section></section>
</main>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.