Designing Web Layouts with CSS and Flexbox/

...

/

Traditional Layouting - Solution with Flexbox

Traditional Layouting - Solution with Flexbox

In this lesson, we will learn to fix the traditional layouting problems with Flexbox.

We'll cover the following...

Writing our first Flexbox container

Let’s recall the code from the previous chapter:

<div class="container">
    <div class="col">
        First 
        <p>Lorem ipsum.</p>
    </div>
    <div class="col">Second</div>
    <div class="col">Third</div>
    <div class="col">Fourth</div>
    <div class="col">Fifth</div>
    <div class="col">Sixth</div>
</div>
.container { 
  margin: 50px; 
  padding: 0; 
  font-size: 0;
}
.col { 
  display: inline-block; 
  border: 2px solid black; 
  width: 33.33%; 
  box-sizing: border-box; 
  margin: 0 auto; 
  height: 100px; 
  background-color: lightblue;
  font-size: 16px;
}

After removing the fixes to glue the individual elements together, our layout falls apart:

.container { 
  margin: 50px; 
  padding: 0; 
}
.col { 
  width: 33.33%; 
  border: 2px solid black; 
  box-sizing: border-box; 
  margin: 0 auto; 
  height: 100px; 
  background-color: lightblue; 
}

As expected, without the inline-block display mode, the six divs become blocks, occupying the whole row.

...