CSS Flexbox

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

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

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

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

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

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

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

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 take up.

.item {
  flex-grow: 1;
}

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

.item {
  flex-shrink: 2;
}

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

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

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

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

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

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

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

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.

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.