DEV Community

Cover image for CSS - Brief Guide on Flexbox Layout - Part 1
Tanwa Sripan
Tanwa Sripan

Posted on

CSS - Brief Guide on Flexbox Layout - Part 1

Hello everyone! 👋 Last time I wrote about Grid Box layout, so I will write about Flexbox layout and I will tell you what I know.

Table of Contents

  1. Introduction to Flexbox
  2. Flex Container

Introduction to Flexbox

To flex or not to flex, that is the question! I think that Flexbox is really useful when you want to build a responsive website. Flexbox gives you the power to lay out elements the way you want and easily align elements on your web pages and components. It is really easy to center things when you use Flexbox, I will show you how soon. Moreover, Flexbox allow you change the widths and heights of the Flex Items so that it fits the available spaces, this is why it is good for responsive design. Flexbox deals with directional flow of the Flex Items, whether it be row or column direction, so it can be said that Flexbox is a one-dimensional layout.

The below image shows the main concept of how Flexbox lay out it's Flex Items base on the flow direction. Note: the main and cross axis switch when you change the flow direction.
Main and Cross Axis of Flexbox
(Credit: main and cross axis image - css-tricks)

(Story time: when I was interning, I worked on responsive design for an old website, and this website was built before flexbox so I had to do a lot of media queries and changing widths and paddings...😫 However, now with my own projects, flexbox makes it so much easier.)

Flex Container

Anyway, to begin using Flexbox, just slap display: flex on your container element, this element will now be known as the Flex Container, and all the immediate children of this element will be known as Flex Items.

There are many Flex Container CSS properties that will allow you to move the Flex Items about, lets take a look at them.

As always, I will show some examples with the properties but you really do learn best when you try it out yourself. Lets start with some basic set up, a Flex Container with defined size, and display: flex on it. You will notice that, each of the Flex Items loses it's block property and are now lined up in a row next to each other.


.flex-container {
  width: 400px;
  height: 400px;
  outline: 1px solid black;
  display: flex;
}

.flex-item {
  width: 60px;
  height: 50px;
  outline: 1px solid black;
}

Enter fullscreen mode Exit fullscreen mode

Flexbox container

Flex Container Properties

The properties I will talk about are flex-direction, flex-wrap, justify-content, align-items, align-content and gap.

There is a bit of a pattern when you start using Flexbox, so don't worry if you can't remember them, you can always look them up or just test them using the DevTool.

  • flex-direction determines which direction you want the Flex Items to flow, row (default), row-reverse, column or column-reverse.

Example of changing the flex-direction

Flex Direction

  • flex-wrap determines if you want the Flex Items to wrap when there's no more room, the default is no-wrap. Options are wrap, no-wrap and wrap-reverse. This will cause shrinking or overflow if no-wrap is set, depending on the size of the Flex Items.

Example of changing the flex-wrap

Flex Wrap

  • justify-content allow you to move the Flex Items and align them on the main axis (horizontal if direction is rows, vertical if direction is column). You can align it to the beginning flex-start or end with flex-end. Or if you want to center it, you can use center. You can also space them out using space-evenly, space-around, and space-between.

Example of changing the justify-content

Flex justify

  • align-items allow you to move the Flex Items and align them on the cross axis (vertical if direction is rows, horizontal if direction is column). You can align it to the beginning flex-start or end with flex-end. Or if you want to center it, you can use center. You can also set it to stretch and take up all of the remaining space of the cross axis (when no width/height is set on the Flex Item).

Example of changing the align-items and justify-content

Flex align

  • align-content allow you to move the Flex Container lines and align the Flex Container Rows or Columns if there are additional space. (I don't use this often so I can't explain it very well) 😩.

Example of changing the align-content

Flex align-content

  • gap set row-gap and column-gap, just like Grid box.

Summary

Now you know how to start using Flexbox. You can design responsive components and pages, as well as aligning content with justify-content, align-items and align-content. You can also define flow directions and the wrapping behaviour of the flex items using flex-direction and flex-wrap. Just remember, the two axes are called "main" and "cross", which changes depending on the direction.

(Bonus: Flex Items themselves can also be Flex Container, just put display: flex on it and you can use all the Flex Container properties.)

That's all for today, I wanted to keep my post short and digestible. Next time, I will talk about Flex Items properties and how you can play around with them. As always, please leave comments if you find this helpful, or confusing or just general feedback 😀. If you prefer other resources you can try W3School where they have interactive examples or MDN Docs for a more detailed explanation of Flexbox.

Nishinoya

Top comments (2)

Collapse
 
alex_chivers_d23e6aea3e55 profile image
Alex Chivers

+10000 points for the nishinoya pic today pp

Collapse
 
maggie_chivers_4d36951288 profile image
Maggie Chivers

So informative! Great work 👌