On a web page, there are three layout types of elements
- Flow model
- Float model
- Layer (Layer) model
Flow is the default web layout mode. This means that the default HTML elements of a web page are distributed according to a flow model.
Flow model
- Block elements are distributed vertically from top to bottom within the contained element, because block elements are 100% wide by default. In fact, block elements take place in rows.
- In the flow model, inline elements are displayed horizontally from left to right within the contained element at hand. (Inline elements don’t dominate a line like block elements.)
- The inline element tags A, SPAN, em, and strong in the code editor on the right are all inline elements.
Floating model
- No element is floating by default. Float we can define by that
Layer model
position: static relative absolute fixed sticky
The combination of relative and absolute
Elastic box model Flex
The traditional solution to layout, based on the box model, relies on the display property + position property + float property
Properties of the container
flex-direction flex-wrap flex-flow justify-content align-items align-content
flex-direction
- Decide on the main axis, the direction in which items are arranged
- Rows are arranged horizontally by default
The flex – wrap attributes
- How to wrap
- Nowrap does not break lines by default
The justify – content attribute
- Determines the alignment of items on the main axis
- Flex-start defaults to left-aligned
The align – the items property
- Determines the alignment of items on the cross axis
- The default value is stretch
The align – content attribute
- Determines the alignment of items on the multi-heel axis
Photo is from Ruan Yifeng’s blog
Stretch the default value
4. Project attributes
order flex-grow flex-shrink flex-basis flex align-self
The order attribute defines the order of items
flex-grow
- Flex-grow defines the scale of the project
- The default is 0
The flex – the shrink properties
- The Flex-shrink attribute defines the size of a project that defaults to 1 if there is insufficient space. Projects 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.
The 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
Flex properties
- Flex-grow flex-shrink flex-basis The default value is 0 1 Auto
Flex: 1 === flex: 1 1 + 0% The size of the box will be proportional to the length of the box
align-self
Align-items separate Settings for items
The grid layout
The web page is divided into a grid
The grid – the template – the columns property,
The grid – the template – rows attribute
You can use the repeat attribute repeat(3, 100px 50px 200px)
Auto-fill Keyword Each line automatically fills the keyword
Fr is divided proportionally
Grid-row-gap, grid-column-gap, grid-gap
Set row spacing and set column spacing
grid-template-areas
The justify – the items property,
Align-items property, place-items
Sets the horizontal position of cell content
Parameter Settings: Start,end, Center,stretch
Context-content, align-content, place-content
start | end | center | stretch | space-around | space-between | space-evenly
Grid-column-start attribute, grid-column-end attribute, grid-row-start attribute, grid-row-end attribute
Sets the position of the item throughout the container
grid-row grid-colume
- &-start &-end
grid-area
- Sets the location of the element in the container
- Grid-row-start, grid-column-start, grid-row-end, grid-column-end can also be used as a combined shorthand form
- grid-area: 1 / 1 / 3 / 3
display
What you can set are the internal and external display types of elements
Horizontal middle method
Discenter document flow elements
- magin: auto
- Margin: set top left to half of the known width
- The width and height vary to achieve horizontal and vertical center of the box
Not out of the center of the document flow element
- text-align: center vertical-align: center
Elastic box method
flex align-items: center justify-content: center
The document flow
I can often see what goes off the document stream. Never really understood
Q: Does it take up no space if you leave the document stream? A: You can say that. To be more precise, when an element is out of normal flow, other elements will be positioned as if they did not see it, even if they overlap.
Q: Does “out of stream” mean that the element is removed from the DOM tree? A: No, use the browser’s review element to see that elements that are out of the document flow (such as float) still appear in the DOM tree, as can be seen in the screenshot below.
Another thing to note
Out of flow, where elements are removed from normal layout, other boxes are positioned as if the element out of flow does not exist. Note that when float is used to leave the document flow, the other boxes ignore the element, but the text in the other boxes still makes room for the element and surrounds it. An element that uses absolute Positioning to leave the document stream will be ignored by other boxes and text in other boxes.