Apicloud 10 minutes to learn the basic Flexbox layout

What is Flexbox?

Flexbox is the abbreviation for flexible box, meaning "flexible box container", which is the new layout mode introduced by CSS3. It determines how elements are arranged on the page so that they can be displayed predictably on different screen sizes and devices.

It is called Flexbox because it expands and shrinks the elements within the Flex container to maximize the available space. Flexbox is a much more powerful approach than the previous layout method, such as table layout and inline block elements in floating elements:

Arranging elements in different directions

Rearrange the order in which elements are displayed

Change the alignment of an element

To dynamically load elements into a container

Under what circumstances is the use of Flexbox not recommended?

While Flexbox is ideal for scaling, aligning, and reordering elements, you should avoid using the Flexbox layout as much as possible:

Overall page layout

Web site with full support for old browsers

Browsers support the Flexbox scenario:

Legacy browsers, such as IE 11 or earlier, do not support or only partially support Flexbox. If you want to safely use the page to render properly, you should return to other CSS layouts, such as Display:inline-block or display:table with float. However, if you are only targeting modern browsers, then Flexbox is definitely worth a try.

Terms

In the Flexbox model, there are three core concepts:

–flex items, elements that require layout

–flex container, which contains flex items

– Alignment direction (direction), which determines the layout direction of the Flex item

The best way to learn is to learn from experience and examples, so let's get started!

Level 1?—? Basics

1) Create a flex container

To create a flex container, you only need to add an Display:flex property to an element. By default, all immediate child elements are considered flex items and are arranged from left to right in one row. If the total width of the flex items is greater than the container, the flex items are scaled down until they fit into the flex container width.

2) Arrange flex items in one column

The flex item can be vertically laid out by setting Flex-direction:column (in the Flex container). You can also set the flex items in reverse order by setting flex-direction:column-reverse or Flex-direction:row-reverse.

Level 2-Novice

1) Right-aligned flex items

Recall that each Flexbox model has a flex direction (spindle). The justify-content is used to specify the alignment position of the flex item on the flex direction (direction). In the example above, Justify-content:flex-end indicates that the flex item is aligned horizontally in the end of the Flex container. That's why they were put on the right.

2) center-aligned flex items

3) rolled-out flex items

You can specify how much space should be displayed between flex items in a container by using one of the three spacing values of the following justify-content properties:

Space-evenly:flex the spacing between the start edge of the container and the first flex item and the spacing between each adjacent flex item is equal. (Author Note: This attribute was rarely seen before, because it was not supported by the previous browser, and Chrome is supported after version 60.) Extension, Align-content:space-evenly is also this logic, it is recommended to view this demo under Chrome 60. )

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

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

Author Note: The online search for a picture can better explain the performance of Justify-content property values,

4) Alignment of flex items on the intersection axis

In general, we want to arrange flex items along the flex direction (spindle) and align flex items in the direction perpendicular to it (the cross axis). By setting Justify-content:center and Align-items:center, you can place flex items horizontally and vertically in the center of the flex container.

5) aligning a specific flex item

You can use the Align-self CSS property on a particular flex item to align that particular flex item with other flex items in the container.

Level 3?—? Intermediate

1) Allow Flex Xiangdo/column arrangement

By default, flex items do not allow multi-row/column arrangement, and if the Flex container size is not large enough for all flex items, flex items are resized to fit in a single row or column arrangement.

By adding Flex-wrap:wrap, flex items that overflow the container can be arranged into another row/column.

2) Flex Item reverse multirow/column arrangement

Flex-wrap:wrap-reverse still causes flex items to be arranged in multirow/columns, but they are arranged from the end of the Flex container.

3) alignment of multi-row/column-aligned flex items on the cross axis

By default, when there is extra space on the cross axis of the Flex container, you can set align-content on the Flex container to control how the flex item is aligned on the cross axis. The possible values are Flex-start,flex-end,center,space-between,space-around, space-evenly, and Stretch (default).

Level 4?—? Advanced

1) Stretch Flex items

Flex-grow will only take effect if there is space left in the Flex container. The flex item's Flex-grow property specifies how much of the flex item will be stretched relative to the other flex items to populate the Flex container. The default value is 1. When set to 0 o'clock, the flex item will not be stretched to fill the remaining space. In this example, the ratio of two items is 1:2, meaning that when stretched, the first flex item will occupy 1/3, and the second flex item will occupy the remaining space.

Note: It is particularly important here that Flex-grow controls the stretch ratio of flex items, rather than occupying the spatial proportions of the flex container.

2) Shrink Element

Flex-shrink only takes effect when there is not enough space in the Flex container. It specifies how much the flex item will shrink relative to the other flex items so that flex items do not overflow the flex container. The default value is 1. When set to 0 o'clock, the flex item will not be shrunk. In this example, the ratio is 1:2, meaning that the first item shrinks by 1/3 while the second item shrinks by 2/3. Author Note: Flex-shrink and Flex-grow just the opposite

3) Set the size of the element

You can use Flex-basis to customize the flex item size in place of the initial size of the element. By default, its value is Flex-basis:auto, which means that the dimension is calculated from non-Flexbox CSS rules. You can also set it to a value that is either absolute or relative to the flex container percentage, such as flex-basis:200px and flex-basis:10%.

4) put Flex-grow, Flex-shrink, and flex-basis together

Flex is the abbreviation for Flex-grow,flex-shrink and flex-based. In this example, the first flex entry is set to flex-grow:1,flex-shrink:0,flex-basis:100px, and the second flex entry is set to Flex-grow:2,flex-shrink:0,flex-basis: 10%.

Analysis of this example above, because there is space (90px) in the Flex container (200px), only Flex-grow can work, Flew-shrink is ignored. The first flex item has a flex-grow of 1, the 2nd Flex item has a flex-grow of 2, so the 1th Flex item stretches 30px, and the 2nd Flex item stretches 60px.

Summarize

Flexbox easy to learn and operate. Because the Web development cycle is short and the iteration is fast, it is particularly useful for the knowledge it uses. If you want to try more before using Flexbox in your project, you can access the flexyboxes and Flexbox Froggy exercises.

For more app information, please follow www.apicloud.com

In this article, if the Fool pier infringement, please contact the site delete.

Apicloud 10 minutes to learn the basic Flexbox layout