Flex With Flex Box 💪 😎 👊

When you initially create elements for a page, by default they appear stacked. You’ll see that the box of the element takes up the whole width of the page. You can tweak css properties or position elements with the position property to get your desired layout but this can become tedious work. Flex box can help with laying out elements in rows or columns. W3schools states, “The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without float or positioning.” In this blog I will demonstrate simple Flex properties that can help create layout for your UI.

Flex Container

#container{
    background-color: green;
    width: 100%;
    height: 100px;
    margin: auto;
    display: flex;
}

The display property set to flex, will identify the container as a flex container so you can utilize other properties to manipulate the way child elements take up space. Before you set your display property on the container element. Notice the elements are stacked on top each other. Once you set display to flex they will appear lined up in the container.

Axes of Flexbox

• Flexbox properties work based off two axes. The main axis, which children of the flex container are laid out. By default the main axis is horizontal but can be vertical depending on the setting of the flex-direction property that I will show in this blog. The cross axis is perpendicular to the main axis. It can be horizontal if the main axis is vertical or vertical if the main axis is horizontal.

Flex Container CSS Properties

#container{
    background-color: green;
    width: 100%;
    height: 100px;
    margin: auto;
    text-align: center;
    display: flex;
    flex-direction: row-reverse
}

Flex-direction by default is set to row. Which will align elements left to right. When setting it to row reverse it does the opposite as shown above.

#container{
    background-color: green;
    width: 100%;
    height: 250px;
    margin: auto;
    text-align: center;
    display: flex;
    flex-direction: column-reverse
}

flex-direction can be set to column which will position elements order first to last and top to bottom. column-reverse will do the opposite as shown above.

Make sure the height property accommodates how many elements will be placed on the page so that elements don't fall off. This is why I changed the height to 250px.

#container{
    background-color: green;
    width: 50%;
    height: 60px;
    margin: auto;
    text-align: center;
    display: flex;
    justify-content: space-evenly
}

The justify-content property is set to flex-start by default but here I use space-evenly. Justify-content can be used to give space between and around elements in the container. There are many values you can set to justify-content. Feel free to explore them!

Flex Child CSS Properties

#three {
flex-grow: 4
}

You can also set properties on children of the flex container. You can set flex-grow or flex-shrink to change the size of an element. Negative numbers cannot be used. There are many more properties you can use on children elements. Check out https://yoksel.github.io/flex-cheatsheet/ for more!

Conclusion

Flex box can make your page responsive to any screen size. Based on research iv'e read that they are best paired with grid systems to get the job done. By setting a containers css property display to flex. You can then use other properties to align child elements or space them out. You can even rearrange the order of child elements , grow them, shrink them, and many other techniques. If your interested in Flex Box, dig a little deeper because there is always more room to grow! Thank you for reading.