如何在 Flex 中堆叠物品？

Question

我正在尝试创建一个石头剪刀布游戏，但我无法将物品堆叠起来。我在一行上有三个图像，我想在它们下面显示第四个图像（这个图像将是显示石头、纸或剪刀的结果图像）。

我尝试使用 flex-wrap、更改宽度等，经过一个小时的搜索，我想我会问你们可能会在一分钟内解决它的人大声笑这是我的代码，提前感谢您的帮助:D

@import url("https://fonts.googleapis.com/css?family=Germania+One");
$primary-color: #000000;
$serif: "Germania One",
cursive;
html {
  background: #4d1c17;
  font-size: 66%;
}

h1 {
  font-size: 4rem;
  text-align: center;
  margin-top: 100px;
}

h2 {
  text-align: center;
  font-size: 3rem;
}

h1,
h2 {
  color: $primary-color;
  font-family: $serif;
}

.container {
  text-align: center;
  width: 100%;
  img {
    height: 12rem;
    padding: 20px;
    &:hover {
      height: 13rem;
    }
  }
}

#rock,
#paper,
#scissor {
  display: flex;
  justify-content: center;
  border-radius: 20px;
  cursor: pointer;
}

#scissor {
  margin-left: 30px;
  padding-left: 10px;
  color: green;
}

p {
  font-size: 4rem;
  width: 100%;
  height: auto;
  margin-top: 200px;
  display: flex;
  justify-content: center;
}

#rock_win,
#paper_win,
#scissor_win {
  justify-content: center;
  width: 50%;
  height: auto;
  flex-wrap: wrap;
  border-radius: 20px;
  cursor: pointer;
}

#scissor_win {
  margin-left: 30px;
  padding-left: 10px;
}

<h1>Rock, Paper, Scissor's</h1>
<h2>Choose your fate</h2>
<div class="container">
  <div class='items'>
    <div id='rock'><img src='https://maxcdn.icons8.com/Share/icon/ios7/Hands//hand_rock1600.png' /> </div>
    <div id='paper'><img src="https://maxcdn.icons8.com/Share/icon/Hands//hand1600.png" /> </div>
    <div id='scissor'><img src="https://maxcdn.icons8.com/Share/icon/ios7/Hands//hand_scissors1600.png" /> </div>
  </div>
  <div id='scissor_win'><img src="https://maxcdn.icons8.com/Share/icon/ios7/Hands//hand_scissors1600.png" /> </div>
</div>
<p></p>

Answer 1

display: flex; 设置需要应用于 容器/父元素，而不是弹性项目/子元素。

由于您有一个.container 结构作为items 和#scissor_win 的容器，并且items 再次包含三个要堆叠的项目，CSS 规则应该（部分）如下所示：

.container {
  display: flex;
  flex-direction: column;
}
.items {
  display: flex;
  flex-direction: column;
}

单个项目不需要display: flex，除非您想使用 flex 将它们的内容居中。

Answer 2

1. 确保关闭您的img。它们缺少结束括号。
2. display: flex 进入容器，所有子项都获得分配给他们的 flex (Flex Guide)。
3. 我添加了 SASS 标签，因为您似乎正在使用它

$primary-color: #000000;
    $serif: "Germania One", cursive;
    
    html {
      background: #4d1c17;
      font-size: 66%;
    }
    
    h1 {
      font-size: 4rem;
      text-align: center;
      margin-top: 100px;
    }
    
    h2 {
      text-align: center;
      font-size: 3rem;
    }
    
    h1,
    h2 {
      color: $primary-color;
      font-family: $serif;
    }
    
    .container {
      text-align: center;
      width: 100%;
    
      img {
        height: 12rem;
        padding: 20px;
        &:hover {
          height: 13rem;
        }
      }
    }
    
    .items {
      display: flex;
    }
    
    #rock,
    #paper,
    #scissor {
      flex: 1;
      /* justify-content: center; */
      border-radius: 20px;
      cursor: pointer;
    }
    
    #scissor {
      color: green;
    }
    
    p {
      font-size: 4rem;
      width: 100%;
      height: auto;
      margin-top: 200px;
      display: flex;
      justify-content: center;
    }
    #rock_win,
    #paper_win,
    #scissor_win {
      margin: 0 auto;
      clear: both;
      width: 50%;
      height: auto;
      border-radius: 20px;
      cursor: pointer;
    }

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <h1>Rock, Paper, Scissors</h1>
  <h2>Choose your fate</h2>
  
  <div class="container">

      <div class='items'>
        <div id='rock'>
          <img src='https://maxcdn.icons8.com/Share/icon/ios7/Hands//hand_rock1600.png'>
        </div>
        <div id='paper'>
          <img src="https://maxcdn.icons8.com/Share/icon/Hands//hand1600.png">
        </div>
        <div id='scissor'>
          <img src="https://maxcdn.icons8.com/Share/icon/ios7/Hands//hand_scissors1600.png">
        </div>
    </div>
    
    <div id='scissor_win'>
      <img src="https://maxcdn.icons8.com/Share/icon/ios7/Hands//hand_scissors1600.png">
    </div>
    
  </div>
  <p></p>

</body>
</html>

我无法在此处使用 SCSS 发布我的内联代码，因此这里还有一个 jsbin 链接。 jsbin

Answer 3

使用@kauffee000 sn-p，我减少了所需的css数量。

希望对你有帮助。

解释： 这里的诀窍是让.container 成为一个 flex 并且具有列的 flex-direction，而 .items 成为具有行的 flex-direction 的 flex。

$primary-color: #000000;
$serif: "Germania One", cursive;

html {
  background: #4d1c17;
  font-size: 66%;
}

h1 {
  font-size: 4rem;
  text-align: center;
  margin-top: 100px;
}

h2 {
  text-align: center;
  font-size: 3rem;
}

h1,
h2 {
  color: $primary-color;
  font-family: $serif;
}

.container {
  text-align: center;
  width: 100%;
  display: flex;
  flex-direction: column;

  img {
    height: 13rem;
  }
}

.items {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  & div {
    border-radius: 20px;
    flex: 1;

    &:hover {
      img {
        height: 5rem;
      }
    }
  }
}