CSS Flexbox

The Flexible Box Layout Model, makes it easier to design flexible responsive layout structure without using float or positioning. Flexbox works with a parent container and its child elements.

CSS Flexbox

1. Main Axis and Cross Axis

The main axis is set by flex-direction property. The cross axis runs in the other direction to the main axis, so if flex-direction is row the cross axis runs along the column.

2. Flex Container

To create a flex container, changing the value of the display property to flex.

.flex-container {
  display: flex;
}

3. Direction of Items

The flex-direction property defines in which direction you want to stack the flex items. The default or initial value of flex-direction is row.

.flex-container {
  display: flex;
  flex-direction: column;
}

To change the direction, you can use one of the four values:

  • row
  • row-reverse
  • column
  • column-reverse

4. Space Used by Flex Items

The flex property controls how much space an item takes inside a flex container. It is a shorthand property that combines three other properties:

  • flex-grow: It defines how much a flex item should grow compared to other items when there is extra space available.
  • flex-shrink: It controls how much a flex item should shrink when there is not enough space in the container.
  • flex-basis: It defines the initial size of the flex item before extra space is distributed.

Using flex: 1, all items take equal space. It means all items have zero size (flex-basis: 0), therefore all the available space in the flex container is to be distributed. All items will grow equally (flex-grow: 1) and the space is shared equally.

Using flex: auto, items take different sizes, as the space that is shared between the items is shared out after each item is laid out as max-content size. So a large item will gain more space.

5. Ordering Flex Items

The order property controls the visual order of flex items inside a flex container. It allows you to change the display order of elements without changing the HTML structure. By default, flex items appear in the same order as they are written in the HTML.

Items with smaller order values appear first.

6. Alignment

Alignment controls how flex items are positioned and spaced inside a flex container. If you are working on the main axis then the properties begin with justify-. On the cross axis they begin with align-.

Main Axis Alignment

The justify-content property aligns flex items along the main axis. Its value can be:

  • flex-start (default)
  • flex-end
  • center
  • space-between
  • space-around
  • space-evenly

The justify-content property is used to align the flex items. For example,

.flex-container {
  display: flex;
  justify-content: flex-end;
}

The flex-start value aligns the flex items at the beginning of the container. The flex-end value aligns the flex items at the end of the container. The center value aligns the flex items at the center of the container. The space-around value displays the flex items with space before, between, and after the lines.

Cross Axis Alignment

The align-items property aligns flex items along the cross axis. Its value can be:

  • stretch (default)
  • flex-start
  • flex-end
  • center
  • baseline
.flex-container {
  display: flex;
  align-items: center;
}

The center value aligns the flex items in the middle of the container. The flex-start value aligns the flex items at the top of the container. The flex-end value aligns the flex items at the bottom of the container.