Shulou(Shulou.com)06/03 Report--

How to enter the Flexbox layout of CSS3, I believe that many inexperienced people are at a loss about it. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

Flexbox layout concept

Flexbox layout (Flexible Box or CSS3 flexible layout) is a new layout mode in CSS3, which can automatically adjust the height and width of sub-elements to fill the available display space in any display device with different screen sizes, shrink content to prevent content overflow, and ensure that elements have appropriate behavior. Using Flexbox to layout is easier, you can use less code, simpler ways to achieve more complex layout, such as alignment, arrangement direction, arrangement order (this is also the core ability of Flexbox layout), the child elements in the elastic box can be placed in all directions to adapt to the display area of the parent element. Because the display order of child elements and their order in the code are independent, positioning sub-elements become simpler by using elastic boxes, and complex layouts can be implemented more easily with clearer code. The stand-alone display is set to target only visible elements, rather than code-based declaration and navigation order.

Unlike the vertical layout of block-level elements and the horizontal layout of inline elements, the algorithm of elastic box layout is direction-independent. Although the block-level element layout works well on the page, its definition is not sufficient to support referenced components that need to switch, resize, stretch, and shrink according to changes in user agents from vertical to horizontal. Unlike the grid layout that will appear for large scale layouts, elastic box layouts are more suitable for application components and small scale layouts. Both are the efforts of the CSS working group to collaborate with different user agents, different writing modes, and other flexible needs.

Nouns and foundations

Flexbox is a complete layout module, not a single attribute, there are many properties of the design. The Flexbox layout mainly consists of the parent container and its immediate child elements, where the parent container is called flex container (flex container) and its direct child element is called flex item (flex element).

Flexbox layout according to the width and height of the basic concepts involved in the name of main axis (spindle) and cross axis (cross axis, perpendicular to the principal axis), the starting edge of the spindle is called main start, the end edge of the spindle is called main end, the starting edge of the cross axis is called cross start, and the end edge of the cross axis is called cross end. As shown in the figure:

Main axis (Spindle): the spindle of the Flex container is mainly used to arrange Flex elements. It is not necessarily horizontal, which depends largely on the flex-direction property.

Main-start (start edge of the spindle) | main-end (end edge of the spindle): the arrangement of Flex elements starts at the starting edge of the spindle of the container and ends at the end of the spindle.

The width or height of the main size:Flex element in the spindle direction is the spindle length of the project, and the spindle length attribute of the Flex element is the width or height attribute, which is determined by which direction is facing the spindle.

Cross axis (axis perpendicular to the principal axis): an axis perpendicular to the principal axis is called a cross axis.

Cross-start (start edge of cross axis) | cross-end (end edge of cross axis): the arrangement of expansion rows starts at the start edge of the cross axis of the container and ends at the end edge of the cross axis.

The width or height of the cross size:Flex element in the direction of the cross axis is the project's cross axis length, and the cross axis length attribute of the Flex element is the width or height attribute, which is determined by which direction is facing the cross axis.

Examples

The new flexbox layout pattern is used to redefine the layout in CSS. Unfortunately, the specification has changed so much recently that the implementation of it varies from browser to browser. But I still want to share some examples to let you know what's going to change. Currently, these examples can only be run in Chrome browsers that support flexbox, based on the latest standards.

You can do more with flexbox; here are just some examples of concepts:

Simple layout using Flexbox

CSS Code copies content to the clipboard

.container {

Display:-webkit-flex

Display: flex

}

Nav {

Width: 200px

}

. flex-column {

-webkit-flex: 1

Flex: 1

}

Use the awesome layout of Flexbox

CSS Code copies content to the clipboard

.container {

Display:-webkit-flex

Display: flex

}

.initial {

-webkit-flex: initial

Flex: initial

Width: 200px

Min-width: 100px

}

.none {

-webkit-flex: none

Flex: none

Width: 200px

}

.flex1 {

-webkit-flex: 1

Flex: 1

}

.flex2 {

-webkit-flex: 2

Flex: 2

}

After reading the above, have you mastered how to get started with the Flexbox layout of CSS3? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.