Create Classic Card Layout with Flexbox CSS

Hello dear coder, welcome to my tech articles series dedicated to CSS and Flexbox. Prepare your keyboard for some codding!

Problem:

(You don't use use CSS very often or you always forget the basic layout tricks.)
You want to build a trivial card with header and two columns. Left column is a bit smaller for an avatar and right column is for any other details.
Let's learn it now and forever! (Sorry Bootstrap)

Here is a our UI mockup:

1. Start with HTML skeleton

Let's define core elements on a page. We will need a header, photo, and content.

Create a styles.css file in the same directory and add some colors to it

Now add more content inside inside it. We need a random image and some dummy text.

Together with some styles

2. Create layout using Flexbox

We want to make photo on the left and content on the right. In order to do it, let's create a class called row.

.row {
    display: flex;
}

Now wrap photo and content with a new div with class row.

      <div class="row">
        <div class="photo">
          <img class="img" src="https://picsum.photos/200" />
        </div>
        <div class="content">
          <h3>Joe Doe</h3>
          <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting
            industry. Lorem Ipsum has been the industry's standard dummy text
            ever since the 1500s, when an unknown printer took a galley of type
            and scrambled it to make a type specimen book.
          </p>
        </div>
      </div>

Your result should look like this:

Looks like we already did what we wanted. But don't need to hurry.

3. Divide row evenly

We want to separate row into two columns of the same size. Like we split row into two parts.

Create class column and wrap both photo and content with a new div

.column {
  flex: 1;
}

This bassicaly tells flex div to treat every element inside as even. So we will have row divided into two columns. If we create another class and change number to 2, one column will be bigger than another.

      <div class="row">
        <div class="column">
          <div class="photo">
            <img class="img" src="https://picsum.photos/200" />
          </div>
        </div>
        <div class="column">
          <div class="content">
            <h3>Joe Doe</h3>
            <p>
              Lorem Ipsum is simply dummy text of the printing and typesetting
              industry. Lorem Ipsum has been the industry's standard dummy text
              ever since the 1500s, when an unknown printer took a galley of
              type and scrambled it to make a type specimen book.
            </p>
          </div>
        </div>
      </div>

Now result looks a bit better, but still not perfect.

4. Adjust card for mobile view.

For now our row will be always inline. We need to wrap to that class another css property to make it wrap if it cannot be fitted as single line in the screen.

.row {
    display: flex;
    flex-wrap: wrap;
}

flex-wrap does the thing and at mobile view every column will be displayed as single rows.

5. Set photo smaller

Last thing we need to impove here is to make photo column always smaller than right one. This is because we know exact size of the photo. So photo should be always smaller than details content.

Add two more classes to wrap our main elements

.details-container {
    flex: 2;
}

.avatar-container {
    flex: 1;
}

And html should look like this:

      <div class="row">
        <div class="avatar-container">
          <div class="photo">
            <img class="img" src="https://picsum.photos/200" />
          </div>
        </div>
        <div class="details-container">
          <div class="content">
            <h3>Joe Doe</h3>
            <p>
              Lorem Ipsum is simply dummy text of the printing and typesetting
              industry. Lorem Ipsum has been the industry's standard dummy text
              ever since the 1500s, when an unknown printer took a galley of
              type and scrambled it to make a type specimen book.
            </p>
          </div>
        </div>
      </div>

Now it's better but photo container does't have enough space. We can use flex-basis property to setup initial size of this container.

.avatar-container {
    flex-basis: 250px;
}

And now result is awesome!

---

I really ❤️ codesandbox so I created a demo for you here. Enjoy!

---

🚀 If you read something interesting from that article, please like and follow me for more posts. Thank you dear coder! 😏

Comments

[Piero Sabino]

Hi,how can I adapt your example of classic card in flexbox on my web page as in the following photo