You can basically flex your shuttles to develop layouts without worrying about the magic property float. But there has been no special to remember the flex properties, the development of baidu or the meaning of the properties, slightly less professional [Wang Chai]. Just take the time to summarize each of these attributes and fill in the gaps.

The overview

Here’s a detailed description of what each attribute does, in the order shown above, and with reference to the W3C code structure:

<! DOCTYPE html><html>
<head>
<style>/ / the parent element.flex-container {
  display: flex;
  flex-direction: row;
  background-color: DodgerBlue; } // child element.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

</body>
</html>
Copy the code

The overall structure of the code is the same as above, which is omitted in the introduction below.

Each attribute

flex

display: flex;

The parent element becomes a Flex layout and is a block-level element.

.flex-container {
  display: flex;
  background-color: DodgerBlue;
  margin: 10px;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

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

display: inline-flex;

The parent element becomes a Flex layout and is inline.

.flex-container {
  display: inline-flex;
  background-color: DodgerBlue;
  margin: 10px;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

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

Both elements will be displayed on the same line.

flex-direction

Display: flex/inline-flex -> parent element -> flex-flow: -> flex-direction: -> row

Row is the default value

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

In the horizontal direction from left to right, also determined that the main axis is horizontal.

Display: flex/inline-flex -> parent element -> flex-flow: -> flex-direction: -> row-reverse

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

In the horizontal direction from right to left, also determined that the main axis is horizontal.

Display: flex/inline-flex -> parent element -> flex-flow: -> flex-direction: -> column

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

They are arranged from top to bottom in the vertical direction, and the main axis is determined to be vertical.

Display: flex/inline-flex -> parent element -> flex-flow: -> flex-direction: -> column-reverse

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

They are arranged from bottom to top in the vertical direction, and the main axis is determined to be vertical.

For simplicity, the default axis of each attribute is horizontal for example

flex-wrap

Display: flex/inline-flex -> parent element -> flex-flow: ->flex-wrap: -> wrap

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

Wrap lines when you run out of space.

Display: flex/inline-flex -> parent element -> flex-flow: -> flex-direction: -> nowrap

Nowrap is the default value.

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

If there is not enough space to wrap a line, compression is performed by default.

Display: flex/inline-flex -> parent element -> flex-flow: -> flex-direction: -> wrap-reverse

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

Align horizontally from left to right with the cross axes in the opposite direction.

The default cross axis is vertical and runs from top to bottom. So if WE add wrap-reverse, we’re going from bottom to top.

flex-flow

Display: flex/inline-flex -> parent -> flex-flow:

Flex-direction and flex-wrap can be written together as flex-flow. Together, they determine the direction of the main axis and cross axis, from left to right (right to left) and from top to bottom (bottom to top).

.flex-container {
  display: flex;
  flex-flow: row-reverse wrap-reverse;
  background-color: DodgerBlue;
}
Copy the code

The main axis is horizontal, row-reverse from right to left, and wrap-reverse crosses the axis from bottom to top.

justify-content

Display: flex/inline-flex -> parent -> alignment of single-line elements -> (spindle – default horizontal direction) -content: -> center

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

The child element is centered

Display: flex/inline-flex -> parent -> alignment of single-line elements -> (spindle-default horizontal direction) -content: -> flex-start

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

The child elements are left-aligned and flex-start is the default.

Display: flex/inline-flex -> parent -> alignment of single-line elements -> (spindle-default horizontal direction) -content: -> flex-end

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

Child elements are justified to the right.

Display: flex/inline-flex -> parent -> alignment of single-line elements -> (spindle-default horizontal direction) -content: -> space-around

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

The child elements are evenly distributed, with twice as much space between the elements as between the sides.

Display: flex/inline-flex -> parent -> alignment of single-line elements -> (spindle-default horizontal direction) -content: -> space-between

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

The child elements are evenly distributed with no white space on either side.

Display: flex/inline-flex -> parent -> alignment of single-line elements -> (spindle – default horizontal direction) justify-content: -> space-instituted

.flex-container {
  display: flex;
  justify-content: space-evenly;
  background-color: DodgerBlue;
}
Copy the code

The child elements are really evenly distributed, and the whitespace is all the same.

align-items

Display: flex/inline-flex -> parent -> alignment of single line elements -> (cross axis – default vertical direction) align-items: -> center

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

The child element is centered vertically.

Display: flex/inline-flex -> parent -> alignment of single line elements -> (cross axis – default vertical direction) align-items: -> flex-start

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

The child element is vertical to the top.

Display: flex/inline-flex -> parent -> alignment of single line elements -> (cross axis – default vertical direction) align-items: -> flex-end

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

The child element is perpendicular to the bottom.

Display: flex/inline-flex -> parent -> alignment of single line elements -> (cross axis – default vertical direction) align-items: -> stretch

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

The child element is stretched vertically, and stretch is the default value.

Display: flex/inline-flex -> parent -> alignment of single line elements -> (cross axis – default vertical direction) align-items: -> baseline

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
  background-color: DodgerBlue;
}

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

Align according to the baseline font when font sizes are inconsistent.

align-content

Display: flex/inline-flex -> parent -> alignment of multi-line elements -> (cross axis – vertical direction) align-content: -> space-between

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

Vertical, evenly distributed, no gaps at the top and bottom.

Display: flex/inline-flex -> parent -> alignment of multi-line elements -> (cross axis – vertical direction) align-content: -> space-around

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

Vertical, evenly distributed, with white space at the top and bottom, half of the white space before the element.

Display: flex/inline-flex -> parent -> Alignment of multi-line elements -> (cross axis – vertical direction) align-content: -> space-instituted

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-evenly;
  background-color: DodgerBlue;
}
Copy the code

Vertical direction, really uniform distribution, blank all the same.

Display: flex/inline-flex -> parent -> alignment of multi-line elements -> (cross axis – vertical direction) align-content: -> stretch

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

Stretch is the default value for the remaining space occupied by vertical stretching.

Display: flex/inline-flex -> parent -> alignment of multi-line elements -> (cross axis – vertical direction) align-content: -> flex-start

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

Vertical, top aligned.

Display: flex/inline-flex -> parent -> alignment of multi-line elements -> (cross axis – vertical direction) align-content: -> flex-end

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

Vertical, bottom aligned.

order

Display: flex/inline-flex -> child element -> order

.flex-container {
  display: flex;
  background-color: #f1f1f1;
}

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

Order by order.

flex-grow

Display: flex/inline-flex -> child element -> flex- > flex-grow

.flex-container {
  display: flex;
  background-color: #f1f1f1;
}

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

Whether to stretch when free space is available. Default value: 0.

When multiple elements are set to flex-grow, the value represents the proportion of the extra space they need to increase.

flex-shrink

Display: flex/inline-flex -> subelement -> flex- > flex-shrink

.flex-container {
  display: flex;
  background-color: #f1f1f1;
}
.flex-container>div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3 
      
       4
       
      
       5
       
      
       6
       
      
       7
       
      
       8
       
      
       9
       
      
       10
      
 Copy the code

Indicates whether to compress when the space is insufficient. The default value is 1.

When more than one element is set to flex-shrink, the value represents the percentage of space to be reduced.

flex-basis

Display: flex/inline-flex -> child element -> flex-> flex-basis

.flex-container {
  display: flex;
  background-color: #f1f1f1;
}
.flex-container>div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis:200px">3 
      
       4
      
 Copy the code

The initial width of the main axis.

flex

Display: flex/inline-flex -> child element -> flex

Flex -grow, flex-shrink, flex-basis

.flex-container {
  display: flex;
  background-color: #f1f1f1;
}

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

align-self

Same as the align-items property, higher priority, overrides the parent element’s property.

.flex-container {
  display: flex;
  height: 200px;
  background-color: #f1f1f1;
}

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

The default is “stretch” and the 3 elements will be centered.

To give you a few 🌰

The card class

The text and text are vertically centered

Margin-left: auto; margin-left: auto; margin-left: auto; margin-left: auto; margin-left: auto; margin-left: auto; .

There’s a lot more to it, and basically Flex can do it.

The total

These are some of the most common flex properties (not all of them), so you can have a great time with them!

There are two main types of attributes: one determines the alignment direction (top to bottom, bottom to top, left to right, right to left), and one determines the alignment (center, top, bottom, etc.).

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Flex layout details

The overview

Each attribute

flex

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

order

flex-grow

flex-shrink

flex-basis

flex

align-self

To give you a few 🌰

The total

Flex layout details

The overview

Each attribute

flex

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

order

flex-grow

flex-shrink

flex-basis

flex

align-self

To give you a few 🌰

The total

Related Posts

Remember a real Webpack optimization experience

React SSR Practice (1)

Window The command cannot be found after Node/Yarn/Vue is installed