preface

Flex has been around ever since. I feel like an idiot every time I use it. Let’s clean up the Flex layout today

The body of the

Learn flex layout

An element with a Flex layout is called a container, and its child elements are automatically called container members. Hereinafter referred to as the project

The container has two axes by default: a horizontal main axis and a vertical cross axis. The starting position of the spindle (where it intersects with the border) is called main start and the ending position is called main end; The starting position of the intersecting axis is called cross start and the ending position is called cross end.

Container properties

There are six properties on the container:

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

The flex – direction attribute

The flex-direction attribute determines the direction of the main axis (that is, the alignment of items).

.box {
    flex-direction: row | row-reverse | column | column-reverse;
}
Copy the code

flex-direction: row; The main axis is horizontal and the starting point is at the left end

flex-direction: row-reverse; The main axis is horizontal and the starting point is at the right end.flex-direction: column; The main axis is vertical and the starting point is on the upper edge.flex-direction: column-reverse; The main axis is vertical and the starting point is down.

The flex – wrap attributes

By default, projects are arranged on a line (also known as an “axis”). The flex-wrap property defines how to wrap a line if an axis does not fit.

 .box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
Copy the code

flex-wrap: nowrap; (Default) no line breaksflex-wrap: wrap; Newline, the first line is at the topflex-wrap: wrap-reverse; Newline, first line below

The flex – flow properties

The flex-flow property is a short form of the flex-direction and flex-wrap properties. The default value is Row Nowrap.

.box {
  flex-flow: flex-direction || flex-wrap;
}
Copy the code

flex-flow: row-reverse wrap-reverse

The justify – content attribute

Context-content determines the alignment of items on the horizontal axis. There are five different values

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
Copy the code

justify-content: flex-start; (Default) left alignedjustify-content: flex-end; Align rightjustify-content: center; In the middlejustify-content: space-between; Align both ends, with equal spacing between itemsjustify-content: space-around; The spacing on both sides of each item is equal. As a result, the spacing between items is twice as large as the spacing between items and the border.

The align – the items property

Define how items are aligned on the cross axis

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
Copy the code

align-items: flex-start; Cross axis starting point alignmentalign-items: flex-end; Cross axis endpoint alignmentalign-items: center; Cross axis midpoint alignmentalign-items: baseline; Baseline alignment of the first line of text for the project.align-items: stretch; (Default) If the item is not set to height or is set to Auto, it will fill the entire container height.

The align – content attribute

Defines the alignment of multiple x axes. This property has no effect if the project has only one axis.

 .box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
Copy the code

align-content: flex-start; Align with the starting point of the cross axisalign-content: flex-end; Align with the endpoint of the cross axisalign-content: center; Align with the midpoint of the intersecting axisalign-content: space-between; Align with both ends of the cross axes and evenly distribute the spacing between the axes.align-content: space-around; Both sides of each axis are equally spaced. Therefore, the spacing between axes is twice as large as the spacing between axes and borders.align-content: stretch; (Default) : Axis takes up the entire cross axis.

Project attributes

There are six properties on the project

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

Order attribute

Order: Defines the order of items, the smaller the value. The farther up the line. The default is 0

.item {
  order: integer;
}
Copy the code

Give the last item order:1

The flex – turns up properties

Define the scale of the project. The default value is 0, that is, it is not enlarged if there is free space.

If all projects have a flex-Grow attribute of 1, they divide the remaining space equally, if any. If one project has a flex-grow attribute of 2 and all the other projects are 1, the former takes up twice as much free space as the other items.

.item {
  flex-grow: number ; /* default 0 */
}
Copy the code

Set odd entries to 1 and even entries to 2. List is an array of 0-9

<li
  class="flex-item"
  v-for="item in list"
  :key="item"
  :style="{flexGrow: item %2 ===1 ? 1: 2}">{{item}}
</li>
Copy the code

The flex – the shrink properties

Define the scaling of the project. The default is 1, which means that the project shrinks if there is insufficient free space. If all projects have a Flex-shrink attribute of 1, they are scaled equally when space is insufficient. If the flex-shrink attribute is 0 for one project and 1 for all other projects, the former does not shrink when space is insufficient.

Negative values have no effect on this property.

.item {
  flex-shrink: number ; /* default 1 */
}
Copy the code

Let’s set the first element to 0 and the rest to 1. List is an array from 0 to 9

<li
  class="flex-item"
  v-for="item in list"
  :key="item"
  :style="{flexShrink: item === 0 ? 0:1}">{{item}}
</li>
Copy the code

The flex – the basis properties

Property defines the main size that the project occupies before allocating excess space. Based on this property, the browser calculates whether the main axis has extra space. Its default value is Auto, the original size of the project.

.item {
  flex-basis: length | auto; /* default auto */
}
Copy the code

Set the first item to 100px and the rest to Auto. List is an array from 0 to 9

<li
  class="flex-item"
  v-for="item in list"
  :key="item"
  :style="{flexBasis: item === 0 ? '100px': 'auto'}">{{item}}
</li>
Copy the code

Flex properties

Short for flex-grow, flex-shrink, and flex-basis. The default value is 0. 1 Auto The last two attributes are optional.

.item {
  flex: none |  'flex-grow' ['flex-shrink' || 'flex-basis']}Copy the code

This property has three quick values: auto (1 1 auto), None (0 0 auto), and 1 (1 10 0%) it is recommended to use this property in preference to writing three separate properties, as the browser will infer related values. Flex :1 is often used for layout. The width of the left side is fixed, and the right side occupies the rest

The align – self properties

The align-self property allows a single item to have a different alignment than other items, overriding the align-items property. The default value is auto, which inherits the align-items property of the parent element. If there is no parent element, it equals stretch.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
Copy the code

The sixth element is set to flex-end

<li
  class="flex-item"
  v-for="item in list"
  :key="item"
  :style="{alignSelf: item===5? 'flex-end': 'auto',height: `${Math.random()*50 + 50}px`}">{{item}}
</li>
Copy the code

Frequently seen exam

Use Flex to implement a three-point dice

<ul class="saizi_box">
  <li class="saizi">1</li>
  <li class="saizi">2</li>
  <li class="saizi">3</li>
</ul>
<style>
.saizi_box{
  list-style: none;
  width:300px;
  height:300px;
  border: 1px solid #ddd;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  padding:20px;
  .saizi{
    width:50px;
    height:50px;
    background: #ddd;
    color:# 333;
    border-radius: 10px;
    text-align: center;
    line-height: 50px;
    &:nth-child(2) {align-self: center;
    }
    &:nth-child(3) {align-self: flex-end; }}}</style>
Copy the code