Jump to main content

Flexbox

Mobile first columns with minimal markup! CSS Flexbox is now well-supported by all modern web browsers and drastically reduces the amount of code (and frustration) required to build column or grid layouts. This example starts with the content blocks stacked vertically on smaller screens. If the screen width exceeds the width of the breakpoint (768px) the Flexbox layout gets applied, to display the three columns on a single row. There are many properties and values governing the layout of Flexbox containers, so this example here could be expanded much further. Most frontend frameworks also include their own grid systems.

Example

Column One
Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt, sapiente accusantium modi illo vel maiores! Error nesciunt, consequuntur consequatur non ipsam deleniti eum velit adipisci repellendus quod, rem aspernatur dolorum?
Column Two
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore id inventore soluta earum. Culpa ipsam soluta magnam accusamus quos aperiam nisi mollitia, sapiente perferendis iure ex. Molestias omnis corporis ipsa!
Column Three
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt quis obcaecati nulla cum, saepe deleniti nam, praesentium reiciendis maiores natus inventore quae harum provident, quam minus ratione temporibus?

HTML & PHP 

<div id="my_container">
  <div class="my_flexbox_item">
    <strong><?php webyep_shortText("Col 1", false, 550, 240); ?></strong>
    <div><?php webyep_longText("Col 1 Content", false, "", true, 600, 400); ?></div>
  </div>
  <div class="my_flexbox_item">
    <strong><?php webyep_shortText("Col 2", false, 550, 240); ?></strong>
    <div><?php webyep_longText("Col 2 Content", false, "", true, 600, 400); ?></div>
  </div>
  <div class="my_flexbox_item">
    <strong><?php webyep_shortText("Col 3", false, 550, 240); ?></strong>
    <div><?php webyep_longText("Col 3 Content", false, "", true, 600, 400); ?></div>
  </div>
</div>

CSS

#my_container {
  margin-bottom: 1.5rem;
}

.my_flexbox_item {
  margin: 0.5rem 0;
}

@media screen and (min-width: 768px) {
  #my_container {
    display: flex;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
  }

  .my_flexbox_item {
    margin: 0 0.5rem;
  }
}

Javascript