0

This is a test for flexbox programs.

Here is my code:

.box-1 {
  background-color: green;
  border-radius: 1rem;
  padding-left: 25px;
  padding-right: 25px;
  width: 50px;
  height: 100px;
}

.box-2 {
  background-color: green;
  padding-left: 25px;
  border-radius: 1rem;
  padding-right: 25px;
  width: 50px;
  height: 100px;
}

.box-3 {
  background-color: green;
  border-radius: 1rem;
  padding-left: 25px;
  padding-right: 25px;
  width: 50px;
  height: 100px;
}

.container {
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: space-evenly;
}
<div class="container">
  <div class="box-1">Item 1</div>
  <div class="box-2">Item 2</div>
  <div class="box-3">Item 3</div>
</div>

I need help on this for a flexbox project. Is there any details I am currently missing? I am new to flexbox, so this may look like very basic code.

InSync
  • 4,851
  • 4
  • 8
  • 30
ModernPrograms
  • 1
  • 2
    There is no `align-items` in your code; perhaps you mean `align-items: center` instead of `align-content: center`? Note that you want to align the text inside each `box-`, whereas `align-items` can only affect the boxes themselves. Try setting `display: flex; align-items: center;` to the `box-`es too. – InSync Jun 04 '23 at 05:21
  • container has not been given a height so there is nothing for the system to align items to. Did you want it to have the viewport height? (100vh)? – A Haworth Jun 04 '23 at 07:12

0 Answers0