Parent element (container)

The Flex container will be scalable by setting the display property to flex:

.flex-container {
  display: flex;
}
Copy the code

The flex – direction attribute

The Flex-direction property defines the direction in which the container stacks flex items.

Column values set vertically stacked Flex items (from top to bottom) :

.flex-container {
  display: flex;
  flex-direction: column;
}
Copy the code

Column-reverse values stack flex items vertically (but from bottom to top) :

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}
Copy the code

Row values stack flex projects horizontally (left to right) :

.flex-container {
  display: flex;
  flex-direction: row;
}
Copy the code

Row-reverse values stack flex items horizontally (but from right to left) :

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}
Copy the code

The flex – wrap attributes

The flex-wrap property specifies whether the Flex project should be wrapped. The following example contains 12 Flex projects to better demonstrate the Flex-wrap attribute.

The wrap value specifies that the Flex project will be wrapped if necessary:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
Copy the code

The nowRAP value specifies that flex projects will not be wrapped (default) :

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}
Copy the code

The wrap-reverse value specifies that elastic items will be wrapped in reverse order if necessary:

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}
Copy the code

The flex – flow properties

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

.flex-container {
  display: flex;
  flex-flow: row wrap;
}
Copy the code

The justify – content attribute

The justify-content attribute is used to align flex projects:

centerValues will beflexItems aligned in the center of the container:

.flex-container {
  display: flex;
  justify-content: center;
}
Copy the code

The flex-start value aligns flex items at the beginning of the container (default) :

.flex-container {
  display: flex;
  justify-content: flex-start;
}
Copy the code

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

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

Space-around values show Flex projects with Spaces before, between, and after rows:

.flex-container {
  display: flex;
  justify-content: space-around;
}
Copy the code

The space-between value displays flex projects with Spaces between rows:

.flex-container {
  display: flex;
  justify-content: space-between;
}
Copy the code

The align – the items property

The align-items property is used to align Flex items vertically.

The center value aligns the Flex items in the middle of the container:

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}
Copy the code

The flex-start value aligns the Flex items at the top of the container:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}
Copy the code

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

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}
Copy the code

Stretch flex project to fill container (default) :

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}
Copy the code

Baseline values align the Flex project baseline:

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}
Copy the code

The align – content attribute

The align-content property is used to align elastic lines (applied in a side-axis direction, similar to precy-content).

Space-between values display elastic lines with equal spacing:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}
Copy the code

Space-around values show elastic lines with Spaces before, between, and after them:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}
Copy the code

Stretch to occupy the remaining space (default) :

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
}
Copy the code

The center value shows the elastic line in the middle of the container:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}
Copy the code

The flex-start value displays an elastic line at the beginning of the container:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}
Copy the code

The flex-end value displays an elastic line at the end of the container:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}
Copy the code

Child element (item)

The immediate child of a Flex container automatically becomes an elastic (Flex) item.

The above elements represent four blue Flex projects within a gray Flex container.

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div> 
  <div>4</div>
</div>
Copy the code

Attributes used for elastic projects are:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

Order attribute

The ORDER property specifies the order of flex items.

The first Flex item in your code does not have to show up as the first item in the layout. The order value must be a number. The default value is 0.

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>
Copy the code

The flex – turns up properties

The Flex-grow property specifies how much one Flex project will grow relative to the rest of the Flex projects.

Make the third elastic item grow eight times faster than the other elastic items:

<div class="flex-container">
  <div style="flex-grow: 1">1 flex-grow: 1">2 flex-grow: 8">3 Copy the code

The value must be numeric, and the default is 0.

The flex – the shrink properties

The Flex-shrink attribute specifies how much a Flex project will shrink relative to other Flex projects.

Don’t let the third flex item shrink as much as the other flex items:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>
Copy the code

The value must be numeric, and the default is 0.

The flex – the basis properties

The Flex-basis property specifies the initial length of a Flex project.

Set the initial length of the third elastic item to 200 pixels:

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

       4
      
 Copy the code

Flex properties

The Flex property is a shorthand for the Flex-grow, Flex-shrink, and Flex-basis properties.

The align – self properties

The align-self property specifies the alignment of the selected objects in the elastic container. The align-self property overrides the default alignment set by the container’s align-items property.

Align the third elastic item in the middle of the container:

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

The CSS Flexbox properties

attribute describe
display Specifies the type of box used for HTML elements.
flex-direction Specify the direction of elastic items in elastic containers.
justify-content Align elastic items horizontally when they do not use all available space on the spindle.
align-items Align items vertically when elastic items do not use all available space on the main axis.
flex-wrap Specify whether elastic items should be wrapped if there is not enough space on a Flex line to accommodate them.
align-content Modify the behavior of the flex-wrap property. Similar to align-items, but instead of aligning elastic items, it aligns flex lines.
flex-flow Short properties for flex-direction and flex-wrap.
order Specifies the order of elastic items relative to other elastic items in the same container.
align-self For flexible items. Overrides the align-items property of the container.
flex Short properties for flex-grow, flex-shrink, and flex-basis properties.