From 0 to 1: make a simple portfolio with CSS Flexbox

Flexbox has been wildly in making image gird, masonry layout and responsive design. This article provides three different usage of Flexbox. The final demo is a two-column portfolio without header and footer. If you have no ideas what Flexbox is, you can read this article for a better understanding of Flexbox later.

Here is the demo, and then let us start from the beginning.

At first, I used AdobeXd to make a draft layout. This is just the very first design for my personal portfolio, therefore it is not necessary to

create a fancy design here. I suppose that anyone who gets this template can add new features by themselves.

Step 1: Global layout

.html file

  • When using Flexbox, there must be a container being outside the layout.
  • I then, divided the layout into two-piece with <div>.

.css file

  • We initiate Flexbox with ‘display: flex;’ statement and set the direction to being horizontal.
  • So the images will be presented from left to right, moreover, ‘wrap’ means the elements are arranged in the same direction(left to right or top to down).
  • flex-basis is used to set the length of items. You can also type in “px”, “em” or any other length units allowed by the browser.

Step 2: Image grid

The image layout I used is based on Adaptive Photo Layout with Flexbox by Tim Van Damme.

Here I mention two points about my modification:

  • Tim uses the ‘flex’ properties(as a shorthand) which I think it is too confusing for people who are not familiar with Flexbox.
  • For preventing the uncontrolled problem, he added an empty <li> at the end of his layout. I deleted this line of code in my design.

.html file

.css file

  • We already declared the ‘display: flex;’ in the flex container outside. Why we have to do that again?
  • Well, the browser only applies the first layer inside the container as a Flexbox. So if you want to set other layers’ elements to present Flexbox properties, you have to add ‘display: flex;’ again.
  • flex-grow set all images(the <li> items) to fill(or grow) the space. Here we set the value in all <li> equal to 1, which means the remaining space is given to all children.

Step 3: Responsive design

Our last step is to set up a mobile layout. Before we do anything for the container class which is outside the image grid and sidebar, the mobile layout is a mess.

We now need only one column, so the direction of Flexbox should be vertical.

We need to add a slice piece of code inside the @media:

.css file

  • We set flex-direction to column(vertically)
  • The browser will stack the flex items from top to bottom

Now, it looks right!

BTW, if you do not know, here is the way to remove remaining space:

Web development and more