Flexible box and less preprocessing language
Flexible box
Flexible box is a new layout mode of CSS3.
The purpose of introducing the flexbox layout model is to provide a more effective way to arrange, align and allocate empty space to the child elements in a container.
display:flex/inline-flex
After setting the flex layout, the float, clear and vertical-align attributes of the child elements will be invalid
.box{ display: flex; }
.box{ display: inline-flex; }Container attributes (set on the parent element)
flex-direction determines the direction of the main axis (that is, the direction in which the items are arranged)
row (default): The main axis is horizontal, and the starting point is at the left end.
row-reverse: The main axis is in the horizontal direction, and the starting point is at the right end.
column: The main axis is in the vertical direction, and the starting point is at the upper edge.
column-reverse: The main axis is in the vertical direction, and the starting point is at the bottom edge.
justify-content defines the alignment of the item on the main axis
flex-start (default): Left justify.
flex-end: align right.
center: Centered.
space-between: Justified at both ends, the space between items is equal.
Space-around: The space on both sides of each item is equal. Therefore, the interval between items is twice as large as the interval between items and the border
space-evenly: All spaces are equal, including items and items, items and borders.
align-items defines how items are aligned on the cross axis
flex-start: align the starting point of the cross axis.
flex-end: align the end points of the cross axis.
center: The center point of the cross axis is aligned.
flex-wrap By default, items are arranged on a line (also called "axis line"). The flex-wrap attribute defines how to wrap if an axis line cannot fit.
nowrap (default): do not wrap.
wrap: wrap, the first line is at the top.
wrap-reverse: wrap, the first line is below.
Project attributes (set on the child element)
order defines the order of the items. The smaller the value, the higher the ranking, the default value is 0
<integer>: Numerical value
flex-grow defines the zoom ratio of the item, the default is 0, that is, if there is remaining space, it will not zoom.
〈Number〉: number
flex-shrink defines the shrinking ratio of the item, the default is 1, that is, if the space is insufficient, the item will shrink.
〈Number〉: number
align-self defines the alignment of the selected items in the flex container. It has the same effect as the align-items property of the flex container. This property is used for items.
auto default value. The element inherits the align-items attribute of its parent container. If there is no parent container, it is "stretch".
Stretch occupies the height of the entire container. Does not set a fixed height by itself
The center point of the cross axis is aligned.
flex-start The starting point of the cross axis is aligned.
flex-end aligns the end points of the cross axis.
baseline The baseline alignment of the first line of text of the item.
Pretreatment
Preprocessing compiler tool koala
http://koala-app.com/index-zh.html
Less basic syntax
Comment
Less has two comment styles.
The standard CSS comment /* comment */ will be retained in the compiled file.
Single-line comment // comment, only kept in the less source file and omitted after compilation.
import import style
Importing .css files is the same as the import command of css.
@import "reset.css"；
variable
Less allows developers to customize variables. Variables can be used in global styles. Variables make style modification easier.
Variables start with @, and the variable name and value are separated by a [colon]
@color:red;
div {
color: @color;
}When the variable is used in a string, it must be written in @{}
@side:left;
.box {
border-@{side}-width:5px;
}Mixing
Mixing can introduce a defined class A into another class B, so that class B inherits all the attributes in class A. We can also call with parameters, just like using functions.
Call class
.border {
border: 2px solid red;
}
#box {
color:blue;
.border;
}Mix-in parameters-no default value is set, at this time the call must pass in parameters
.border-radius(@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}Mix-in parameters-default values are set
.border-radius(@radius:5%) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}Use @arguments to reference all incoming variables
.box-shadow(@x:0, @y:0, @blur:1px, @color:#000){
box-shadow:@arguments;
-moz-box-shadow:@arguments;
-webkit-box-shadow:@arguments;
}Nested
Selector nesting
div {
width: 300px;
height: 300px;
background-color: red;
.box {
color: blue;
span {
margin-bottom: 10px;
}
}
}inherit
.public {
width: 300px;
height: 300px;
}
// div .box {
// &:extend(.public);
// background-color: red;
// }
div .box:extend(.public) {
background-color: blue;
}Calculation
.box {
width: 200px*3-50px;
}