preface
The difference between IE box model and standard box model: The difference between the two lies in the different content, IE box model content includes border, padding
Traditional box model layout
- Display property (Document flow layout)
- Position property (Position layout)
- Float property (floating layout)
Flex layout
Flex, short for Flexible Box, is designed to provide maximum flexibility to Box models. For Internet Explorer, flex only supports Internet Explorer 10+ for browser compatibility
Basic attributes
Elements with a Flex layout are called Flex containers, or “containers” for short. All of its child elements automatically become container members and are called Flex items, or “items.”
The container has two axes by default: a horizontal main axis and a vertical cross axis. The starting position of the spindle (where it intersects with the border) is called main start and the ending position is called main end; The starting position of the intersecting axis is called cross start and the ending position is called cross end.
By default, items are arranged along the main axis. The main axis space occupied by a single project is called main size, and the cross axis space occupied is called cross size
Flex-direction: indicates the direction of the spindle.
Flex-wrap: Arrangement style beyond the parent container's children.
Flex-flow: short form of the flex-direction and flex-wrap properties.
Illustration-content: The orientation of the child container in the main axis.
Align-items: the alignment direction of the sub-containers on the cross axis.
Align-content: alignment of multiple axes.
Order: Order of child containers
Flex-grow: The stretch ratio of the remaining space of the child container
Flex-shrink: The percentage of compression that exceeds the size of the child container
Flex-basis: The original size of a child container without scaling
Flex: The Flex attribute of a child element is a shorthand for flex-grow,flex-shrink, and flex-basis
align-self
Copy the codeFlex-direction attribute (container attribute)
The flex-direction attribute determines the direction of the main axis (that is, the alignment of items).
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
Row (default) : The main axis is horizontal and the starting point is on the left.
Row-reverse: The main axis is horizontal and the starting point is at the right end.
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.
Copy the codeFlex-wrap property (container property)
The flex-wrap property defines how to wrap a line if an axis does not fit.
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
Nowrap (default) : no line breaks.
Wrap: The first line is at the top.
Wrap-reverse: newline with the first line at the bottom.
Copy the codeFlex-flow (Container properties)
The flex-flow property is a short form of the flex-direction and flex-wrap properties. The default value is Row Nowrap
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
Copy the codeContext-content property (container property)
The context-content attribute defines the alignment of items on the main axis; The exact alignment depends on the direction of the axis. So let’s say that the principal axis is going from left to right
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
Flex-start (default) : left-aligned
Flex-end: right-aligned
Center: a center
Space-between: both ends are aligned with equal intervals between items.
Space-around: Equal spacing on both sides of each item. As a result, the spacing between items is twice as large as the spacing between items and the border.
Copy the codeAlign-items property (container property)
The align-items property defines how items are aligned on the cross axis.
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
Flex-start: Alignment of the starting point of the cross axes.
Flex-end: alignment of ends of crossed axes.
Center: Alignment of the midpoint of the cross axis.
Baseline: The baseline alignment of the first line of text of the project.
Stretch (default) : If the height is not set or auto is set, the project will occupy the entire height of the container.
Copy the codeAlign-content property (container property)
The align-content property defines the alignment of multiple axes. This property has no effect if the project has only one axis.
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
Flex-start: align with the starting point of the cross axis.
Flex-end: aligns with the end of the cross axis.
Center: aligns with the midpoint of the intersecting axis.
Space-between: aligned with both ends of the intersecting axes, with evenly distributed spacing between axes.
Space-around: The spacing on both sides of each axis is equal. Therefore, the spacing between axes is twice as large as the spacing between axes and borders.
Stretch (default) : Axis takes up the entire cross axis.
Copy the codeOrder attribute (Item attribute)
The order attribute defines the order of items. The smaller the value is, the more advanced it is. The default value is 0.
.item {
order: <integer>;
}
Copy the codeFlex-grow property (Project property)
The Flex-Grow property defines the project’s zoom scale, which defaults to 0, or no zoom if there is free space
.item {
flex-grow: <number>; /* default 0 */
}
Copy the codeFlex-shrink attribute (project attribute)
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.
.item {
flex-shrink: <number>; /* default 1 */
}
Copy the codeFlex-basis properties (Project 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.
.item {
flex-basis: <length> | auto; /* default auto */
}
Copy the codeFlex Properties (Project 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
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>]
}
Copy the codeAlign-self attribute (item attribute)
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.
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
This property may take six values, all identical to the align-items property except auto.
Copy the codeGrid layout
Flex layout is an axis layout and can only specify the position of “items” against the axis, which can be considered as a one-dimensional layout. A Grid layout divides the container into “rows” and “columns”, generates cells, and then specifies the cells “where the project resides”, which can be thought of as a two-dimensional layout. Grid layout is far more powerful than Flex layout
Common CSS layouts
Several common CSS layouts
Several ways to centralize CSS vertically and horizontally
- Margin: Auto
- Absolute positioning +margin reverse offset
- Absolute position + Transform Reverse offset
- Display: tabel
- display: inline-block
- display: flex-box
BFC IFC GFC FFC layout
Implement mobile 1px
.setBorderAll{
position: relative;
&:after{
content:"";
position:absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
The transform: scale (0.5);
transform-origin: left top;
box-sizing: border-box;
border: 1px solid #E5E5E5;
border-radius: 4px;
}
}
Copy the codereference
- [1] Ruan Yifeng -CSS Grid Layout tutorial
- [2] Several common CSS layouts
- [3] Several methods of vertical horizontal centralization of CSS
- [4] Implement 1px on mobile terminal
- [5] BFC IFC GFC FFC layout
- [6] Common layout modes of the CSS
- [7] Flexible implementation of terminal adaptation rem adaptive layout for H5 page of Handwashing