Quick Start to Flexible Box Model

Introduction

I'm sure you know enough about the horizontal or vertical style elements on the page. However, CSSThere is also a lack of appropriate mechanisms for this task. Understanding CSS3. Elastic box model (abbreviatedFlexbox)

The draft describes Flexbox as follows:

[...] CSS optimized for Interface DesignBox Model. Besides the existing Layout System in CSS,The model also provides an additional layout system. [CSS21] in this new box model, the child of the box uses a horizontal or vertical layout, and unused space can be allocated to a specific child, you can also allocate the child to be expanded through "ELASTIC. The nesting of these boxes (horizontal nesting in vertical, or vertical nesting in horizontal) can be used to build a layout in two dimensions. This model is based on the XUL user interface language model and is suitable for multipleThe User Interface of Mozilla applications (such as Firefox.

Great. For developers like you, it's a layout architect.™What does this mean?

Flexbox isdisplayAttribute is assigned a new value (that isBoxValue). We also provide 8 new attributes:

• box-orient
• box-pack
• box-align
• box-flex
• box-flex-group
• box-ordinal-group
• box-direction
• box-lines

Eight new attributes? Yes, do you think it's too much? Well, let's introduce it separately.

Commonly used Flexbox style attributes are used for Box styles

display: box

The new value of the display style can add this element and its immediate child to the elastic box model. The Flexbox model is only applicable to immediate child generations.

box-orient

Value: horizontal| vertical| inherit

How are the child objects in the box arranged? There are two other values: inline-axis(True default) and block-axisBut they are mapped to the horizontal and vertical directions respectively.

box-pack

Value: start | end| center| justify

Set the edge box-orientAxis box arrangement. Therefore, if box-orientIn the horizontal direction, select the horizontal arrangement of the child of the box, and vice versa.

box-align

Value: start| end| center| baseline| stretch

Basically box-pack. Sets the arrangement of the child in the box. If the direction is horizontal, this attribute determines the vertical arrangement, and vice versa.

Style used for the child of the box

box-flex

Value: 0| Any integer

The elastic ratio of the child. Elasticity ratio is 1The space occupied by the child of the parent box is elastic ratio 2Double the same-Level Attribute. The default value is 0That is, it is not elastic.

The abovebox-flex-group,box-ordinal-group,box-directionAndbox-linesI will not introduce attributes, because to be honest, most of your Flexbox works may not use these. If you want to know these attributes during use, visit the link in the abstract.

Syntax description: currently, to implement Flexbox in Webkit and Gecko, you must use the vendor prefix. In this tutorial, I skipped most of this content for clarity. For more information, see browser support.

What is Elasticity?

box-flexStyle attributes define whether the child of Flexbox is elastic or non-elastic, and help to define the elasticity ratio of the child to its peers. Let's demonstrate what this means. First, we start with three boxes.

<divid="flexbox"><p>child 1</p><p>child 2</p><p>child 3</p></div>

Now we need to arrange them horizontally adjacent, and keep the same height regardless of the content. How do you solve this problem? Most people may float these paragraphs without thinking, maybe add them to the parentoverflow:hidden;To clear the floating position. There are no special tricks. But with Flexbox, we can easily achieve the same purpose.

#flexbox {   display: box;  box-orient: horizontal;}

In the above Code, we only need to inform the parent to operate according to the Flexbox model and arrange all its children along the horizontal axis. No floating. Good!

The width of the child is still the specified value (or its inherent width is not specified ). This means that if the total width of all the child generations is less than the total width of the parent generation, we will get this effect:

By default, the children of Flexbox are still not flexible. This may seem a bit strange, but this gives the child users the opportunity to join the elastic experience. However, if you want the first and second child to have a specific width, and the third child to adjust the width based on the available space in the parent child, what should you do? In this case, it's Flexbox's turn to show off:

#flexbox {   display: box;  box-orient: horizontal;}#flexbox > p:nth-child(3) {  box-flex:1;}

We set the last child to be elastic to occupy the available space. Because we only allocate space for one element, it occupies all the available space.

Note that this element is only elastic in the vertical direction of the box. In this example, It is elastic in the horizontal direction.

The value of box-flex is relative. Therefore, if we set the second and third child to elastic:

#flexbox {   display: box;  box-orient: horizontal;}#flexbox > p:nth-child(2),#flexbox > p:nth-child(3) {  box-flex:1;}

They occupy the same size of available space, which is actually divided equally.

Now, we can alsobox-flexSet1,2And3And then they will absorb the excess space of their parent generation according to this proportion. Let's take a look at the actual operation.

Basic example

View the following code and result:

Hover over a box to view the actual effect of the elastic box: When the hover target expands, the rest of the boxes will be reduced, but the total width is always the same as the size of the parent box.

There are actually two styles used here:display: boxConvert the content to Flexbox mode, and then the child'sbox-flex: 1Run the content in elastic mode to occupy all the extra space. The default direction is horizontal, sobox-orient: horizontalIn fact, it is not necessary, but it is best to add it in order to express clearly and facilitate maintenance. Defaultbox-alignIt is elastic, so these divs occupy the entire height of the parent box. Not bad? You can learn about the application of this technology in navigation in this demonstration created by Raphael Goetter.

Let's go deeper.

Central stage: center Positioning

In CSS, it has always been a challenge to center objects horizontally and vertically. The best solution we can come up with isposition:absolute; left: 50%; top: 50%;It is combined with a negative left/top margin equal to half width/height. This can only be used with elements with a fixed size. Ah!

James John Malcom wrote that there is a method based on at least six years of historydisplay:table-cell;(Duesan Janovsk networks) was written in 2004) to vertical alignment. James records the complete horizontal and vertical solutions here. This solution can take effect without the need to determine the size of elements.

With Flexbox, we can achieve this more easily:

We do not setbox-flexBecause we do not want it to use extra space. We only want it to be centered regardless of its size. A major advantage of doing so is that we can center it without knowing the specific size. Generally, we can use block or Inline objects to complete this operation. It is so easy to use.

Browser support

Can you use the elastic box model at work now? Not yet, at least not for all browsers. Currently, we have not implemented Flexbox in IE9 or Opera 10.60, but it has appeared in a preview of IE9 Platform. Therefore, Microsoft may add this feature at some time in the future.

Caniuse.com lists currently supported browsers, including Firefox 3 and later, Safari 3 and later, and Chrome. If you are developing a mobile Webkit, Flexbox will be an excellent alternative to the standard layout solution.

Of course, all these are still in the lab phase, so you should still use the vendor Prefix:

/* i wish it was as easy as this: */display: box;box-orient: horizontal; box-pack: center;box-align: center;

/* but in reality you'll need to do this: */display:-webkit-box;-webkit-box-orient: horizontal;-webkit-box-pack: center;-webkit-box-align: center;display:-moz-box;-moz-box-orient: horizontal;-moz-box-pack: center;-moz-box-align: center;display: box;box-orient: horizontal;box-pack: center;box-align: center;

If you think this involves many categories, Alex Russell summarizes all these options into some useful help categories.

Summary

Even if you do not consider the other four attributes, there are many possibilities. For more information about Flexbox, see the Flexbox demo in Isotoma and the post about Flexbox on Mozilla Hacks. W3C Flexbox specification. Start designing some la S. Try it out!

Some tutorials are based on the guide prepared by Stephen hay (he has agreed to authorize his work under CC-).