flexbox: CSS boxes not displaying properly

user_12610649 0
Viewed 100

just started a tutorial on flexbox, this is their code: https://jsfiddle.net/bradtraversy/bu0ecodm/1/

I tried creating a really basic google. For some reason, the boxes and containers aren't displaying properly. No matter how much I change the padding or border size/color nothing changes

HTML:

<html>
<head>
  <link rel="stylesheet" href="google-code.css">
  <script src="google-code.js"></script>
</head>

<body>
  
  <div class="left-container">
    <div class="icon-box">
      <h3> google </h3>
    </div>
  </div>
  
  <div class="middle-container">
    <div class="search-box">
      <h1>search</h1>
    <div class="tools-box">
      <h1>tools</h1>
    </div>
    </div>
 </div>

  <div class="right-container">
  </div>



</body>
</html>

CSS

.left-container{
  display:flex;
}
.left-container div{

  border: 1px #ccc solid;
  padding: 10px;
}

.middle-container{
  display:flex;
}
.middle-container div{
  border: 1px #ccc solid;
  padding: 30px;
}
.search-box{
  flex:1;
  order:2;
}
.tools-box{
  flex:2;
  order:1;
}

This is what's displayed: enter image description here

This is what I expected: enter image description here

flexbox css html
3 Answers

Here is a great resource on how flex-box works: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

But I think this more closely matches what you are looking for according to your drawing.

HTML

<html>
    <head>
      <link rel="stylesheet" href="google-code.css">
      <script src="google-code.js"></script>
    </head>
    
    <body>
      <div class='flex-box'>
          <div class="left-container">
          <div class="icon-box">
            <h3> google </h3>
          </div>
        </div>
    
        <div class="middle-container">
          <div class="search-box">
            <h1>search</h1>
          </div>
           <div class="tools-box">
            <h1>tools</h1>
          </div>
       </div>
      </div>

    
    
    </body>
</html>

CSS

.flex-box{
display:flex;
}

.left-container > div{

border: 1px #ccc solid;
padding: 10px;
}

.middle-container{
display:flex;
flex-direction:column;
border: 1px #ccc solid;
width:100%;
}

.middle-container > div{
border: 1px #ccc solid;
margin: 0px 0px 5px 0px;
}

.search-box{
order:1;
}
.tools-box{
order:2;
}

DISPLAY

Display

user_140046540

There, only changed in your HTML

<body>
    <div class="left-container">
        <div class="icon-box">
            <h3> google </h3>
        </div>
        <div class="icon-box">  <!-- HERE -->
            <div class="middle-container">
                <div class="search-box">
                    <h1>search</h1>
                </div>
            </div>
            <div class="middle-container">
                <div class="tools-box">
                    <h1>tools</h1>
                </div>
            </div>
        </div>
    </div>
    <div class="right-container">
    </div>
</body>

NOTE:

Try to name your CSS classes meaningfully, and don't repeat them when they have different names but same attributes actually, so for example: .left-container & .middle-container are the same, why don't you just call them row, same for your .search-box & .tools-box, why don't you call them col.

In my case i just renamed the classes until i solve this out, and i was like, so we've got a row with 2 columns, and inside the second column, we've got 2 rows, each row has 1 column inside of it, and that was it!

Another NOTE:

If you want to make the search & tools stretch to the end, just wrap them with a col class. (in your case just change icon-box in your html to either search-box or tools-box). I added a comment next to it, it says "HERE".

Hope this helped.

user_102420470

If you gave the body tag the display: flex; property, it should put Google and (tools + search) on the same line. Should give you something like this, enter image description here

user_141605520
Related