Flex Layout Notes

flex-direction

Determine the direction of the principal axis

flex-direction

  • row
  • row-reverse
  • column
  • column-reverse

justify-content

Determines how flex items are aligned on the main Axis

  • Flex-start (default), aligned with main start

  • Flex-end, aligned with main end

  • Center, center aligned

  • space-between

    • The 1-1-1
    • Flex items are spaced equally apart
    • Align with main Start and Main end

  • space-evenly

    • The 1-1-1 –
    • Flex items are spaced equally apart
    • The distance between Flex items and main Start and Main End is equal to the distance between Flex items

  • space-around

    • . 1-1-1.
    • Flex items are spaced equally apart
    • The distance between Flex items and main Start and Main End is half the distance between Flex items

align-content

Determines the alignment of multiple flex items on the cross axis, which is similar to illustration-content

  • “Stretch” (default), similar to the “stretch” of align-items

  • Flex-start, aligned with cross start

  • Flex-end, aligned with cross end

  • Center, center aligned

  • space-between

    • Flex items are spaced equally apart
    • Cross start, cross end

  • space-around

    • Flex items are spaced equally apart
    • The distance between Flex items and cross start and cross End is half the distance between Flex items

  • space-evenly

    • Flex items are spaced equally apart
    • The distance between Flex items and cross start and cross End is equal to the distance between Flex items

align-items

Determines the alignment of Flex items on the cross axis (side axis)

  • Normal, in an elastic layout, has the same effect as stretch
  • Stretch: When the size of flex items in the cross axis direction is auto, the Flex Container will be automatically stretched and filled
  • Flex-start, when cross start is aligned
  • Flex-end, aligned with cross end
  • Center, center aligned
  • Baseline, align with baseline

flex-wrap

Whether flex-items are wrapped

  • Wrap, multiple lines
  • Wrap-reverse, multiple line reversals
  • Nowrap, no line breaks single line

flex-flow

Short for flex-direction and flex-wrap

  • The flex – flow: row wrap

The flex – contaier summary

  • display:flex/inline-flex

    • Enable flex layout

  • flex-direction

    • Determine the direction of the principal axis

  • justify-content

    • Decide how to arrange flex-items on the spindle

  • align-items

    • Determines how flex-items are aligned on the cross axis
    • normal
    • stretch
    • flex-start
    • flex-end
    • center
    • baseline

  • flex-wrap

    • nowrap
    • wrap

  • flex-flow

    • flex-direction
    • flex-wrap

order

Determine the order in which flex items are arranged

  • You can set any integer (positive integer, negative integer), and the smaller the value, the higher the order
  • Order: 1.
  • Order: 1

align-self

You can override the align-items set by Flex Container with align-self

  • Auto (default), follow the align-items setting of Flex Container
  • Stretch, flex-start, flex-end, Center, baseline, consistent with align-items

flex-grow

Items are automatically populated.

Decided how flex-items will expand

  • Any non-negative number can be set. The default is 0
  • The Flex-grow property takes effect only when the Flex Container has size remaining in the main axis direction
  • If the total flex-grow sum of all Flex items exceeds 1, the size of each Flex item extension is: the remaining size of the Flex container * Flex-grow/sum
  • The flex – turns up: 1
  • The flex – turns:. 2

flex-shrink

Determines how Flex items shrink

  • Any non-negative number (decimal, integer, 0) can be set. The default value is 1
  • The Flex-shrink attribute is valid only when flex items exceed the size of the Flex Container in the main axis direction
  • The flex – the shrink: 2

flex-basis

  • Used to set the base size of flex items in the main axis direction

    • Auto (default), the width is 100px

  • Factors that determine the final base size of Flex items, from high to low priority

    • Max-width, max-height, min-width, min-height
    • flex-basis
    • Width, height
    • The size of the content itself

flex

Flex is the flex – turns up | flex – the shrink | flex – the basis of the abbreviations, flex attributes can be specified, 1 2 or 3 values

  • Single-value syntax: The value must be one of the following

    • A unitless number: it will be treated as the value of flex-grow
    • A valid width value: this is treated as a flex-basis value
    • Keyword none, auto, or initial
    • Flex: 1.
    • Flex: 100 px

  • Double-valued syntax: The first value must be a unitless number, and it is treated as the value of flex-grow

    • The second value must be one of the following

      • A unitless number: this will be treated as the flex-shrink value
      • A valid width value: this is treated as a flex-basis value

  • Three values of grammar

    • The first value must be a unitless number, and it will be treated as the value of flex-grow
    • The second value must be a unitless number, and it will be treated as the Flex-shrink value
    • The first value must be a valid width value, and it will be treated as a flex-basis value
    • Felx: 1 2 200px