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
- When using Flexbox, there must be a container being outside the layout.
- I then, divided the layout into two-piece with <div>.
- 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.
- 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:
- 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: