CSS Flexbox Introduction

❮ Previous Home Next ❯

In this chapter you will learn the following flexbox properties:

Flex containers


A flex container establishes a new flex formatting context for its contents.

And this is the same as establishing a block formatting context, except that flex layout is used instead of block layout.


selector {
  display: flex | inline-flex;


.container {
  border: 2px dashed #0069FF;
  display: flex;
  padding: 10px;

.container > div {
  background-color: #0069FF;
  margin: 1px;
  text-align: center;
  font-size: 32px;


All CSS Flexbox Properties

Property Description
align-content Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.
align-items Sets the align-self value on all direct children as a group.
align-self Specifies the default alignment for items within the flex container.
display Specifies an element’s display type and can override an element’s defined presentation.
flex Sets how a flex item will grow or shrink to fit the space available in its flex container.
flex-basis Sets the initial main size of a flex item.
flex-direction Sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).
flex-flow A shorthand property for the flex-direction and the flex-wrap properties.
flex-grow Specifies the flex grow factor of a flex item's main size.
flex-shrink Sets the flex shrink factor of a flex item.
flex-wrap Sets whether flex items are forced onto one line or can wrap onto multiple lines.
justify-content Specifies the alignment between the items inside a flexible container when the items do not use all available space.
❮ Previous Home Next ❯