Learn more about the Flexbox telescopic box model

Authors have long used tabular, floating, inline block elements, and other CSS properties to lay out site content. However, these are not designed for complex pages and Web applications. Whether it's a simple vertical center or a flexible grid layout that's hard to do with one's own power, the CSS grid framework has been achieved. But if you really need so many projects to do these things, why not make it easier? The purpose of Flexbox is to change all this.

Specification Status and browser support

The relevant work on the Flexbox specification has been in progress for 3 years. Different browsers also implement different versions of the experiment. In September 2012, the third major revision of Flexbox syntax entered the candidate recommendation phase. This means that the current syntax is stable and encourages browser developers to implement it.

Flexbox Specification Schedule:

• Draft work for July 2009 (Display:box;)
• Draft work for March 2011 (display:flexbox;)
• Draft work for November 2011 (display:flexbox;)
• Draft work for March 2012 (Display:flexbox;)
• Draft work for June 2012 (Display:flex;)
• September 2012 Candidate recommendation (Display:flex;)

Flexbox has been quickly supported by the browser. Chrome 22+, opera 12.1+, and opera Mobile 12.1+ have supported the Flexbox described in this article. Firefox 18 and Blackberry 10 will also be implemented soon. I recommend that you use an already supported browser to read this article and view examples.

Concepts and terminology

While we can now easily create layouts using Flexbox, rather than as difficult to understand as we used to, we still need to spend some time familiarizing ourselves with how to use Flexbox. New terminology and concepts may be an obstacle to our use of Flexbox, so let's start by understanding the following.

The Flexbox is made up of telescopic containers and telescopic projects . flexa scaling container can be obtained by setting the display property of the element inline-flex . The container that is set to is flex rendered as a block-level element, and inline-flex the container set to is rendered as an in-line element.

The example here creates a scaling container.

1 2 3 < Span id= "File-gistfile1-css-l4" class= "Line-number" >4

< Span class= "NC" >.flex-container { display: - Webkit-flex; display< Span class= "o" >: flex

View Rawgistfile1.cssthis Gist brought to your by GitHub.

All examples in this article will have a corresponding browser vendor prefix.

Each child element in a telescopic container is a scaling project. The scaling project can be any number. All elements inside and outside the telescopic container are unaffected. Simply put, Flexbox defines how the scaling items in the telescopic container should be laid out.

Flex Lines Retractable Line

The telescopic project is positioned along a telescopic line within the telescopic container. Typically, there is only one stretch row per telescopic container.

This example shows the positioning of 2 items by default: From left to right along a horizontal scaling line.

Writing Modes Writing mode

An important part of designing your Flexbox is changing the direction of the telescoping line. By default, the Flex line and text are in the same direction: from left to right, from top to bottom.

This is a draft of a new feature known as writing mode . Writing mode is a new way for you to write from right to left and even write vertically, just as you know in some languages.

Writing mode is an ongoing plan, but Chrome has pioneered direction CSS properties. If we set the direction in the previous example rtl (from right to left) then not only will the text be written from right to left, but the Flex line will also change direction and change the layout of the page.

This is perhaps why Flexbox is so abstract and difficult to understand. When you are making a page with an indeterminate language, you cannot simply say "up", "Down", "left", "right".

The main axis and the cross axis spindle and side axis

To describe the abstract writing pattern, Flexbox uses the concept of a spindle and a side axis . The telescopic line follows the spindle. The side axis is perpendicular to the spindle.

The names of the start, end, and axis directions are as follows:

• Spindle Start main start
• Spindle end point Main end
• Spindle direction main Direction (sometimes also as flow direction flow Direction)
• Side Axis start Cross start
• Side Axis End Cross End
• Cross Direction side axis direction

It is important to understand the spindle and the side axes before continuing to understand them. Everything in Flexbox is related to these axes. In all of our examples, the writing pattern is from left to right, top to bottom, but you need to remember that not all Flexbox are like this.

The properties of the telescopic container flex-direction the direction of the telescopic flow

flex-directionAllows you to change the spindle direction of the telescopic container. flex-directionThe default value is row . The value represents 书写模式 the orientation layout that the scaling project is based on. Again, the default is from left to right, top to bottom. The other values are as follows:

• Row-reverse: Spindle starting point and spindle end point Exchange. If the writing mode is left-to-right, the scaling item is displayed from right to left.
• Column: Spindle and side axle exchange. If the writing system is vertical, the telescopic item is also displayed vertically.
• Column-reverse: Same as column, but in the opposite direction.

Let's change the previous example to flex-direction column .

Now our telescopic project is displayed vertically.

Justify-content Spindle Alignment

The properties of the telescopic container are justify-content used to adjust the position of the telescopic item on the spindle. The possible values are:

• Flex-start (default)
• Flex-end
• Center
• Space-between
• Space-around

Here we set justify-content the center scaling item to be centered on the spindle:

flex-start, flex-end and center I know it at the first sight. space-betweenand space-around is a different way to allocate white space between scaling items. The illustration in this specification is a good explanation of everything:

Align-items Side Axis Alignment

align-itemsis a property that corresponds justify-content to and echoes. align-itemsadjust how the telescopic project is positioned on the side axis. The possible values are:

• Flex-start (default)
• Flex-end
• Center
• Baseline
• Stretch

Here we set align-items the center scaling item to be centered on the side axis:

As before,, flex-start , flex-end and center the meaning is obvious. stretchIt is also very simple: it stretches the telescopic project from the start of the side axis to the end of the side axis. baselineis to align the scaling items with their baselines. Baselines are calculated based on the contents of the scaling project. The following is a good illustration of these attributes:

Flex-wrap Stretch Line Wrapping

So far, each telescopic container has and has only one stretch row. With flex-wrap you, you can create multiple scaling rows for a telescopic container. This property accepts the following values:

• NoWrap (default)
• Wrap
• Wrap-reverse

If flex-wrap set to wrap , the scaling item wraps to a new stretch line when a scaling line cannot tolerate all the scaling items. The new telescoping row is added according to the direction of the side axis.

Let's take flex-wrap a look at an example:

wrap-reverseJust like wrap, the new telescoping line is added to the side axis of the opposing upward.

Align-content Stack Scaling rows

align-contentflex-wrapthe behavior that will change. It align-items is similar to, but not aligned with, the scaling project, which aligns with the scaling line. As you might have thought, the values it accepts are similar:

• Stretch (default)
• Flex-start
• Flex-end
• Center
• Space-between
• Space-around

These values are justify-content the align-items same as the values in.

In this example, we set this align-content to center :

Flex-flow stretching direction and line wrapping

flex-flowis flex-direction flex-wrap the abbreviation for and.

Flex-flow: [Flex-direction] [Flex-wrap]

As an example:

1 2 3 < Span id= "File-gistfile1-css-l4" class= "Line-number" >4

. Flex-container {-webkit-Flex-flow: column nowrap ; Flex-flow: column nowrap; }

View Rawgistfile1.cssthis Gist brought to your by GitHub.

Properties of the Scaling project

A scaling project is a child element of a telescopic container. The text in the telescopic container is also considered a scaling item.

The content in the scaling project is the same as the normal flow. For example, when a scaling item is set to float, you can still place a floating element in the scaling project.

The telescopic project has a spindle length (main size) and a side axis length (cross Size). The spindle length is the size of the telescopic item on the spindle. The side shaft length is the size of the telescopic item on the side axis. Alternatively, the width or height of a telescopic item depends on the axis of the telescopic container, possibly its spindle length or the length of the side shaft.

The following properties can adjust the behavior of the scaling project:

Order display Sequence

orderIs the simplest and most straightforward attribute. Set the order of the scaling items to adjust the sequence in which they are rendered. In this example, we set one of the scaling items order to 1, so it was advanced to the front of the other scaling projects.

This is a useful feature if you need a document order and a display order that is not the same.

margin outer margin

You should be margin: auto; familiar with this usage. It can do the same thing in a telescopic box, but it's more powerful. A margin of "auto" merges the remaining space. It can be used to squeeze telescopic projects to other locations.

Here we declare on the first scaling project margin-right: auto; , causing all the remaining space to be merged to the right of that element:

Here we use margin: auto; to reproduce the Holy Grail in the classic CSS layout: true • Vertical centering:

Align-self Side Axis Alignment

The properties of the telescopic project align-self override the properties of the project's scaling container align-items . Its value is the align-items same as:

• Stretch (default)
• Flex-start
• Flex-end
• Center
• Baseline

In this example, we have applied different values for each scaling project align-self :

I've included 2 baseline aligned scaling items in the example, because their alignment needs to interact with one another.

Flex Scalability

Now we are finally going to start to set the scalability of the telescopic box. flexspecifies how a scaling project allocates the remaining space on the spindle.

Let's take a look at all the common values at once.

Flex: [NUMBER]

This syntax specifies a number that represents the percentage of the remaining space that the scaling item occupies.

In this example, the first scaling item takes up 2/4 of the remaining space, while the other two takes up 1/4 of the remaining space.

If you set each scaling item to 1, the remaining space will be evenly distributed.

Flex:initial

A flex scaling item with a property value set to it initial will not change if there is space left, but will shrink if necessary.

Flex:auto

A flex scaling item that is set to a property value auto that automatically scales according to the spindle to occupy all remaining space.

autoCurrently only valid in Opera 12.11, not available on Chrome 23.0.1271.95. You can use it flex: 1; to achieve the same effect.

Flex:none

A flex property value is set as a none scaling project and does not scale in any case.

Flex abbreviation

flexcan also put flex-grow , flex-shrink , and flex-basis these 3 abbreviations for 1 declarations:

Flex: [Flex-grow] [Flex-shrink] [flex-basis]

In most cases it is not necessary to use this syntax. In addition, it requires an easier-to-understand scaling algorithm. If you think you're a tough one, check it out in the specs.

Of course you can also flex-grow flex-shrink set, and flex-basis separate as a single attribute. But I strongly oppose this approach: when flex you use abbreviations, you get a more reasonable default value even if no value is set.

Visibility Overlay Project

When the value is in effect, visibility: collapse; the visibility: hidden; effect is different from the display: none; one applied. If collapse so, the element will affect the length of the side axis of the telescopic container, but will not be realistic or occupy the space of the spindle. This is useful if you want to dynamically add or remove scaling items without affecting the side axis length of the telescopic container.

So far, visibility: collapse; no browser has been properly implemented. visibility: collapse; visibility: hidden; The same effect is now being achieved. I hope to get a change soon.

You can see here collapse how it should work.

Summarize

As you can see, the Telescopic layout box (Flexbox) is a powerful new layout pattern that will revolutionize the way the site is laid out, but it also needs a new way of thinking. Hopefully this article will help you build your website with a retractable layout box. I don't know what you think, but in my opinion the future is good.

Original: Dive into Flexbox (Http://weblog.bocoup.com/dive-into-flexbox)
Reference: Css3-flexbox (Http://www.w3.org/html/ig/zh/wiki/Css3-flexbox)

Turn from: [Translate] in-depth understanding of the Flexbox Telescopic box model: http://c7sky.com/dive-into-flexbox.html

This article turns from http://www.w3cplus.com/blog/666.html

Learn more about the Flexbox telescopic box model