CSS Flex Layout

CSS Flexible Box Layout makes it easier to design flexible responsive layout structure without using float or positioning. A flexible box aligns all its child elements from left to right of the viewport unless the child elements have some width set. To use the flexbox model, you should set a flexible container first. Set the child items width as 100% which will force the child items take up as much width as possible.

Here is an example of a flexbox

<div class="flex">
  <div>Flexbox 1</div>
  <div>Flexbox 2</div>
  <div>Flexbox 3</div>
</div>

<style>
.flex{
  display: flex;
  margin: 0 -15px;
} 
.flex div{
  padding: 100px 0;
  text-align: center;
  color: #fff;
  background: #151f28;
  margin: 0 15px;
  width: 100%;
}  
</style>

CSS Flex Properties

You can use a number of CSS properties along with CSS flex which are as follows.

1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content

CSS Flex Flex-direction

CSS property flex-direction defines the direction in which flex items are aligned to each other.

CSS Flex Flex-direction Options

1. column - aligns the flext items vertically from top to bottom.
2. column-reverse - aligns the flext items vertically in reverse order from top to bottom.
3. row - aligns the flext items horizontally from left to right.
4. row-reverse - aligns the flext items horizontally in reverse order from left to right.

.flex{
  display: flex;
  flex-direction: row;
}

CSS Flex Flex-wrap

CSS property flex-wrap defines whether the flex items should be forced to be resized and aligned within a row or take up its defined width.

CSS Flex Flex-wrap Options

1. wrap - wraps flex items if necessary.
2. nowrap - prevents flex items from wrapping. (Default)
3. wrap-reverse - wraps flex items in reverse order if necessary.

.flex{
  display: flex;
  flex-wrap: wrap-reverse;
}

CSS Flex Flex-flow

CSS property flex-flow is a shorthand property for flex-direction and flex-wrap combined.

.flex{
  display: flex;
  flex-flow: row wrap;
}

CSS Flex Justify-content

CSS property justify-content is used to align flex items inside the flex container horizontally. This only works when the total width of the flex items is less than the total width of the container.

CSS Flex Justify-content Options

1. center - aligns flex items horizontally at the center of the container.
2. flex-start - aligns flex items horizontally at the top of the flex items.
3. flex-end - aligns flex items horizontally at the bottom of the container.
4. space-around - aligns flex items by splitting empty space equally in and around the flex items.
5. space-between - aligns flex items by splitting empty space equally between the flex items.

.flex{
  display: flex;
  justify-content: center;
}

CSS Flex Align-items

CSS property align-items is used to align flex items vertically. The height of the flex container must be larger than the height of the flex items to use this property.

CSS Flex Align-items Options

1. center - aligns flex items in the middle of the container.
2. flex-start - aligns flex items at the top of the container.
3. flex-end - aligns flex items at the bottom of the container.
4. stretch - stretches flex items to fill the container. (Default)
5. baseline - aligns flex items such as their baselines aligns.

.flex{
  display: flex;
  height: 200px;
  align-items: baseline;
}

CSS Flex Align-content

CSS property align-content is used to align the flex lines. It is highly useful to split vertical spacing between flex items when flex container has more than one row of flex items.

space-between - displays the flex lines with equal space between them.

space-around - displays the flex lines with space equally split before, between and after them.

stretch - stretches the flex lines to take up the remaining space. (Default)

center - displays the flex lines in the middle of the container.

flex-start - displays the flex lines at the start of the container.

flex-end - displays the flex lines at the end of the container.

.flex{
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}

CSS Flex Items

Flex items support a few flex properties which are listed below.

1. order
2. flex-grow
3. flex-shrink
4. flex-basis
5. flex
6. align-self

CSS Order

CSS order property defines the order of the flex items. The order value must be a number and the default value is 0.

<div class="flex">
  <div>1</div>
  <div>2</div>
  <div style="order: 2">3</div>
</div>

CSS Flex-grow

CSS flex-grow property defines the width a flex item will take up in comparision to the rest of the flex items. The value must be a number and the default value is 0.

<div class="flex">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 4">3</div>
</div>

CSS Flex-shrink

CSS flex-shrink property defines if a flex item should shrink in comparision to the rest of the flex items. The value must be a number and the default value is 1.

<div class="flex">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>  
</div>

CSS Flex-basis

CSS property flex-basis defines the initial length of a flex item.

<div class="flex">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
</div>

CSS Flex

CSS property flex is a shorthand property for CSS properties flex-grow, flex-shrink and flex-basis combined.

<div class="flex">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

CSS Align-self

CSS property align-self defines the alignment for the flex item. It overrides the default alignment set by the container's align-items property.

<div class="flex">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

---

Try It Yourself »

---

0 Like 0 Dislike 0 Comment Share Tweet