CSS flex property | Display Flex

The flex container becomes flexible by setting the display property to flex:

The flex container properties are:

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

A Flexible Layout must have a parent element with the display property set to flex. Direct child elements(s) of the flexible container automatically becomes flexible items.

<div class="flexContainer">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
----------------------------
.flex-container {
    display: flex;
}
.flexContainer > div {
  background-color: #f1f1f1;
  margin: 5px;
  padding: 5px;
  font-size: 14px;
}

The flex-direction Property

The flex-direction property defines in which direction the container wants to stack the flex items.

The column value stacks the flex items vertically (from top to bottom):

The column-reverse value stacks the flex items vertically (from bottom to top):

The row value stacks the flex items horizontally (from left to right):

The row-reverse value stacks the flex items horizontally (from right to left):

The flex-wrap Property

The flex-wrap property specifies whether the flex items should wrap or not. The examples below have 18 flex items, to better demonstrate the flex-wrap property.

The wrap value specifies that the flex items will wrap if necessary:

The nowrap value specifies that the flex items will not wrap (this is default):

The wrap-reverse value specifies that the flexible items will wrap if necessary, in reverse order:

The flex-flow Property

The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.

The justify-content Property

The justify-content property is used to align the flex items:

flex-start

The flex-start value aligns the flex items at the beginning of the container (this is default): The “align-items: flex-start;” aligns the flex items at the top of the container:

flex-end

The flex-end value aligns the flex items at the end of the container:

space-around

The space-around value displays the flex items with space before, between, and after the lines:

space-between

The space-between value displays the flex items with space between the lines:

The align-items Property

The align-items property is used to align the flex items. The “align-items: center;” aligns the flex items in the middle of the container:

flex-end

The flex-end value aligns the flex items at the bottom of the container: The align-items Property The “align-items: flex-end;” aligns the flex items at the bottom of the container:

stretch

The stretch value stretches the flex items to fill the container (this is default): The “align-items: stretch;” stretches the flex items to fill the container (this is default):

space-between

The space-between value displays the flex lines with equal space between them: The align-content Property The “align-content: space-between;” displays the flex lines with equal space between them:

center

The center value displays display the flex lines in the middle of the container: The align-content Property The “align-content: center;” displays the flex lines in the middle of the container:

justify-content

Set both the justify-content and align-items properties to center, and the flex item will be perfectly centered:

justify-content-between

Set both the justify-content-between and align-items properties to center, and the flex item will be perfectly centered:

---

Learn HTML/CSS from W3 School Website

• HTML/CSS