First, what is layout

Simply put, CSS layout is to plan HTML elements and control the arrangement of elements through CSS

Two, the common layout

  • Traditional layout: use the position property + display property + float property layout, good compatibility, but low efficiency!
  • Flex layout: Has its own set of properties for efficiency, low learning cost and high compatibility!
  • Grid Layout: Grid layout is the most powerful layout scheme. But there are more knowledge points, learning costs are relatively difficult, the current compatibility is not as good as the other two layout!

3. Basic concepts

Start with two concepts in flex layout: container and item.

1. Container properties

  • The flex – direction:

    The orientation of the child elements in the container. Default is landscape. Attribute values are row, row-reverse, column, and column-reverse.

  • flex-wrap

    Does a line break when the number of elements in a row exceeds the width? The default property values are no line breaks, nowrap, wrap, and wrap-reverse

  • Flex-flow (short for 1 and 2)

  • justify-content

    Defines the alignment of the item on the spindle, Flex-start, Flex-end, Center, Space-Between, space-around, space-instituted

  • align-items

    Vertical alignment, which shows how items are aligned vertically, has property values similar to justify-content.

  • align-content

    When using this alignment with multiple axes, the property is similar to the justify-content property!

2. Project attributes

  • The order: attribute defines the order in which items are sorted, with fewer numbers leading the order.
  • Flex-grow: Property defines the zoom ratio column for the project (the remaining space is allocated in that column). The default is 0, which means that if there is free space, it will not be allocated.
  • Flex-shrink: The flex-shrink attribute defines the size of the project. The default is 1, which shrinks when space is low.
  • Align-self: The attribute allows a single item to be aligned differently from other items, overriding the attribute of item-align. The default is auto, which inherits the align-items property of the parent element, or equivalent to stretch if there is no parent element.
  • Flex-basis: The attribute allows the width to grow on its own with respect to the content.

Four, conclusion

Flex layout is still quite common in daily development, so learn it well and use it flexibly in projects to improve development efficiency. Come on, friends!

This note is compiled by watching a video of UP at station B. If you want to see the video dump here:

www.bilibili.com/video/BV1t7…