Question

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

我尝试使用flex-wrap，更改宽度等等，经过一个小时的搜索，我想我会问你们谁可能会在一分钟内解决它lol这是我的代码，并提前感谢你的帮助：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

确保关闭img。他们错过了结束括号。
显示：flex在容器上移动，子项都会分配给它们（Flex Guide）。
我添加了SASS标记，因为您似乎正在使用

＆＃13;

$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;
    }

＆＃13;

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

＆＃13;

我在使用SCSS发布内联代码时遇到问题，所以此处还有一个jsbin链接。 jsbin

Answer 2

display: flex;设置需要应用于容器/父元素，而不是应用于flex-items / children。

由于您.container的结构为items和#scissor_win的容器，而items又包含三个要堆叠的项目，因此CSS规则应该（部分）看起来像这样：

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

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

Answer 3

使用@ kauffee000片段，我减少了所需的css数量。

希望它有所帮助。

说明：这里的诀窍是让.container成为一个弯曲，并具有一个列的弯曲方向，而.items则弯曲成一个行的弯曲方向。

$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;
      }
    }
  }
}

如何在Flex中获取要堆叠的项目？

3 个答案: