Streaming layout, floating layout, layer layout, Flex layout in CSS

[toc]

1. Streaming layout

Streaming layout: Standard document flow

Layout right way:

Layout from top to bottom, left to right men’s boxes occupy a row, women’s boxes are displayed side by side, women’s boxes if a row is full, automatic line wrap.

2. Floating layout

Floating layout: Block labels are displayed side by side

2.1 Floating characteristics

  1. Float out of standard flow (not completely out of document flow)

1. If an element is floating, it is out of the standard document flow, and the following elements are pushed up. If the following elements have text inside them, that text will surround the floating element, creating a word circumference.

2. Floating curve: If the element floats, it moves up until it is near the parent’s boundary, then, if it floats left, it moves left until it is near the parent’s left boundary, and if it floats right, it moves right, directly to the right boundary.

  1. Floating impact:

    • Height collapse of parent element:
      • If an element has no height, its height is supported by its contents. If all the elements inside the parent element float, the height of the parent element collapses.
        • If an element floats, it is controlled by its parent. When the width of the parent element becomes too small to hold all the children, the following children become adherent. When the parent element is small enough, the width of the floating child element does not change.
      • Floating elements affect the elements below, not the elements above
      • Floating affects how elements are displayed

Note: If there is a left float and a right float, you need to write the right float element in front of the left float

2.2 Element float causes impact (clear float)

1. The effect on the parent element

The parent element collapses in height

Solution: show add height (add high method) small folk (overflow:hidden) clear:both

  • In most cases, the height of the parent element needs to be supported by the child element
  • Overflow :hidden: The height of the parent element changes with the height of the child element. If the child element wants to exceed the height of the parent element, then overflow:hidden is not suitable.
  • Clear :both Add an empty div to all child elements and add clear:both – to this div
    • Pros: Clear: Both professional clear float
    • Cons: Write one more code

2. Effect on subsequent sibling elements. Sibling elements move up

Resolve: Add clear:both to affected elements

The most common way to clear floats in a project is to write a class that clears floats using the pseudo-element after:

.clear:after{
	content=""; 
	display:block; 
	clear:both; 
	height:0; 
	overflow:hidden;
}
Copy the code

3. The floor layout

Background-position is a layout scheme that completely deviates from the standard document flow

  1. Four parameters:

    • A. relative B. relative

      • Reference point: is the box itself where it should appear
      • Application: Local details are adjusted as reference points for absolute positioning

    • Absolute positioning: Absolue

      • 1. Reference points: relative to the set reference points. If it can’t find it, it will go straight up to the body. If the body doesn’t have a reference point, it will use the body as the reference point

        Absolute location Because it is completely out of the standard document flow, it can be overwritten and possibly reordered by z-index, where the higher the z-index value, the higher the order

    • Fixed position: flxed

      • Reference point: Windows

    • static:

      • Does not locate the default

If an inline label is absolutely positioned, then it becomes block-level and the width can be set. Regardless of the type of positioning, you need to set the offset. top,right,bootom,left

4. The flex layout

Flex layout has four concepts: containers, items, spindles, and cross axes

  • Container: If you set display:flex above a box, the box is a container
  • Item: The immediate child of the container, called item
  • Main axis: In the container, items are arranged in the main axis by default, left to right by default
  • Cross axis: The axis perpendicular to the main axis

4.1 Container-related properties

4.1.1 flex-direction: Changes the spindle direction

Four parameters: -row (default value) : The main axis is horizontal and the starting point is on the left. – row-reverse: Indicates that the main axis is horizontal and the starting point is on the right. – column: the main axis is in the vertical direction and the starting point is in the upper edge. – column-reverse: the main axis is vertical and the starting point is at the bottom.

Usage:

The flex - direction: row | column | row - reverse | column - reverseCopy the code

Example:

4.1.2 flex-wrap: Whether to wrap lines when there are enough items

Two arguments – wrap: the first line is at the top. – nowrap (default) : no line breaks. – wrap-reverse: indicates a newline with the first line at the bottom.

4.1.3 * flex – flow

The flex-flow property is a short form of the flex-direction and flex-wrap properties. The default value is Row Nowrap.

Usage:

flex-flow: <flex-direction> || <flex-wrap>;
Copy the code

4.1.4 context-content property: Defines the alignment of items on the main axis.

6 attributes – flex-start (default) : left-aligned – flex-end: right-aligned – center: centered – space-between: aligned at both ends with equal intervals between items. – space-around: The space between the two sides of each item is equal. As a result, the spacing between items is twice as large as the spacing between items and the border.

Usage:

justify-content: flex-start | flex-end | center | space-between | space-around;
Copy the code

Example:

4.1.5 align-items property: Defines how items are aligned on the cross axis.

Five attributes – flex-start: aligns the starting point of the cross axis. – flex-end: aligns the ends of the cross axes. – Center: aligns the midpoints of the intersecting axes. – baseline: Baseline alignment of the first line of the item. – Stretch (default) : If the height of the project is not set or auto is set, the whole height of the container is occupied.

Usage:

align-content: flex-start | flex-end | center | space-between | space-around | stretch;
Copy the code

Here is:

4.2 Project related attributes

4.2.1 Order: Is used to change the order of items

Usage:

.item {
  order: <integer>;
}
Copy the code

Here is:

4.2.2 flex – turns up properties

The Flex-Grow property defines the project’s zoom scale, which defaults to 0, or no zoom if there is free space.

Usage:

.item {
  flex-grow: <number>; /* default 0 */
}
Copy the code

Here is:

Note:

If all projects have a flex-Grow attribute of 1, they divide the remaining space equally, if any. If one project has a flex-grow attribute of 2 and all the other projects are 1, the former takes up twice as much free space as the other items.

Holdings flex – the shrink properties

The Flex-shrink attribute defines the scale by which a project shrinks. The default is 1, that is, if there is insufficient space, the project shrinks.

Usage:

.item {
  flex-shrink: <number>; /* default 1 */
}
Copy the code

Here is:

Note:

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. Negative values have no effect on this property.

4.2.4 flex – the basis properties

The Flex-basis property defines the main size of the project before allocating extra space. Based on this property, the browser calculates whether the main axis has extra space. Its default value is Auto, the original size of the project.

Usage:

.item {
flex-basis: <length> | auto; /* default auto */
}
Copy the code

Note:

It can be set to the same value as the width or height attribute (such as 350px), and the project will take up a fixed space.

4.2.5 flex properties

The flex attribute is short for flex-grow, flex-shrink, and flex-basis. The default value is 0 1 Auto. The last two attributes are optional.

Usage:

.item {
 flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>]}Copy the code

Note:

This property has two shortcut values: auto (1 1 auto) and None (0 0 auto).

4.2.6 align – self properties

The align-self property allows a single item to have a different alignment than other items, overriding the align-items property. The default value is auto, which inherits the align-items property of the parent element. If there is no parent element, it equals stretch.

Usage:

.item {
 align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
Copy the code

Here is:

Note:

This property may take six values, all identical to the align-items property except auto.