CSS - two-column flexbox layout

0 points
Created by:

In this article, we would like to show you how to make a two-column flexbox layout in CSS.

CSS - two-column flexbox layout example
CSS - two-column flexbox layout example

Practical example

In this example, we present how to create two-column flexbox layout.

// ONLINE-RUNNER:browser;

<!doctype html>

      .container {
        height: 300px;
        background: #3085d6;
        border: 1px solid black;
        box-shadow: 3px 3px 20px 0px grey;

        display: flex;				  /*  <----- required        */
        flex-flow: column wrap;		  /*  <----- required        */
        justify-content: flex-start;  /*  <----- required        */

      .item {
        background: #ffc353;
        border: 1px solid black;
        border-radius: 5px;
        margin: 3px;
        height: 50px;
        text-align: center;
        line-height: 50px;

        max-width: 50%; /* <--- keeps two-column layout when you have only 1 item  */

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

Alternative titles

  1. CSS - two-column flex container example
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

CSS - Flexbox

Native Advertising
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂