Justify Content Issues

1

I have a container with 3 items. I am testing the following values for the justify-content property -
flex-start (works as it should positioning all items to the LS of the container)
flex-end(also works as it should placing the items to the RS)
flex-center(doesn’t do what it should - elements are still on the LS - I can’t understand why this is so)

Document .container { width: 600px; height: 800px; border: 4px solid black; display: flex; justify-content: flex-center; text-align: center; } 
.orange {
  height: 80px;
  width: 80px;
  background: orange;
  
}

.green {
  height: 110px;
  width: 110px;
  background: green;
  
  color: white
}

.red {
  height: 140px;
  width: 140px;
  background: red;
  
  color:rgb(253, 249, 1)
}
orange
green
red
2

sorry - here’s the code - I don’t know why it didn’t come across fully in the original post

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width: 600px;
      height: 800px;
      border: 4px solid black;
      display: flex;
      justify-content: flex-center;
      text-align: center;
    }

    .orange {
      height: 80px;
      width: 80px;
      background: orange;
      
    }

    .green {
      height: 110px;
      width: 110px;
      background: green;
      
      color: white
    }

    .red {
      height: 140px;
      width: 140px;
      background: red;
      
      color:rgb(253, 249, 1)
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="orange">orange</div>
    <div class="green">green</div>
    <div class="red">red</div>
  </div>
</body>

</html>
3

see Problem With Align-Items :wink:

4

I am going to pass out from embarrassment! Talk about covering the same ground twice! There’s such forest of properties and values in html that even when I think I know the expression of the value for some property - it turns out that I don’t. In this case it’s even worse since I had gone over this very ground before. There should be a bible of html with all the properties and their possible values. Really - can anyone remember all of it?

5

MDN is a good resource. It has the names of the different possible values for all the different CSS properties.

Also, and I may have mentioned this before, it can help to look at the developer console/inspect your elements and see if there are any problems with the CSS. If the property value is bad, it will show a warning.

image

1 Like
6

You can use - justify-content: center; not use justify-content: flex-center;

Capture
Capture759×455 16.8 KB