CSS - Brief Guide on Flexbox Layout - Part 1

#webdev #beginners #tutorial #css

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.

Introduction to Flexbox
Flex Container
- Flex Container Properties

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.

(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;
}

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

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

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

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

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.