one. flex elastic layout
When we set the flex layout for the parent box, the float, clear and vertical-align properties of the child elements will be invalid.
Summarize the principle of flex layout: it is to control the position and arrangement of child boxes by adding flex attributes to the parent box
Common attributes of flex layout parents
The following 6 attributes are set on the parent element:
flex-direction: Set the direction of the main axis
justify-content: Set the arrangement of child elements on the main axis
flex-wrap: Set whether the child element wraps
align-content: Sets the alignment of child elements on the side axis (multiple lines)
align-items: Set the arrangement of child elements on the side axis (single line)
flex-flow: Composite attribute, which is equivalent to setting flex-direction and flex-wrap at the same time
1. flex-direction sets the direction of the main axis
Note: The main axis and the side axis will change, it depends on who is the main axis in the flex-direction setting, and the rest is the side axis. And our child elements are arranged along the main axis
2. justify-content sets the arrangement of sub-elements on the main axis
3. flex-wrap sets whether the child element wraps
4. align-items sets the arrangement of sub-elements on the side axis (single line)
5. align-content sets the arrangement of child elements on the side axis (multiple lines)
6. flex-flow
The flex-flow property is a compound property of the flex-direction and flex-wrap properties
flex-flow:row wrap;
Common properties of flex layout children
1. The flex property
The flex attribute defines the sub-item to allocate the remaining space, and use flex to indicate how many copies it occupies .
.item {
flex: <number>; /* default 0 */
}
2. align-self controls the arrangement of the child itself on the side axis
A align-self attribute allows a single item to have a different alignment than other items, and can override the align-items attribute.
The default value is auto, which means inheriting the align-items attribute of the parent element. If there is no parent element, it is equivalent to stretch.
span:nth-child(2) {
/* Set up the arrangement of yourself on the side axis */
align-self: flex-end;
}
3. The order attribute defines the order in which items are sorted
The smaller the value, the higher the ranking, and the default is 0.
Note: Not the same as z-index.
.item {
order: <number>;
}
background linear gradient
background: linear-gradient(start direction, color 1, color 2, ...);
background: -webkit-linear-gradient(left, red , blue);
background: -webkit-linear-gradient(left top, red , blue);
two. rem adaptation layout
1. rem unit
rem (root em) is a relative unit, similar to em, em is the font size of the parent element.
The difference is that the base of rem is relative to the font size of the html element .
For example, if the root element (html) sets font-size=12px; if the non-root element sets width:2rem; then replace it with px to indicate 24px.
The advantage of rem: the text size of the parent element may be inconsistent, but the entire page has only one html, which can well control the meta of the entire page
prime size.
/* root html is 12px */
html {
font-size: 12px;
}
/* At this time, the font size of the div is 24px */
div {
font-size: 2rem;
}
2. Media queries
@media can be styled differently for different screen sizes
@media mediatype and|not|only (media feature) {
CSS-Code;
}
Note the @ symbol at the beginning of @media
mediatype media type
keywords and not only
media feature media features must be enclosed in parentheses
2. 1 mediatype query type
2. 2 Keywords
Keywords concatenate a media type or multiple media properties together as a condition for a media query.
and: multiple media features can be connected together, which is equivalent to the meaning of "and".
not: Exclude a certain media type, which means "not" and can be omitted.
only: Specify a specific media type, which can be omitted.
2. 3 Media Features
