DEV Community

Devwares profile image Sampson Ovuoba
Sampson Ovuoba for Devwares

Posted on • Originally published at devwares.com on

Tutorial: CSS Flexbox

CSS Flexbox

cover image

CSS Flexbox, or the Flexible Box Layout, is a layout model that allows responsive elements within a container to be automatically arranged depending upon screen size or view. This model provides an efficient way to layout, align, and distribute space among items in a container, even when their sizes are unknown or dynamic.

Basic Concepts

There are two fundamental concepts for Flexbox:

1. The Container: The container is the parent element in which flex items are enclosed. To use Flexbox, you need to set the display property of the container to flex or inline-flex.

.container {  display: flex;}
Enter fullscreen mode Exit fullscreen mode

2. The Items: The items are the children elements contained in the flex container. Flex properties are applied to these items.

Main Properties

Some of the main properties of the Flexbox layout include:

1.flex-direction: This property determines in which direction the container’s items will be arranged. The possible values are: row, row-reverse, column, column-reverse. For instance, flex-direction: row; will arrange items from left to right.

.container {  display: flex;  flex-direction: row;}
Enter fullscreen mode Exit fullscreen mode

2.justify-content: This property defines how the browser distributes space between and around content items along the main axis of a flex container. Possible values are: flex-start, flex-end, center, space-between, space-around, space-evenly. For instance, justify-content: center; will center the items.

.container {  display: flex;  justify-content: center;}
Enter fullscreen mode Exit fullscreen mode

3.align-items: This property sets the default alignment for items inside the flex container. It works similar to justify-content but in the perpendicular direction. Possible values are: flex-start, flex-end, center, baseline, stretch. For instance, align-items: center; will center the items.

.container {  display: flex;  align-items: center;}
Enter fullscreen mode Exit fullscreen mode

4.flex-wrap: By default, flex items will all try to fit onto one line. This property allows the items to wrap as needed with this property. For instance, flex-wrap: wrap; allows the items to wrap onto multiple lines.

.container {  display: flex;  flex-wrap: wrap;}
Enter fullscreen mode Exit fullscreen mode

5. flex-flow: This is a shorthand property for setting both the flex-direction and flex-wrap properties. For instance, flex-flow: row wrap; will arrange items from left to right and allow them to wrap onto multiple lines.

.container {  display: flex;  flex-flow: row wrap;}
Enter fullscreen mode Exit fullscreen mode

6.align-content: This property aligns a flex container’s lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. For instance, align-content: space-between; will distribute the space evenly between the lines.

.container {  display: flex;  align-content: space-between;}
Enter fullscreen mode Exit fullscreen mode

Flex Item Properties

Just as there are properties for the flex container, there are several properties that apply to the flex items. These include:

1.flex-grow: This property defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should fill up.

.item {  flex-grow: 1;}
Enter fullscreen mode Exit fullscreen mode

2.flex-shrink: This property defines the ability for a flex item to shrink if necessary.

.item {  flex-shrink: 2;}
Enter fullscreen mode Exit fullscreen mode

3. flex-basis: This property sets the initial main size of the flex item. It sets the size of the content box unless otherwise set with box-sizing.

.item {  flex-basis: 20%;}
Enter fullscreen mode Exit fullscreen mode

4. flex: This is a shorthand property for setting flex-grow, flex-shrink, and flex-basis at the same time.

.item {  flex: 0 1 auto;}
Enter fullscreen mode Exit fullscreen mode

5.align-self: This property allows an item to override the align-items value from its parent. For instance, align-self: flex-end; will align the item at the end of the container.

.item {  align-self: flex-end;}
Enter fullscreen mode Exit fullscreen mode

Using Flexbox

Here's an example of how to use these properties in a real-world scenario:

.container {  display: flex;  justify-content: space-between;}
.item {  flex-grow: 1;  flex-basis: calc(100% / 3);  margin: 0 1em;}
Enter fullscreen mode Exit fullscreen mode

In this example, we've created a flex container with three items. The items will evenly distribute themselves with equal space around them. Each item will take up a third of the container's width, minus a little bit for margin.

Flexbox is a versatile tool that can significantly simplify your CSS. It's worth learning and using in your projects to make your layouts more flexible and intuitive

Order Property

The order property can be applied to individual flex items. This property takes an integer value and determines the order in which the flex items appear within the flex container. The default value is 0.

.item {  order: 2;}
Enter fullscreen mode Exit fullscreen mode

Flexibility

The flex property is a shorthand for setting the flex-grow, flex-shrink, and flex-basis properties at the same time. The flex property may have one, two, or three values. A value of auto for flex is equivalent to 1 1 auto. A value of none for flex is equivalent to 0 0 auto.

.item {  flex: 1 0 20%;}
Enter fullscreen mode Exit fullscreen mode

Responsive Design with Flexbox

One of the major advantages of Flexbox is its ability to create responsive designs without relying on media queries.

For example, by setting the flex-wrap property to wrap, the flex container becomes a multi-line flex container. This means that if there isn't enough space for all items to fit on one line, the items will automatically move to a new line.

.container {  display: flex;  flex-wrap: wrap;}
Enter fullscreen mode Exit fullscreen mode

In combination with the flex-grow, flex-shrink, and flex-basis properties, Flexbox provides a powerful toolset to create responsive designs that adapt to different screen sizes and orientations.

Contrast

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc. project with a clean, prebuilt and well documented template and UI components. Learn more about contrast.

Resources

Top comments (0)

Read next

bilelsalemdev profile image

The Builder Pattern in TypeScript

bilel salem -

nadim_ch0wdhury profile image

How to create Complete/Proper & fully functional Chatting Mobile App with React Native?

Nadim Chowdhury -

fernandomullerjr profile image

Comandos Linux para Redes: Um Guia Completo para DevOps

Fernando Muller Junior -

receipt_bot profile image

Help Us Improve Efficiency!

ReceiptBot -