directory

Traditional box model
Flexbox layout
Flexbox core concept
Flex container Properties

  • Flex-direction: The direction in which project elements are arranged

  • Flex-wrap: Arrangement of project elements

  • Context-content: Alignment of items on the main axis

  • Align-items: Alignment of items on the cross axis

  • Align-content: Arrangement of multi-line items

Flex Project Properties

  • Order: Order of items

  • Flex-grow: The scale of the project

  • Flex-basis: The space on the main axis of the project

  • Align-self: Alignment of items

The body of the

  • Traditional box model: Using display, float, and other parameters to configure the specific layout, this approach is simple to code, but can be extremely cumbersome to handle implementing features such as vertical center, elastic width, and height.

  • Flexbox layout: Can quickly implement the above scenarios, as well as many more very common layout requirements, such as:

    – Rows elements vertically

    – Align the left and right sides of elements vertically

Flexbox core concept

  • In the Flexbox layout, the core attributes include containers and items:

— Container: external container in Flexbox — Item: internal item in Flexbox

By setting the parameters of the container, the internal items are arranged in a certain order:

Flex container Properties

  • You can style items in a Flex container by setting its properties

– flex-direction: specifies the direction of project elements

① If the value is ROW, the internal items are arranged from left to right

② If the value is row-reverse, internal items are reversed horizontally

③ Column: internal items are vertically aligned

④ If the value is column-reverse, internal items are reversed vertically

– flex-wrap: indicates the arrangement of item elements. ① If the value is nowRAP, the item elements do not overflow or wrap automatically

Wrap: When the width of the item element exceeds that of the container, it is automatically wrapped

Wrap -reverse: when a child element overflows the container, it reverses the wrap

– justify-content: alignment of items on the main axis

① If the value is flex-start, the items are aligned from the beginning of the spindle

② Flex-end: items are aligned from the end of the spindle

③ Value center: align items from the middle of the main axis

④ If the value is space-between, items are arranged with the same distance

⑤ Value is space-around: not only do items keep the same distance between each other, but also there will be a certain distance on both sides to keep the arrangement

– align-items: aligns the items on the cross axis

① If the value is flex-start, the starting point of the cross axis is aligned

② If the value is flex-end, the end of the cross axis is aligned

③ If the value is center, the midpoint of the cross axis is aligned

④ If the cross axis is the same as the inline axis, it is equivalent to flex-start; Otherwise align with the baseline of the first line of the item

⑤ Value of stretch (default value) : If the height of the project is not set or set to Auto, the height of the entire container will be covered. (Limit width and height at the same time)

— align-content: The alignment of multiple lines of items (defines the alignment of multiple axes, this property does not work if the item has only one axis)

① If the value is flex-start, align it with the starting point of the cross axis

② Value is flex-end: align with the end point of the cross axis

③ If the value is center, align it with the midpoint of the intersecting axis

④ If the value is space-between, it is aligned with both ends of the crossing axis and the distance between the axes is evenly distributed

⑤ Value is space-around: the spacing on both sides of each axis is equal, so the spacing between axes is twice as large as that between axis and frame

⑥ If the value is “stretch” (default value), each row is evenly distributed. Axis covers the entire cross axis (affected by both width and height)

Flex Project Properties

  • By setting flex project properties, you can control each project’s own properties

– order: order of items (the smaller the value, the higher the order, default is 0)

— Flex-grow: Scale of the project (default is 0, if there is free space, no scale)

– Flex-shrink: the size of the project (default is 1, that is, if there is insufficient space, the project will shrink)

If all projects have a Flex-shrink attribute of 1, they are scaled equally when space is insufficient. If the flex-shrink attribute is 0 for one project and 1 for all other projects, the former does not shrink when space is insufficient.

— Flex-basis: the size of the project on the main axis (default is Auto, the original size of the project). This can be set to the same value as width or height, such as 150px, and the project will occupy a fixed space.

– align-self: indicates the alignment of items. You can set this attribute to enable items to be arranged differently from other items and override the align-items attribute. The default value is auto, which inherits the align-items property of the parent element. If there is no parent element, it equals stretch. This property has six values to choose from as shown in the figure below (the same as the align-items optional values except auto).