Build a Page of Playing Cards - Build a Page of Playing Cards

HTML-CSS
1

Tell us what’s happening:

I can’t align my symbols in the middle and don’t understand how it works. I used background as an aid and still don’t comprehend everything about the flexbox.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Playing Cards</title>
  <link href="./styles.css" rel="stylesheet">
</head>

<body>
  <main id="playing-cards">
    <div class="card">
      <div class="left spikel">
      </div>
      <div class="middle spikem">
      </div>
      <div class="right spiker">
      </div>
    </div>
    <div class="card">
      <div class="left hearthl">
      </div>
      <div class="middle hearthm">
      </div>
      <div class="right hearthr">
      </div>
    </div>
    <div class="card">
      <div class="left">
      </div>
      <div class="middle">
      </div>
      <div class="right">
      </div>
    </div>
  </main>
</body>

</html>

/* file: styles.css */
body{
  background-color:green;
}

#playing-cards{
  display:flex;
  justify-content: center;
  flex-wrap:wrap;
  gap:20px;
  margin: 10px auto;
}

.card{
  display:flex;
  justify-content:space-between;
  background:whitesmoke;
  width:150px;
  height:250px;
  border-radius:20px;
  font-family:sans-serif;
  font-weight:bold;
  font-size: 2rem;
  padding:4px;
}

.left{
  align-self:flex-start;
 
  width:25px;
  margin-left:5px;
  flex-wrap:wrap;
  line-height:1.5rem;
}

.middle{
  display:flex;
  flex-direction:column;
  flex-wrap:no-wrap;

  width:60px;
  align-self:center;
}

.right{
  align-self:flex-end;
  width:25px;
  margin-right:5px;
  flex-wrap:wrap;
  line-height:1.5rem;
  transform:rotate(180deg);
}

.hearthl::after, .hearthr::after{
  content:"5 ♥";
  color:red;
}

.hearthm::after{
  content:"♥ ♥ ♥ ♥ ♥";
  color:red;
}

.spiker::after, .spikel::after{
  content:"3 ♠";
}

.spikem::after{
  content:"♠ ♠ ♠";
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:146.0) Gecko/20100101 Firefox/146.0

Challenge Information:

Build a Page of Playing Cards - Build a Page of Playing Cards

2

Welcome to the forum @Mahoue

The symbols in the center of the card are treated as one block.

Try adding each line in separate elements.

Happy coding

3

Thank you for the tip. I added more divs and adjusted the pushed content to be one of each:

New HTML:

<div class="middle hearthm">
      </div>
      <div class="middle hearthm">
      </div>
      <div class="middle hearthm">
      </div>
      <div class="middle hearthm">
      </div>
      <div class="middle hearthm">
      </div>

New CSS:

.middle{
  display:flex;
  flex-direction:column;
  flex-wrap:no-wrap;
  width:60px;
  height:120px;
  align-self:center;
  background-color:blue;
  gap: 5px;
}

.hearthm::after{
  content:"♥";
  color:red;
}

I swear, i still don’t understand how the flexbox dosn’t align things in a column. Why does it still make a block ?

Sorry and thanks for the time !