This is the third day of my participation in the August More text Challenge. For details, see:August is more challenging

The flex application scenario and the attributes of the Flex container have been briefly introduced. This time, it is time to introduce the attributes of the items (child elements) in the Flex container. They have the same 6 attribute values as the parent element

Item (child element)

The Flex layout can define specific attributes for each project, mainly about how children should deal with excess or lack of free space

* flex-grow

If there is too much space left, the child element is expanded. The default value is 0, which means there is no space left and no expansion. (This is the basic value to set if you want to do an adaptive spread layout.)

What this means is that if three child elements are set to 1, then three child elements are divided evenly. If one is set to 2, then it will divide the remaining space a little more! , the figure below represents the flex-Grow attribute value

* flex-shrink

This is just the opposite of the grow above

When there is not enough space left, the default value is: 1, which means everyone (the child elements) is equally scaled (if you want to make a fixed width, then 0 is a good choice).

flex-basis

Used to set or retrieve the elastic box scaling reference value. At this time, the set width of the subitem will become invalid.

Flex - basis: 'number (length of a unit or a percentage)' | 'auto';Copy the code

Note:

  • When the attribute value is a percentage, the width of the parent container is the percentage reference point;
  • When the property value isautoThe value is based on the width of the current subitemWidth: 200 pxSo the reference value is this

* flex

This is also shorthand: expansion, contraction, base

flex:   <'flex-grow'> <'flex-shrink'> <'flex-basis'>
Copy the code

  • Abbreviations, there are a few abbreviations to remember, as follows:

    shorthand meaning The vernacular
    flex: 1 flex: 1, 1, 0%; Adaptive contraction and expansion
    flex: auto flex: 1, 1, auto; Adaptive contraction and expansion
    flex: none flex: 0, 0, auto; It doesn’t contract or expand

* order

Defines the order in which the child elements are arranged. The smaller the number, the higher the number. It can be negative. The default value is 0

If you want the order to be in the middle, but you don’t want to change the position of the DOM, then this property will be used. As shown in the figure below, left should be in the left, but given an order property of 1, how can you arrange it at the end

align-self

Allows you to redefine the property value of the align-items of the child item

Parent element can only unified defines the cross shaft alignment of each child elements, but also allows the following child elements have the right to override the parent element of the cross shaft alignment, the equivalent of is covered in style, we also often also to the problem of CSS styles are covered, the influence of weight, so understanding can be similar, The align-self weight of the child element is higher than the align-items weight of the parent element

The summary of this chapter

All right, flex properties are introduced, combined with the introduction of the previous few small cases, plus the description of flex properties in the two chapters (for those of you who did not see the previous article, if you want to see it, there is a link below), the basic flex operation is done, the following basic flex description. Next I want to record the CSS animation ~~~

A review of the Flex series

1. Flex application scenarios

2. Properties on the Flex container