Flexbox

Flexbox is a powerful layout mechanism in CSS that allows developers to create flexible and responsive layouts using a set of properties. It is a one-dimensional layout model that can be used to create complex, dynamic layouts with ease.

Flex Container

The flex container is the parent element that contains one or more flex items. To create a flex container, set the display property to flex or inline-flex.

.container {
  display: flex; /* or inline-flex */
}

Flex Items

Flex items are the child elements inside a flex container. They are laid out along the main axis of the container and can be arranged in any direction. By default, flex items stretch to fill the available space in the container.

.item {
  flex: 1; /* or any other value */
}

CSS that can be applied to the Container

display: flexbox | inline-flex
flex-direction: row | reverse | column | column-reverse
flex-wrap: nowrap | wrap | wrap-reverse
justify-content: flex-start | flex-end | center | space-between | space-around
align-items: flex-start | flex-end | center | baseline | stretch
align-content: flex-start | flex-end | center | space=between | space-around | stretch

CSS that can be applied to items/elements in the container

order: <integer>
flex-grow: <number> default 0
flex-shirk: <number> default 1
flex-basis: <lenght> | auto default auto
flex: none | [ <‘flex-grow’> <‘flex-shirk’>? || <‘flex-basic’>
align-self: auto | flex-start | flex-end | center | baseline | stretch

Flex-Direction

The flex-direction property controls the direction of the main axis of the flex container. The default value is row, which means that the main axis runs horizontally. Other values include column (vertical), row-reverse (horizontal reverse), and column-reverse (vertical reverse).

.container {
  flex-direction: row; /* or column, row-reverse, column-reverse */
}

When setting the parent element for Flexbox to display: flex. The children elements will automatically align left-to-right. The default value is nowrap.

With one line of code (flex-direction: column;) the child content now loads in columns (and not a row).

Flex-Direction = Row-Reverse

Using Flex-Direction to Row-Reverse the order the row content loads.

Flex-Direction = Column Reverse

Using Flex-Direction to Column-Reverse the order the Column content loads.

Flex-Direction = Justify Content

The justify-content property controls the alignment of flex items along the main axis of the container. It can be used to distribute the available space between or around the items.

.container {
  justify-content: center; /* or flex-start, flex-end, space-between, space-around, space-evenly */
}

Maybe one of the most popular uses for Flex Direction. Justify Content to evenly load, or center, or set to the right or left. The Justify Content is a power layout tool.

Flex-Direction = Fix Align Items

The align-items property controls the alignment of flex items along the cross axis of the container. It can be used to align items at the top, center, or bottom of the container.

.container {
  align-items: center; /* or flex-start, flex-end, baseline, stretch */
}

Using the Cross Axis (top to bottom). The Fix Align Items is a powerful way to justify content and align items together.

• flex-start
• flex-end
• center
• baseline
• stretch (height must be set to auto).

Flex-Direction = Align Self

Align-self allows the alignment of a single item to be targeted and changed.

Flex Wrap

The flex-wrap property controls whether flex items should wrap or not when there is not enough space in the container. The default value is nowrap, which means that items will not wrap. Other values include wrap and wrap-reverse.

.container {
  flex-wrap: wrap; /* or nowrap, wrap-reverse */
}

Flex Wrap works to fit all elements in one row. Unless the Flex Wrap property is adjusted by the following.

flex-wrap: nowrap

• 1
• 2
• 3
• 4
• 5

flex-wrap: wrap

• 1
• 2
• 3
• 4
• 5

flex-wrap: wrap-reverse

• 1
• 2
• 3
• 4
• 5

Flex Flow

Flex flow combines to use of flex-direction and flex-wrap into the Flex Flow property.

• flex-flow: column wrap

Align Content with Flexbox

The align-content property controls the alignment of flex lines when there is extra space in the container. It can be used to distribute the extra space between or around the lines.

.container {
  align-content: center; /* or flex-start, flex-end, space-between, space-around, stretch */
}

Align Content uses the following options.

• align-content: flex-start
• align-content: flex-end
• align-content: center
• align-content: space-between
• align-content: space-around
• align-content: stretch

Vertically Centering with Flexbox

.parent {display:flex; align-items: center;}

Flexbox is a powerful layout mechanism that can be used to create flexible and responsive layouts with ease. By using the properties outlined above, developers can create complex layouts that adapt to different screen sizes and devices.