Question

我正在尝试学习flexbox系统，同时制作一个有效的tictactoe游戏。当X和O被放置时，我的tictactoe线变得笨拙。当玩家标记X和O时，有没有办法让黑线div（.horizontal和.vertical）不会移动？我的目标是使用flexbox系统（和一些小的javascript）实现工作tictactoe游戏。

这是小提琴： https://jsfiddle.net/ryzw41e1/

HTML：

.container {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}
.row1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: 5em;
}
.row2 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  font-size: 5em;
}
.row3 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  font-size: 5em;
}
.horizontal {
  background-color: black;
  width: 360px;
  height: 12px;
}
.vertical {
  background-color: black;
  width: 12px;
  height: 120px;
}
#cell0 {
  flex-grow: 1;
  text-align: center;
}
#cell1 {
  flex-grow: 1;
  text-align: center;
}
#cell2 {
  flex-grow: 1;
  text-align: center;
}
#cell3 {
  flex-grow: 1;
  text-align: center;
}
#cell4 {
  flex-grow: 1;
  text-align: center;
}
#cell5 {
  flex-grow: 1;
  text-align: center;
}
#cell6 {
  flex-grow: 1;
  text-align: center;
}
#cell7 {
  flex-grow: 1;
  text-align: center;
}
#cell8 {
  flex-grow: 1;
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <!-- my css -->
  <link rel="stylesheet" type="text/css" href="stylin.css">
</head>

<body>
  <div class="container">
    <h2 class="playerTurn">It is X's turn</h2>
    <div>
      <div class="row1">
        <div id="cell0" class="cell">&nbsp;</div>
        <div class="vertical">&nbsp;</div>
        <div id="cell1" class="cell">&nbsp;</div>
        <div class="vertical">&nbsp;</div>
        <div id="cell2" class="cell">&nbsp;</div>
      </div>
      <div class="horizontal">&nbsp;</div>
      <div class="row2">
        <div id="cell3" class="cell">&nbsp;</div>
        <div class="vertical" class="cell">&nbsp;</div>
        <div id="cell4" class="cell">&nbsp;</div>
        <div class="vertical" class="cell">&nbsp;</div>
        <div id="cell5" class="cell">&nbsp;</div>
      </div>
      <div class="horizontal">&nbsp;</div>
      <div class="row3">
        <div id="cell6" class="cell">&nbsp;</div>
        <div class="vertical" class="cell">&nbsp;</div>
        <div id="cell7" class="cell">&nbsp;</div>
        <div class="vertical">&nbsp;</div>
        <div id="cell8" class="cell">&nbsp;</div>
      </div>
    </div>
    <br>
    <br>
    <button id="reset">reset</button>
  </div>
  <script src="tictactoe.js"></script>
</body>

</html>

Answer 1

问题是flex-grow: 1;，如@Paulie_D所指出的，应为flex: 1;。

.container {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.row1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: 5em;
}

.row2, .row3 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  font-size: 5em;
}

.horizontal {
  background-color: black;
  width: 360px;
  height: 12px;
}

.vertical {
  background-color: black;
  width: 12px;
  height: 120px;
}

.cell {
  flex: 1;
  text-align: center;
}

<div class="container">
  <h2 class="playerTurn">It is X's turn</h2>
  <div>
    <div class="row1">
      <div id="cell0" class="cell">&nbsp;</div>
      <div class="vertical">&nbsp;</div>
      <div id="cell1" class="cell">&nbsp;</div>
      <div class="vertical">&nbsp;</div>
      <div id="cell2" class="cell">&nbsp;</div>
    </div>
    <div class="horizontal">&nbsp;</div>
    <div class="row2">
      <div id="cell3" class="cell">&nbsp;</div>
      <div class="vertical" class="cell">&nbsp;</div>
      <div id="cell4" class="cell">&nbsp;</div>
      <div class="vertical" class="cell">&nbsp;</div>
      <div id="cell5" class="cell">&nbsp;</div>
    </div>
    <div class="horizontal">&nbsp;</div>
    <div class="row3">
      <div id="cell6" class="cell">&nbsp;</div>
      <div class="vertical" class="cell">&nbsp;</div>
      <div id="cell7" class="cell">&nbsp;</div>
      <div class="vertical">&nbsp;</div>
      <div id="cell8" class="cell">&nbsp;</div>
    </div>
  </div>
  <br>
  <br>
  <button id="reset">reset</button>
</div>

创建此答案是为了从未答复中删除问题。

使用flexbox工作tictactoe网格

1 个答案: