Using Flexbox for Web Pages That Are Easy On the Eyes

Just an hour ago I completed a small SPA or single page application using a rails api backend and a css and javascript frontend. This website is a a simple travel planner and journal which allows the user to plan trips and add photos and text entries as they are traveling. As I was creating this page I took special care to format it nicely in css so that it would be pleasant for the viewer. At the bottom of my main display page I wanted to display each trip as a card with an image, title, and dates of travel. To do this I used flexbox.

#newTrip {
display: flex; 
...
}

Flexbox allows programmers to choose the direction in which new items are placed within the container. There are four directions to choose from: row, row-reverse, column, and column-reverse. Row adds from left to right, row-reverse from right to left, column from top to bottom, and column-reverse from bottom to top. Simply set flex-direction to your desired direction and your elements will add the way you like.

container {
flex-direction: row
}

For my project, I wanted cards to add from right to left, since this is the default direction, I did not need to use this feature. However, it is never the less a useful feature, and merits discussion.

Flexbox also allows you to set it to wrap content onto multiple lines when needed. Wrap lets you choose to wrap or wrap-reverse, wrapping from left to right and right to left respectively. Using wrap looks like this in code:

container{
flex_wrap: wrap
}

To align content within your container, flexbox offers another great feature: justify content. Justify content tells you content where to align with respect to the main axis of the container. This can be flex-start, flex-end, center, space-between, space-around, or space-evenly. These correspond to: left, right, center, evenly distributed across the whole line with the first item on the right margin and last item ending on the left, evenly distributed across the whole line with even space on each side of each item, and evenly distributes across the line. Here is the feature in use in my code:

#newTrip {
display: flex;
justify-content: center;
...
}

In summary, flexbox is a great way to flexibly and cleanly arrange series of elements on a web page in an organized manner!