After web class in the morning, the brain is very tired, casually eat a meal, doze off. Unfortunately, my phone hit me in the face (I think you’ve all experienced this, phone fans). It was like an apple hit me on the head and I discovered gravity.
In 2009, the W3C proposed a new solution called Flex layout, which can easily, fully, and responsive implementation of various web layouts.
Flex stands for Flexible Box. As of May 2016, the latest and stable Flex layout specification has been officially released. It is currently supported by all browsers, which means it is now safe to use flex. Flexipilbox is a new layout mode for CSS3. Flexipilbox is a layout method to ensure that elements have the appropriate behavior when pages need to adapt to different screen sizes and device types.
It is more efficient and convenient to control the alignment of elements, arrangement, and more importantly, to calculate the size of elements within the layout, whether the size of the element is solid or dynamic. Setting the Flex layout invalidates the float, vertical-align, and clear attributes of child elements. One might ask, why use Flex layout?
Our traditional layout solution, which is based on the CSS box model and relies on display, position, float, etc., is very inconvenient for special layouts such as vertical center.
Flex layouts solve this problem by making it easy to implement layouts in a fully responsive manner. Many people are very curious, so what is elastic layout?
An elastic box consists of an elastic container, Flex Container, and an elastic child, Flex Item. Elastic container: Parent element that needs to be added to the elastic layout. Elastic child element: Each child element in an elastic layout container, also known as an item; There are two basic directions we need to understand, and this involves the use of elastic layouts.
Spindle: In an elastic layout, we specify horizontal/vertical as the main axis by attributes. Cross axis: the other direction perpendicular to the main axis, called the cross axis. The position where the main axis starts and ends (the intersection with the border) is called “main Start” and “main end”. The position where the axis begins and ends is called “cross start” and “cross end”.
Why add Flex it’s like a float. And that starts with his 12 attributes, which are very regular, 6 on the parent element, 6 on the child element.
Let’s start with the six elements that are used on the parent element. I’ll put it in a table for you.
| attribute | describe |
|---|---|
| flex-direction | Specifies the arrangement of the neutrons in an elastic container |
| flex-wrap | Sets whether the child element of the elastic box is newline beyond the parent element |
| flex-flow | Short for flex-direction and flex-wrap |
| justify-content | Sets the alignment of the elastic box elements in the main axis (horizontal) direction |
| align-items | Setting the alignment of elastic box elements in the lateral axis (longitudinal) Direction Sets the alignment of elastic box elements in the lateral axis (longitudinal) direction |
| align-content | Modify the flex-wrap property to behave like align-items, but instead of setting the alignment of child elements, set the alignment of rows |
Specific video demonstration of each attribute on the public account: learning programming for one hour; I hope my article can help you.