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

In this issue, the editor will bring you about how to use FlexibleBoxes in CSS3. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

What is Flexible Box? Flexible means retractable and Box means box, which can be understood as a new type of box model-telescopic box model. Proposed by the CSS3 specification, this is a new generation of layout pattern based on the original familiar block, inline-block and inline.

Browser compatibility

As a very realistic developer, whether or not to pay attention to a new technology, we should first consider its browser compatibility. The browser compatibility of our telescopic box model looks pretty good.

As you can see, modern browsers basically support it, and IE10 also supports it at the beginning (IE and Safari can be prefixed with-ms- and-webkit-, respectively). The support for mobile devices is also relatively good. The only platform that is not supported is Opera. Let's not take him to play → _ →.

Therefore, Comrade Obama said: the telescopic box model is good and promising. (mm-hmm)

Basic concept of telescopic box

The biggest feature or advantage of the telescopic box is that it takes into account the contradiction between today's high housing prices and the growing housing demand of the people, the housing area is limited, but our telescopic box can distribute the house to everyone most reasonably and efficiently. The area is more, give the big guys more points; the area is small, let you squeeze a little bit, in short, will not let anyone sleep on the street (overflow)!

Now that we have mentioned the relationship between the house and the residents, the arrangement of the residents naturally needs to be in a certain direction. For block-level elements, the layout extends in a top-down direction, that is, vertically. For inline elements, the layout extends from left to right, that is, horizontally. As for the telescopic box, its direction is variable, which can stretch both longitudinally and horizontally, depending on your setting.

Basic terminology of telescopic box model

The idea of the telescopic box model is quite different from that of ordinary block-level elements and inline elements. It introduces some new concepts and terms, which you can learn from the following figure:

Flex container telescopic box container

This is the house used to divide, this is a magical house, to make it magical, declare the display property as flex or inline-flex.

Flex item expansion item

The residents of the house, they will occupy the housing area they deserve.

For the sake of illustration, we use code to explain.

XML/HTML Code copies content to the clipboard

Item 1 item 2 item 3

CSS is set to:

CSS Code copies content to the clipboard

.container {display: flex; width: 300px; height: 100px;...}

Display: inline-flex; seems to be fine here.

For the telescopic elements, we need to arrange the housing area ratio for them in advance. Let's use the simplest and healthiest 1:1:1 ~ We declare the proportion in the flex attribute.

CSS Code copies content to the clipboard

Item-1 {flex: 1;...} .item-2 {flex: 1;...} .item-3 {flex: 1;...}

Our big house is perfectly divided into three cubicles, and the rent is divided equally among the three families!

If someone wants to live in a bigger house, we can just change the proportion of flex:

CSS Code copies content to the clipboard

Item-1 {flex: 1;...} .item-2 {flex: 1;...} .item-3 {flex: 2;...}

Isn't it convenient?

Axes axis

We can see that there are two axes in the figure, marked with the primary axis and the secondary axis (perpendicular to the principal axis). However, in fact, which is the main axis is not certain, it is up to us to determine.

1. Flex-direction this property specifies which axis is the principal axis.

2. Justify-content this property sets how the stretch items are arranged in the principal axis direction, which will be explained later.

3. Align-items this attribute is relative to the justify-content above, indicating how the expansion items are arranged on the secondary axis.

4. Align-self this attribute specifies how a particular scaling item element is laid out on the secondary axis, and setting this attribute on an element overrides its align-items attribute. That is, this attribute will make an element more individual and unusual.

Flex-direction

When we do not want to divide the house in the default direction, we can change the principal axis and direction by changing the value of the flex-direction property, which defaults to row

CSS Code copies content to the clipboard

.

Container {flex: row-reverse;...}

As the name implies, this reverses the alignment of stretch items:

When this property is set to column, the primary and secondary axes are reversed, and the orientation of the elements changes accordingly:

CSS Code copies content to the clipboard

.container {flex-direction: column;...}

As for the meaning of flex: column-reverse, I don't need to say any more.

Justify-contents

Sometimes, we live next to each other, there is no space will be very uncomfortable, not even an aisle, privacy can not be guaranteed, right? At this time, we can change the distribution policy, no longer proportional distribution, but a fixed amount of distribution, the area of each person is determined. The extra housing area is changed into a public area.

CSS Code copies content to the clipboard

Item {width: 80px;.}.

Remember to remove the declaration of the flex attribute after setting the width attribute, otherwise the effect of the flex attribute will still overwrite the width.

At the same time, if the width attribute is not set, the element width will appear as the width of the content, and which means will not render when there is no content inside the scaling item, just like display: none;.

At this point, declare the justify-content attribute on the container to arrange the location of the scaling item:

CSS Code copies content to the clipboard

.content {justify-content: flex-start | flex-end | center | space-between | space-around;}

Align-items

This attribute changes the way the elements are arranged on the secondary axis. For this example, the height of the element in the direction of the secondary axis is shown as height: 100%;, and its height performance will change when the align-items attribute is set.

CSS Code copies content to the clipboard

.content {align-items: flex-start | flex-end | center | baselinebaseline | stretch;}

Speaking of which, the specific performance of the expansion item can actually be imagined. If you can't imagine it, try it yourself.

Order

By declaring this property on the scaling item, you can disregard the order of the HTML structure and arrange the order in the flex-direction direction in the order from smallest to largest. For example:

CSS Code copies content to the clipboard

Item-1 {order: 3;...} .item-2 {order: 1;...} .item-3 {order: 2;...}

Flex-wrap

The default value of this property is nowrap, that is, ignore the width of the stretch item, no matter how much housing area you want, all the allocation according to the flex attribute, no line wrapping.

CSS Code copies content to the clipboard

.container {flex-wrap: nowrap | wrap | wrap-reverse} .item {width: 150px;}

Flex-grow,flex-shrink and flex-basis

The flex attribute mentioned above is actually a shorthand for these three properties. These three attributes are similar and represent the relative proportion of the allocated space between items. The difference is that:

1. Flex-grow property: the property value is the ratio of the space occupied by this extension to other scaling items (items that declare flex-related attributes).

2. Flex-shrink attribute: the ratio by which this item is reduced relative to other items, that is, when flex-shrink: 3;, the space occupied by this item is 1 inch 3 of that of other items.

3. Flex-basis property: the property value is the percentage of the space occupied by the item in the container space.

Note: for the flex-basis attribute, when the attribute values of all items add up to 100%, the element does not overflow, but rather shows that the space occupied between the two pairs follows the ratio of the percentage of each other. That is to say, when there are three scaling items and the flex-basis value is 50%, the performance behavior is the same as flex: 1; for all three items.

Flexible Boxes layout mode is particularly useful in responsive development, and it will be very easy to set up space allocation relationships between elements for different terminals.

The above is the editor for you to share how to use FlexibleBoxes in CSS3, if you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to 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.