Why use Flex layout?

  • Flex layouts are one of the most popular because they are so simple and flexible that you can use just a few lines of code to layout a variety of pages. When I was learning about page layouts, I struggled with attributes like float, display, and position. Use the Flex attribute to create simple, elegant and complex page layouts

  • So far, I’ve compiled some common attributes for Flex layouts. Here’s a quick look at what containers and projects mean

    • Containers: Elements laid out in Flex are called containers
    • Item: Refers to the child elements of the container

The six properties of the container

  • Flex-direction: The property determines the direction of the main axis (i.e. the direction of the items).
  • Flex-wrap: By default, items line up on an axis, what to do if one line doesn’t fit (line wrap)
  • The flex – flow: flex – direction | flex – wrap (abbreviated 2 properties)
  • Justify -content: item alignment on the main axis (default horizontal alignment)
  • Align-items: How items are aligned on the cross axis (default vertical alignment)
  • Align-content: Alignment of multiple axes (i.e., alignment of multiple lines)

The six properties of the project

  • Order: The order in which items are arranged. The smaller the number, the higher the rank, which defaults to 0
  • Flex-grow: The scale of an item’s magnification (default refers to the width). Default is 0, meaning that if there is room left, no magnification is allowed
  • Flash-shrink: The shrink (default for width) ratio of a project, which defaults to 1, meaning that the project will shrink if it runs out of space
  • Flex-basis: The project will take up a fixed space (fixed width by default)
  • Flex: flex – turns up | flex – the shrink | flex – the basis (the abbreviation of three attributes)
  • Align-self: Allows a single item to have different alignment than other items, overridden by the align-items property

Resources: Flex Layout Tutorial: Syntax – Ruan Yifeng’s weblog

additional

  • This article is published through multiple platforms of “We Media” and will not be maintained after publication. If you have any objection to the content, you can discuss it in the GitHub below
  • The ongoing maintenance / 500 + face questions before update/notes 】 https://github.com/noxussj/In…
  • [3D city modeling using three. JS (Zhuhai City)] https://3d.noxussj.top/