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

In this article, the editor introduces in detail "what is the concept of flexbox in css3", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "what is the concept of flexbox in css3" can help you solve your doubts.

Flexbox, which means "elastic box", is a new layout mode introduced by CSS3, which is a flexible and scalable layout of web pages; Flexbox layout mode can expand and shrink the elements in the flex container to fill the available space to the maximum.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Flexbox is the abbreviation of Flexible box (flexible box container). It is a new layout mode introduced by CSS3, a flexible and flexible layout of web pages. It determines how elements are arranged on the page so that they can be displayed predictably under different screen sizes and devices.

Flexbox has a very powerful function, can easily achieve a lot of complex layout, before it appeared, we often use floating or fixed width + percentage layout, a large amount of code and difficult to understand.

The flex layout is called Flexbox because it expands and shrinks elements within the flex container to maximize available space. Flexbox is a more powerful approach than previous layouts, such as table layouts and floating element embedded block elements:

Arrange elements in different directions

Rearrange the display order of elements

Change the alignment of elements

Dynamically load elements into a container

Create a flex container:

Add this attribute to the parent element:

Display: flex; Document * {margin: 0; padding: 0;}. Flex-container {background-color: # 131111; display: flex; / * make this div an elastic box * /}. Flex-container. Flex-item {padding: 20px; background-color: # b1ff84 }. Flex-container .flex-item:first-child {background-color: # f5e25f;} .flex-container .flex-item:last-child {background-color: # 0B5A79;} 1 2

Running effect:

The equivalent of two div automatically floating to the left, by default, all direct child elements are considered flex items and are arranged in a row from left to right. If the total width of the flex items is larger than the container, the flex items will shrink proportionally until they fit the width of the flex container.

You can also line up the two child div and add: flex-direction: column to .flex-container

Running effect:

If the attribute added is flex-direction: column-reverse;, that is, the two div are exchanged (reverse means the opposite)

When you add justify-content: flex-end; to .flex-container, all flex will be aligned to the right by default:

Document * {margin: 0; padding: 0;}. Flex-container {background-color: # 131111; display: flex; / * make this div an elastic box * / justify-content: flex-end;}. Flex-container. Flex-item {padding: 20px; background-color: # b1ff84 }. Flex-container .flex-item:first-child {background-color: # f5e25f;} .flex-container .flex-item:last-child {background-color: # 0B5A79;} 1 2

Running effect:

When the justify-content value is: center, the flex entry is centered and aligned, and its running effect is as follows:

Justify-content has a total of six values, the first three are easy to understand: justify-start (default, left-aligned), center,justify-end

Space-evenly: the spacing between the leading edge of the flex container and the first flex item is equal to that between each adjacent flex item. (fool's Wharf Note: this attribute was rarely seen before because browsers did not support it before, and chrome did not support it until after version 60. To extend it, align-content: space-evenly is also the same logic)

Space-between: the spacing between any two adjacent flex items is the same, but not necessarily equal to the spacing between the first / last flex item and the edge of the flex container; the spacing between the start edge and the first item and the distance between the end edge and the last item is equal.

Space-around: the spacing between each side of each flex item in the flex container is equal. Note that this means that the space between two adjacent flex items will be twice the space between the first / last flex item and its nearest edge

A popular picture on the Internet better explains the performance of justify-content attribute values:

You can also give the specified div an up or down alignment:

Document * {margin: 0; padding: 0;} .flex-container {background-color: # 131111; display: flex; / * make this div an elastic box * / justify-content: center; align-items: center;} .flex-container. Flex-item {padding: 20px; background-color: # b1ff84 } .flex-container .flex-item:first-child {background-color: # f5e25f;} .flex-container .flex-item:last-child {background-color: # 0B5A79;} .flex-bottom {/ * Let this div up * / align-self: flex-start;} 1 2 2 3 33

Running effect:

Similarly, algin-item has five property values:

Flex-start | flex-end | center | baseline | stretch

The following figure shows the corresponding effect:

Allow multiple rows / columns of flex items

.flex-container {background-color: # 131111; display: flex; flex-wrap: wrap;}

By default, flex entries do not allow multiple row / column arrangement (nowrap), and if the flex container size is not large enough for all flex items, the flex items will be resized to accommodate a single row or column arrangement.

By adding flex-wrap: wrap, you can arrange the flex items of the overflow container into another row / column, which also has three values:

Nowrap (default): no line wrapping.

Wrap: line break with the first line at the top

Wrap-reverse: wrap, the first line is below

Insert a piece of code to see the effect:

Document * {margin: 0; padding: 0;}. Flex-container {background-color: # 131111; display: flex; flex-wrap: wrap; justify-content: space-evenly;/**/ align-content: space-evenly;}. Flex-container. Flex-item {padding: 20px; background-color: # b1ff84 } .flex-container .flex-item:first-child {background-color: # f5e25f;} .flex-container .flex-item:last-child {background-color: # 0B5A79;} .flex-bottom {/ * make this div down * / align-self: stretch } 1 2 3 4 5 6 7 8 9 10

Running effect:

When the length is not long enough, automatically wrap:

When the length is shorter:

Stretch flex item

Flex-grow takes effect only if there is space left in the flex container. The flex-grow property of the flex item specifies how much the flex item will stretch relative to other flex items to fill the flex container. The default value is 1. When set to 0, the flex item will not be stretched to fill the remaining space. In this example, the ratio of the two items is 1:2, which means that when stretched, the first flex item will take up 1 flex 3, while the second flex item will take up the rest of the space, and flex-grow controls the stretch ratio of the flex item, not the proportion of space occupied by the flex container.

Document * {margin: 0; padding: 0;} .flex-container {background-color: # 131111; display: flex;} .flex-item1 {flex-grow: 0;} .flex-item2 {flex-grow: 1;} .flex-item3 {flex-grow: 2;} .flex-container {width:400px; padding:10px; background-color: # F0f0f0 }. Flex-container. Flex-item {padding:20px 0; text-align: center; width:90px; background-color: # B1FF84;} .flex-container .flex-item:first-child {background-color: # F5DE25;} .flex-container .flex-item:last-child {background-color: # 90D9F7 } 1 2 3

I set all three div to width:90px

Running effect:

When you change the width of flex-container to 600:

You can see that 23 is filling the remaining space with different proportions, while grow-shrink is the opposite, with a default of 1, that is, if there is not enough space, the project will shrink.

After reading this, the article "what is the concept of flexbox in css3" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it to understand it. If you want to know more about related articles, please follow the industry information channel.

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.