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

This article focuses on "how to master the CSS tool Flexbox", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to master the CSS tool Flexbox.

With the introduction of CSS grid layouts, you may ask if flexbox layouts are really necessary. Although there is some overlap in what they can do, each has a very special purpose in the CSS layout. In general, flexbox works best in one-dimensional scenarios (for example, a string of similar elements), while grids are ideal for layout in two-dimensional scenarios (such as elements of an entire page).

Even so, flexbox can still be used for the layout of the entire page, so that it can provide appropriate compatibility for browsers that do not yet support grid layout. (admittedly, grid layouts are quickly supported in most modern browsers, but support for flexbox is still more widespread, so it's easy to use flexbox as a downgrade scheme for grid layouts if you want your layout to work in slightly older browsers.

Benefits of using Flexbox

Some of the benefits of flexbox are:

Page elements can be placed in any direction (left, right, top-down, or even bottom-up)

The visual order of layout content can be reversed or rearranged

The size of the element can be "flexible" to adapt to the available space and align accordingly according to the container or sibling element.

Can easily achieve equal column width layout (regardless of the contents of each column)

To illustrate its various attributes and possibilities, let's assume that there are layout use cases like this:

Header content here nav content here main content here aside content here footer content here

The first is to put the elements together in .main, for example, and. Without flexbox, we might float all three elements, but it's not intuitive to want it to work the way it's supposed to work. Moreover, there is a well-known problem with doing it the traditional way: each column is only as high as its content. Therefore, you may need to set all three elements to a unified height.

Let flexbox come to the rescue.

Let's Flex

The main point of flexbox is the flexure value that appears on the display attribute, which needs to be set on the container element. This setting makes its child elements "flex item". These elastic projects have some default properties that are easy to use. For example, they are placed next to each other, and the elements that do not specify the width automatically fill the remaining space.

Therefore, if you set display:flex for .main, its child element .content is automatically squeezed between and. There is no need for extra calculation, how convenient is it? As an additional reward, all three elements magically have the same height.

.main {display: flex;}

Please see the following example, which contains all the details

Order of items: the * order**** attribute of Flebox

Another capability of flexbox is the ability to easily change the order in which elements are displayed. Let's assume that you made the above layout for a customer who now wants .content to appear before.

Usually, you need to dive into the HTML source code and change the order of the elements there. With Flexbox, you can completely use CSS to accomplish this task. Simply set the order property of .content to-1, and this column will appear in front, which in this case is the leftmost.

.main {display: flex;} .content {order:-1;}

In this case, you do not need to change the order of the other columns. The example is in flexbox-demo-2.

If you prefer to explicitly specify order for each column, you can set the order of .content to 1, the order to 2, and the order to 3.

The HTML source code is independent of CSS's Flexbox style

But your client is not satisfied. She wants to be the first element on the page, displayed before. Well, again, flexbox is your friend (although, as in this case, you may have to talk to your client instead of following instructions). Because you have to rearrange not only the inner elements, but also the outer ones, the display:flex rule will be set on top. Notice how the flex container is nested within the page to achieve the effect you want.

Because, and stack each other, you need to first set a vertical context, which can be done quickly by setting flex-direction:column. Also, the order is set to-1 so that it appears at the top of the page. It's that simple.

.example {display: flex; flex-direction: column;} footer {order:-1;}

So, if you want to change a row of elements to a column, or vice versa, you can use the flex-direction attribute and set it to column or row accordingly (row is the default).

However, powerful capabilities also come with more responsibility: keep in mind that some users may use keyboards to navigate your flexbox-based site, and if the order of the elements in your HTML source code is different from that shown on the screen, then accessibility becomes a serious issue.

How to align subitems in Flexbox

Flexbox can very intuitively handle the horizontal and vertical alignment of subitems.

You can use align-items to set uniform alignment for all subitems in the flex container. If you want to set different alignment for individual elements, use align-self. The alignment of the element is related to the flex-direction of the parent container in which it resides. If its value is row (meaning elements are arranged horizontally), alignment refers to the vertical axis. If flex-direction is set to column (meaning elements are arranged vertically), alignment means on the horizontal axis.

For example, if you let some elements have different alignment in the container, you need to:

Set the align-self attribute of each element to the appropriate value. Possible values are: center,stretch (the element fills its container), flex-start,flex-end and baseline (the element is placed on the baseline of the parent container) set the container element to display:flex. Finally, pay attention to the flex-direction attribute of the parent container, as it relates to the alignment of the child elements. .example {display: flex; flex-direction: column;} .red {align-self: center;} .blue {align-self: flex-start;} .pink {align-self: flex-end;}

Try switching the flex-direction of the parent container between row and column in the following example to see the real-time changes they cause.

If you want all the elements in the container to have a uniform alignment, you can use align-items on the container. Possible values are center,flex-start,flex-end,stretch (default: the child items are stretched to fit their container) and baseline (the child items are placed on the baseline of the parent container).

.example {display: flex; align-items: center;}

As usual, try switching the flex-direction of the parent container between row and column to see how they affect what happens when you set the align-items value.

Align both ends in Flexbox

Another attribute that controls alignment is justify-content, which is useful when you want multiple elements to be equally spaced.

Acceptable values are center,flex-start,flex-end, space-between (elements are arranged using the space between the spindles) and space-around (elements are arranged using the space before, between, and after the spindles).

For example, in the simple HTML template you've been using before, you can find three elements in: .content and. Previously, they were all squeezed on the left side of the page. If you want some space between them, but do not want space on the left of the first element or on the right of the last element, you can set the justify-content in .main (their parent container) to space-between.

.main {display: flex; justify-content: space-between;}

Also try setting it to space-around and observe the different results.

The size of elastic subitems in Flexbox

Using the flex attribute, you can control the size of elastic subitems against other elements in the flex container.

This property is an abbreviation for the following independent properties:

Flex-grow: a number indicating how the element stretches relative to other flex items

Flex-shrink: a number indicating how elements contract relative to other flex items

Flex-basis: length of the element. Acceptable values are: auto,inherit or a number followed by%, px,em, or other unit of length.

For example, to get three columns of equal width, simply set flex:1 for each column and do nothing else:

Nav, aside, .content {flex: 1;}

If you need .content to occupy twice the width of the sum, set .content to flex:2 and the other two to 1.

That's just the simplest application of the flex attribute. You can also set the values flex-grow,flex-shrink and flex-basis.

At this point, I believe you have a deeper understanding of "how to master the CSS tool Flexbox". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.