Create Classic Card Layout with Flexbox CSS
Tags: css, flexbox, ui, webdev
Published: 2019-06-25 20:55:36

---
title: Create Classic Card Layout with Flexbox CSS
published: true
description: 
tags: css, flexbox, ui, webdev
cover_image: https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80
series: flexbox
---

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:

![](https://thepracticaldev.s3.amazonaws.com/i/hyo4ouv2nf67fpe891ul.png)

## 1. Start with HTML skeleton

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


{% gist https://gist.github.com/vguleaev/926e8e2c1dff9e5f9ee9bc64009b6427 file=index.html %}

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

{% gist https://gist.github.com/vguleaev/29296f2808163bf45c8434f1a930fcc3 file=style.css %}

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

{% gist https://gist.github.com/vguleaev/e437f707691b6e66febc29c8b24dd8b5 file=index.html %}

Together with some styles

{% gist https://gist.github.com/vguleaev/9ef0e99169cfe2d9705ee0c41a017627 file=style.css %}

## 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`. 

```css
.row {
    display: flex;
}
```

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

```html
      <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:

![](https://thepracticaldev.s3.amazonaws.com/i/pzj1d9kn4k93c35bogoo.PNG)

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

```css
.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.


```html
      <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.

![](https://thepracticaldev.s3.amazonaws.com/i/oqc8zp9fzt1fhhmtjxer.PNG)

## 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.

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

```

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

![](https://thepracticaldev.s3.amazonaws.com/i/ktr05xi48o3eg8kq1lau.PNG)

## 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

```css

.details-container {
    flex: 2;
}

.avatar-container {
    flex: 1;
}

```

And html should look like this:

```html
      <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.

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

And now result is awesome! 

![](https://thepracticaldev.s3.amazonaws.com/i/kr4faqe4bklrmlr91kxg.PNG)

<hr/>

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

{% codesandbox flexbox-card-kz6bg %}

<hr/>

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