CSS CSS Flexbox Layout Flexbox Properties Distributing Space Inside a Flex Container

CSS Flexbox Layout -- Section 2 -- Video3 -- @4:38

The item rule he uses here .item-1{margin-right: auto;} is not working for me. but everything else up to this point has.

Heres my html:

  <div class="Container">
    <div class="items item-1"> 1) </div>
    <div class="items item2"> 2) </div>
    <div class="items item3"> 3) </div>
    <div class="items item4"> 4) </div>
    <div class="items item5"> 5) </div>
    <div class="items item3"> 6) </div>
    <div class="items item4"> 7) </div>
    <div class="items item5"> 8) </div>
  </div>

Here's my CSS:

.Container{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.items{
  color: black;
  padding: 15px;
  margin: 5px;
  border-radius: 3px;
}

.item-1{
  margin-right: auto;
}

-- it works when I remove .items class completely, OR if I use an ID instead of a class for item-1 for instance:

#item-1{
  margin-right: auto;
}

and have the html as

    <div id="item-1" class="items"> 1) </div>

Thanks in advanced!

Weird. Yes I tried chrome firefox opera and safari -- all same. You said it looked right to you Did you read the code or implement it?

Here's my entire html doc (index.html)

<!DOCTYPE html>
<html>
<head>
  <title> FLEX BOX SUPER</title>
  <link href="css/main.css" rel="stylesheet" >
</head>
<body>
  <h3>Flex12 -- title</h3>


  <div class="container">
    <div class="item-1 item" >1) </div>
    <div class="item-2 item">2) </div>
    <div class="item-3 item">3) </div>
    <div class="item-4 item">4) </div>
    <div class="item-5 item">5) </div>
    <div class="item-6 item">6) </div>
    <div class="item-7 item">7) </div>
    <div class="item-8 item">8) </div>
  </div>


</body>
</html>

Here is my CSS file:

/* main  */

*{
 box-sizing: border-box;
}

body{
  background: white;
  font-family: arial;
  font-size: 1.35em;
  padding-left: 5%;
  padding-right: 5%;
}


.container{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  background: grey;
  padding: 10px;
  border-radius: 5px;
  margin: 45px auto;
}

.item-1{
    margin-right: auto;

  }

.item{
  background: white;
  color: black;
  padding: 15px;
  margin: 5px;
  border-radius: 3px;
  }

3 Answers

Steven Parker
Steven Parker
186,663 Points

Your original CSS works fine for me. It might be some peculiarity of the browser, can you try a different one?

Also, do you have any other CSS not shown here? I wouldn't expect it to make any difference what kind of selector is used, except that if there is a conflict with other CSS, the specificity of an id selector is higher than a class selector.

The order is also important, but the order shown here (".items" before ".item-1") is correct. The behavior you describe is what I would expect if the rules were listed in the opposite order.

Looks like it doesn't like the .item tags anymore because when I remove them from the html it works... After dissecting the .item tag... Looks like the margin: 5px was messing it up.... not sure why...

When I use ID="item-1" instead of as a class the margin:5px doesn't mess it up.

Steven Parker
Steven Parker
186,663 Points

The CSS you posted the 2nd time has the rule for ".item-1" before ".item". That's exactly what I was talking about in my answer. For the class selector to work correctly, ".item" must come first, with ".item-1" after, as you had it in the first example.

Hey Steven Thanks again for responding, I was able to fix the problem because of you!

I thought you were saying that the order the classes were listed in the html file was the problem. What you really meant was that the order of the .classes{} were listed on the css file was the problem.

Side note* The order your css files are linked to your html also matters main.css should be first then flex.css

If you have flex.css listed first you will have the same problem as me.