Flex layout

The basic concept

The Flexible Box model, often referred to as flexbox, is a one-dimensional layout model. It provides strong spatial distribution and alignment between flexbox’s child elements.

We say flexbox is a one-dimensional layout because a Flexbox can only handle the layout of elements on one dimension at a time, one row or one column. By contrast, CSS Grid Layout, another two-dimensional Layout, handles rows and columns at the same time.

Two axis

  • Main axis: defined by flex-direction. There are four valuesrow(the default),row-reverse,column,column-reverse.
  • Cross axis (secondary axis) : perpendicular to the main axis.

Flex container

If we change the display property value of a container to flex or inline-flex, the direct descendant elements in the container become Flex elements.

The default behavior for all Flex elements in a container is:

  • The elements are arranged in a row (the initial value of the Flex-direction attribute is row).
  • The element starts at the beginning line of the main axis.
  • Elements do not stretch in the main dimension, but they can shrink.
  • The element is stretched to fill the cross axis size.
  • The flex-basis attribute is auto.
  • The flex-wrap attribute is nowrap.

Flex-direction and flex-wrap can be abbreviated as flex-flow, with the first specified as flex-direction and the second specified as flex-wrap.

Properties of the Flex element

  1. flex-grow

    If assigned to a positive integer, the Flex element grows along the axis on a flex-basis basis, taking up the available space along that axis. If any other elements are allowed to stretch, they will each take up a proportional portion of the available space based on the value of flex-Grow.

  2. flex-shrink

    As with the Flex-grow attribute, you can assign different values to control how much a Flex element shrinks — giving a larger value to the Flex-grow attribute shrinks more than a sibling element given a smaller value. Note: The minimum size of a Flex element is also taken into account when calculating how much it shrinks

  3. flex-basis

    Defines the size of the element. The default value is auto. If the element is set to be 100px wide, flex-basis will have a value of 100px.

The Flex shorthand allows you to write three values in this order — flex-grow, flex-shrink, and flex-basis. Example: Flex: 10 1 200px.

There are also predefined abbreviations:

  • flex: initial: the equivalent offlex: 0 1 auto.
  • flex: auto: the equivalent offlex: 1 1 auto 。
  • flex: none: the equivalent offlex: 0 0 auto 。
  • flex: <positive-number>: the equivalent offlex: <positive-number> 1 0 。

Alignment and space allocation of elements

  • justify-content: used to align elements in the main axis. The available values are as follows:
    • stretch
    • flex-start (default)
    • flex-end
    • center
    • space-around
    • space-between
  • align-items: aligns elements on the cross axis. The available values are as follows:
    • stretch (default)
    • flex-start
    • flex-end
    • center

practice

A frog mini-game can help you practice your Flex layout.

positioning

The position property is used to specify how an element is positioned in a document. The top, right, bottom, and left attributes determine the final position of the element.

Location type

  • Static:

    Normal layout behavior, the current layout position of the element in the general flow of the document. The top, right, bottom, left, and Z-index attributes are invalid.

  • Relative:

    Elements are placed where they were before positioning was added, and then repositioned without changing the layout of the page.

  • Absolute:

    Element position is determined by specifying the offset of the element relative to the nearest non-static positioned ancestor element. Margins can be set for absolutely positioned elements and are not merged with other margins.

  • fixed

    Being removed from the normal document flow does not reserve space for elements, but rather specifies their position relative to the viewport. The position of the element does not change as the screen scrolls. When printing, the element will appear in a fixed position on each page. The fixed property creates a new cascading context. When the element ancestor’s transform, Perspective, or filter attribute is not None, the container changes its viewport to that ancestor.

  • sticky

    Elements are positioned relative to each other until the viewPort scrolls to the top less than 10px away. After that, the element will be fixed 10px from the top until the ViewPort is rolled back below the threshold. For sticky positioning to take effect, one of the four thresholds must be specified: top, right, bottom, or left. Otherwise it behaves the same as relative positioning. This value always creates a new cascading context. Not commonly used because of poor compatibility.

Cascading context

Hierarchy of cascading contexts:

  • Root
    • DIV #1
    • DIV #2
    • DIV #3
      • DIV #4
      • DIV #5
      • DIV #6

Browser rendering process

  1. Process HTML tags and build DOM trees.
  2. Process CSS tags and build CSSOM trees.
  3. DOM + CSSOM –> rendering tree.
  4. Layout, calculate the geometry information of each node.
  5. Paint, which draws each node to the screen.

Optimizing the critical render path means minimizing the total time spent performing steps 1 through 5 above. This allows content to be rendered to the screen as quickly as possible, in addition to reducing the screen refresh time after the first rendering, resulting in a higher refresh rate for interactive content.

The general steps for optimizing critical render paths are as follows:

  1. This section describes the number of resources, bytes, and length of critical paths.
  2. Minimize the number of critical resources: delete them, delay their download, mark them as asynchronous, and so on.
  3. Optimize key bytes to shorten download time (round trip).
  4. Optimize the loading sequence of other critical resources: Download all critical assets as soon as possible to shorten the critical path length.

Two ways to animate CSS: Transition and Animation

transition

Transition-property, transition-duration, transition-timing-function, and transition-delay is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay.

You can define different transitions for an element as it switches between different states. Such as switching between pseudo-elements such as :hover, :active or state changes implemented through JavaScript.

Note: display: none -> display: block cannot transition, usually change to visibility: hidden -> visibility: visible.

animation

Is animation-name, animation-duration, animation-timing-function, animation-delay, animation-rotund-count, A shorthand property form for the animation-direction, animation-fill-mode, and animation-play-state properties.

Is the transition effect when switching between different keyframes.

Keyframe writing:

@keyframes identifier {
  0% { top: 0; }
  50% { top: 30px; left: 20px; }
  100% { top: 0; }}Copy the code

or

@keyframes identifier {
  from { top: 0; }
  50% { top: 30px; left: 20px; }
  to { top: 0; }}Copy the code

In addition, keyframes appear in! Important will be ignored.

Since the reference:

  1. Basic flex layout concepts
  2. position
  3. Cascading context
  4. Render tree construction, layout, and drawing
  5. Optimize key render paths
  6. transition
  7. animation
  8. @keyframes