CODEWITHSUNDEEP
htmlcsssassflexbox
Swink
Swink

Reputation: 448

How do I get items to stack in Flex?

I'm trying to create a rock, paper, scissors game and I'm having trouble getting the items to stack. I have three images on one row and I would like to display the fourth image below them (this image would be the resulting image displaying either rock, paper or scissors).

I tried using flex-wrap, changing width's, etc and after an hour of searching, I figured I'll just ask you guys who will probably solve it in a minute lol Here is my code and thanks in advance for the help :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>

Upvotes: 0

Views: 1906

Answers (3)

Johannes
Johannes

Reputation: 67778

The display: flex; setting needs to be applied to the container/parent element, not to the flex-items/children.

Since you have a structure of .container as a container for items and #scissor_win, and items again contains three items-to-be stacked, the CSS rules should (partly) look like this:

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

The single items don't need display: flex, unless you want to center their contents using flex.

Upvotes: 1

Rip3rs
Rip3rs

Reputation: 1540

using @kauffee000 snippet, I reduced the amount of css required.

Hope it helps.

explanation: the trick here is to make .container be a flex and have a flex-direction of column, while .items be flex with a flex-direction of row.

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

Upvotes: 0

kauffmanes
kauffmanes

Reputation: 518

  1. Make sure you close your img's. They are missing the ending bracket.
  2. The display: flex goes on the container, and the children all get a flex assigned to them (Flex Guide).
  3. I added the SASS tag, since it seems you're using that

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

I'm having trouble posting my inline code here with SCSS, so here's a jsbin link in addition. jsbin

Upvotes: 1

Related Questions