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

This article introduces the relevant knowledge of "div elastic layout method". In the actual case operation process, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

Flex Layout, also known as Flex Layout, is a layout method introduced by W3C Big Brother in 2009. Various page layouts can be implemented easily, completely and responsively. And it's supported by all major browsers, so we can use it boldly.

>>> Understand two basic concepts, which will be frequently mentioned next:

① Container: need to add flexible layout parent element;

② Project: Each child element in the flexible layout container is called a project;

>>> Learn about two basic directions that involve the use of flexible layouts:

① Principal axis: In elastic layout, we will specify the horizontal/vertical direction as the principal axis through the attribute;

Cross axis: The other direction perpendicular to the main axis is called cross axis.

① Add the display: flex/inline-flex; attribute to the parent container, so that the container content can be displayed in an elastic layout, rather than following the display method of the conventional document flow;

(2) After adding elastic layout to the container, only the container content adopts elastic layout, while the positioning mode of the container itself in the document flow still follows the conventional document flow;

③ display:flex; After adding elastic layout to the container, it will be displayed as a block-level element;

display:inline-flex; containers are displayed as row-level elements after adding elastic layout;

When Flex layout is set, float, clear, and vertical-align attributes of child elements will be invalidated. However, the position attribute was still in effect.

[Code Example]

Five simple div, only add the display: flex; attribute to the parent container, you can break the original document flow pattern inside the container and present it as a flexible layout.

After a brief look at flex layouts, let's go into detail about the 12 properties used with "display: flex;." Among them, 12 attributes are divided into two categories, 6 for parent containers and 6 for child items.

The flex-direction attribute determines the direction of the principal axis (i.e., the direction in which items are arranged).

row (default): the main axis is horizontal, starting at the left;

row-reverse: the main axis is horizontal and the starting point is at the right end;

column: The main axis is vertical, starting at the upper edge.

Column-reverse: The main axis is vertical, and the starting point is at the lower edge.

② flex-wrap attribute definition, if an axis line does not fall, how to wrap.

nowrap (default): no newlines. When the container width is not enough, each item will be squeezed width;

wrap: wrap, and the first line is at the top of the container;

wrap-reverse: wrap, and the first line is at the bottom of the container.

③ flex-flow is the abbreviation of flex-direction and flex-wrap. The default value is flex-flow: row wrap; no more explanation.

The justify-content attribute defines the alignment of the item on the principal axis.

>>> This property is closely related to the spindle direction. The direction of the principal axis is: row-start on the left, row-reverse-start on the right, column-start on the top, column-reverse-start on the bottom

flex-start (default): The project is located at the start of the main axis.

flex-end: The item is located at the end of the main axis.

center: centered

space-between: Aligned at both ends, the spacing between items is equal. (First and last items, no gap from parent container edge)

Space-around: Equal spacing on both sides of each item. Therefore, the spacing between items is twice as large as the spacing between items and borders. (First and last items, spaced from parent container edge)

The align-items attribute defines how items are aligned on cross axes.

flex-start: alignment of the start of the cross axis.

flex-end: alignment of the ends of the cross axes.

center: Align the midpoint of the cross axis.

Baseline: Baseline alignment of the first line of text of the project. (Line height and font size of text affect baseline of each line)

stretch (default): If the item is not set to height or is set to auto, it fills the entire container height.

The align-content attribute defines the alignment of multiple axes. If the project has only one axis, this attribute has no effect.

(Use align-content instead of align-items when converting items to multiple lines)

flex-start: Align with the start of the cross axis.

flex-end: Aligned with the endpoint of the cross axis.

center: aligned with the midpoint of the intersecting axis.

space-between: Aligned with both ends of the cross axis, the spacing between the axes is evenly distributed.

space-around: Equal spacing on both sides of each axis. Therefore, the spacing between axes is twice as large as the spacing between axes and frames.

stretch (default): Axis lines fill the entire cross axis.

The order attribute defines the order in which items are arranged. The smaller the value, the higher the ranking, the default is 0.

The flex-grow attribute defines the magnification scale of the item. The default is 0, that is, if there is surplus space, it will not be enlarged.

The flex-shrink attribute defines the reduction scale of the project, which defaults to 1, that is, if there is insufficient space, the project will be reduced.

Flex-basis defines the principal axis space occupied by the project. (If the principal axis is horizontal, setting this property is equivalent to setting the width of the item.) The original width will fail.

The flex attribute is short for flex-grow, flex-shrink, and flex-basis, and defaults to 0 1 auto. The latter two attributes are optional.

There are two shortcut settings for this property: auto=(1 1 auto)/none=(0 0 auto)

align-self: Defines how a single item is arranged on the cross axis, which can override the align-items attribute on the container.

Attribute value: Same as align-items, default value is auto, means inherit parent container align-items attribute value.

Finally, all the source code attached, the students need to test themselves oh ~

Ruijiang Hall| 5 div lets you learn flexible layout

"div flexible layout method" content is introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality practical articles for everyone!

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.