This article refers to the following blog post
Article Directory
Preface
I did not study the layout in depth before doing the project. Many pages use positioning if they can use positioning, and use percentages if they can use percentages. As a result, many places seem to be aligned, but they are very awkward. A layout tortured for a long time. So I learned from the pain and summarized my ideological problems.
I didn’t take CSS -related issues seriously before, and I always thought that I should just use Baidu whenever the styles are used. The consequence of this idea is that the page style is very stiff, and different resolution monitors are suitable. It's very poor. When I wrote the page, it was also very inexplicable. Obviously I wrote a certain style, but it didn't work. In the end, I still couldn't make it with myself.
There must be a lot of classmates who have the same idea as me, but it doesn't matter, knowing a mistake can make corrections, and there is no good way. Start with Flex first, clear the layout, and solve a lot of style troubles.
1. Basic principles
Flex in English means bending, flexion and extension, and retractable layout. It is born to adapt to different resolutions. And the usage is very simple. First of all, just tell the browser that I am a flexible layout.
.faBox {
display: 'flex'; //给父元素设置为伸缩布局
.sonBox1 {
...
}
.sonBox2 {
...
}
}
After setting up Flex , there will be the following diagrams, we will look at them one by one.
2. Container properties
Whoever is set up display: flex;is the container. In the above figure, faBox is the container, so the container properties should be written in the container properties.
2.1 flex-direction property
Understand the attribute from the English meaning and translate it into the direction of expansion and contraction. This attribute can set the direction of the main axis and has six values.
.faBox {
flex-direction: row | row-reverse | column | column-reverse | initial | inherit;
}
The four attributes above correspond to the following four situations respectively
There are two possible values for flex-direction , initial and inherit according to the English meaning.
- Initial means "initial" and is a keyword provided by CSS. It can be used in many places. You can quickly set the default value of an attribute, which is convenient and quick.
- inherit meaning "inheritance", you can inherit the property from the parent element.
(Thank you qq_1726010671 for helping to point out the deficiencies in the article)
2.2 flex-wrap property
Judging from the Chinese meaning, this thing should control line wrapping.
.faBox{
flex-wrap: nowrap | wrap | wrap-reverse;
}
2.3 flex-flow properties
This property is shorthand for flex-wrap and flex-direction .
.faBox{
flex-flow: <flex-direction> || <flex-wrap>;
}
2.4 justify-content property
This attribute is responsible for the alignment of the main axis.
.faBox{
justify-content: flex-start | flex-end | center | space-between | space-around;
}
2.4 align-items attribute
This attribute is responsible for the alignment of the cross axis ( vertical centering is achieved by it, very easy, often interview questions ).
2.5 align-content property
Setting a plurality of spindles , when the vertical alignment, if only one axis, does not work.
.faBox{
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
3. Project properties
3.1 order property
Order means order in English. This attribute can set the order of items, from small to large.
.sonBox1{
order: <integer>;
}
3.2 flex-grow property
Define the magnification ratio of the project, the default is 0, which does not participate in the magnification.
.sonBox1{
flex-grow: <number>; /* default 0 */
}
3.3 flex-shrink property
Define the project zoom.
.sonBox1{
flex-shrink: <number>; /* default 1 */
}
3.4 flex-basis property
The attribute defines the main axis space occupied by the project before the extra space is allocated.
.sonBox1{
flex-shrink: <number>; /* default 1 */
}
3.5 flex property (recommended)
Shorthand for flex-grow , flex-shrink and flex-basis .
.sonBox1{
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
3.6 align-self property
Separate alignment can be set for child elements. When auto , it inherits the align-item of the parent element
.sonBox1{
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
