Flex Layout

Once the parent element is set to display: flex; This parent element is called the Flex container. All of its child elements automatically become members of the container and become Flex projects, called projects for short.The container has two axes by default: a horizontal axis and a horizontal cross axis. The starting position of the horizontal spindle is shown as main start, and the end position is called main end. The cross axis starts at cross start and ends at Cross end. By default, items are arranged along the main axis.

Common Flex layout container properties

Let me just write a few elements

  <div class="father">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
Copy the code

Give me the style

.father {
  width: 800px;
  height: 800px;
  border: 1px solid #000;
}
.father div {
  width: 300px;
  height: 200px;
  font-size: 100px;
  line-height: 200px;
  text-align: center;
}
.father .item:nth-child(1) {
  background-color: red;
}
.father .item:nth-child(2) {
  background-color: green;
}
.father .item:nth-child(3) {
  background-color: blue;
}
Copy the code

To get here

dispaly: flex

.father {
  width: 800px;
  height: 800px;
  border: 1px solid #000;
  display: flex;
}
Copy the code

Flex-direction: determines the direction of the spindle (default: row)

The attributes are: row column row-reverse column-reverse

Change the main axis flex-direction: column

.father {
  width: 800px;
  height: 800px;
  border: 1px solid #000;
  display: flex;
  flex-direction: column;
}
Copy the code

Change the spindle direction to flex-direction:row-resever;

Flex-wrap: Whether to wrap (default: no line wrap)

Look carefully at the initialization Settings. Father width (800px) is less than three. Item width (900px)

Flex-wrap has properties like wrap (wrap) nowrap (not wrap)

After the set up

  flex-wrap: wrap;
Copy the code

Flex-flow (a combination of flex-direction and flex-wrap)

Flex-flow takes two arguments: flex-direction and flex-wrap

For example,

flex-flow: column wrap-reverse;
Copy the code

Illustration-content: Defines how items are sequenced on the main axis

The property-content properties are

  1. The flex – start left alignment
  2. The flex – end right alignment
  3. Center in the middle
  4. The space-between ends are aligned
  5. The space-around gap is twice as large as the gap at both ends

Here, change the width of the three items to make it more intuitive to see the variability-content property

.father .item:nth-child(1) {
  width: 100px;
  background-color: red;
}
.father .item:nth-child(2) {
  width: 200px;
  background-color: green;
}
.father .item:nth-child(3) {
  width: 100px;
  background-color: blue;
}
Copy the code

Change the.father property to justify-content to space-between

justify-content:space-between;
Copy the code

Align-items: Defines the alignment of items on the cross axis.

Attributes are

  1. Flex-start: Alignment of the starting point of the cross axes.
  2. Flex-end: alignment of ends of crossed axes.
  3. Center: Alignment of the midpoint of the cross axis.
  4. Baseline: The baseline alignment of the first line of text of the project.
  5. Stretch (default) : If the height is not set or auto is set, the project will occupy the entire height of the container.

For example, set align-items to Center

When the height of the item is not set and align-items are not set (because the default is stretch)

Align-content defines the alignment of multiple axes. This property has no effect if the project has only one axis.

To work with flex-wrap: wrap uses the same settable property value as context-content

For example, align-content:flex-end; (Set the width of the item to 300px)

flex-wrap: wrap;
align-content: flex-end;
Copy the code

Project level medium method

This assumes that only one project remains

  1. The most simple
  justify-content:center;
  align-items:center;
Copy the code
  justify-content:center;
  flex-wrap: wrap;
  align-content:center;
Copy the code

Common project attributes

Write the page briefly

  <div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
  </div>
Copy the code

The initial style

.box {
  height: 800px;
  width: 1000px;
  border: 1px solid #000;
  display: flex;
}
.box .item {
  width: 200px;
  height: 100px;
  border: 2px solid darkgoldenrod;
  background-color: darkcyan;
  margin-right: 10px;
  margin-bottom: 10px;
  font-size: 30px;
  color:black
}

Copy the code

rendering

Order defines how items are arranged the smaller the number, the further forward the order

The value of order is constant

Here, the second item has an order value of 1

  .item:nth-child(2){
     order: 1;
  }
Copy the code

. The order in item is 2

    order: 2;
Copy the code

Flex-grow defines the size of the child element with a default value of 0 to allow free space

There are only three projects to operate on

Flex-grow has a constant value meaning several times larger

I’m going to set the value here to 2

flex-grow: 2
Copy the code

Ps: the flex – turns up: 1; Will divide the remaining space equally

The default flex-shrink ratio is 1

Here we restore nine items

A constant value of 0 means no shrinking

For example,

.item:nth-child(2){
    flex-shrink: 0;
  }
Copy the code

Flex-basis: Defines how much space an item occupies on the main axis

What is the value of px

This reduces the project to three flex-basis Settings for the second project

.item:nth-child(2){ lex-basis: 500px; ! [](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4edd0f4023c7411a9291cfd26d8ea88b~tplv-k3u1fbpfcp-watermark.image) }Copy the code

Attribute flex

flex:flex: auto; The equivalent of

flex-grow: 1 flex-shrink: 1 flex-basis: auto
Copy the code

flex: none; The equivalent of

flex-grow: 0 flex-shrink: 0 flex-basis: auto
Copy the code

flex:1; The equivalent of

flex-grow: 1 flex-shrink: 1 flex-basis: 0%
Copy the code