Skip to main content

CSS-Flex

CSS-flex specifies whether flex items are forced into a single line or wrapped across multiple lines. The flex-wrap property enables you to control the direction in which lines are stacked. It is used to specify whether flex items inside the flex container should be single-line or multi-line.

CSS Flex container​

This is a flexbox component that defines the ancestor element's properties by setting its display to flex or inline-flex.

Flex Container Properties​

Properties related to a flex container.

  • flex-direction property
  • flex-wrap property
  • flex-flow property
  • justify-content property
  • align-items property
  • align-content property

Flex-Direction Property​

There will be two direction row and column Default direction of flex will be row, we can change it to column by using following syntax:

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

The justify-content Property​

The CSS justify-content property specifies how the browser distributes space between and around content items along a flex container's main axis and a grid container's inline axis.

/* Positional alignment */
justify-content: center;     /* Pack items around the center */
justify-content: start;      /* Pack items from the start */
justify-content: end;        /* Pack items from the end */
justify-content: flex-start; /* Pack flex items from the start */
justify-content: flex-end;   /* Pack flex items from the end */
justify-content: left;       /* Pack items from the left */
justify-content: right;      /* Pack items from the right */

/* Baseline alignment */
/* justify-content does not take baseline values */

/* Normal alignment */
justify-content: normal;

/* Distributed alignment */
justify-content: space-between; /* Distribute items evenly
                                  The first item is flush with the start,
                                  the last is flush with the end */
justify-content: space-around;  /* Distribute items evenly
                                  Items have a half-size space
                                  on either end */
justify-content: space-evenly;  /* Distribute items evenly
                                  Items have equal space around them */
justify-content: stretch;       /* Distribute items evenly
                                  Stretch 'auto'-sized items to fit
                                  the container */

/* Overflow alignment */
justify-content: safe center;
justify-content: unsafe center;

/* Global values */
justify-content: inherit;
justify-content: initial;
justify-content: revert;
justify-content: revert-layer;
justify-content: unset;

The align-items Property​

It is used to align flex elements.

  • align center is used to fix flex items in middle of the container
.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}
  • The flex-start value aligns the flex items at the container's top:
.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}
  • The flex-end value aligns the flex items at the bottom of the container:
.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}