CSS3 layout mode: Telescopic layout box (Flexbox)

Article Introduction: authors have long used tables, floats, inline block elements, and other CSS properties to lay out web site content. However, these are not designed for complex pages and Web applications. Whether the simple vertical center, or flexible grid layout is difficult to rely on one's own force easy to achieve, so the achievement of the CSS grid framework. But if you really need so many projects to do these things

introduce

Flexbox (Telescopic layout box) is a new layout pattern in CSS3, designed for more complex web page requirements in modern networks. This article will introduce the technical details of the Flexbox syntax. Browser support is getting faster, so when Flexbox is widely supported and applied, you will be quicker. If you want to know what it is and how it works, you might as well take a closer look at it!

Why do I need a telescopic layout box (Flexbox)?

Authors have long used tables, floats, inline block elements, and other CSS properties to lay out web site content. However, these are not designed for complex pages and Web applications. Whether the simple vertical center, or flexible grid layout is difficult to rely on one's own force easy to achieve, so the achievement of the CSS grid framework . But if you really need so many projects to do this, why not make it easier? The purpose of Flexbox is to change all this.

specification status and browser support

The relevant work of the FLEXBOX specification has been progressing for 3 years. Different browsers also implement different versions of the experiment. In September 2012, thethird major revision of the Flexbox syntax went to the candidate recommendation stage . This means that the consortium believes that the current syntax is stable and encourages the browser developer to implement it.

Flexbox Specification Schedule:

• July 2009 draft work (Display:box;)
• March 2011 draft work (Display:flexbox;)
• November 2011 draft work (Display:flexbox;)
• March 2012 draft work (Display:flexbox;)
• June 2012 draft work (DISPLAY:FLEX;)
• September 2012 Candidate recommendation (Display:flex;)

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

Concepts and terminology

While we can now easily create layouts using Flexbox, not as difficult to understand as before, we still need to take some time to become familiar with how to use Flexbox. New terminology and concepts may be an obstacle to our use of Flexbox, so let's take a look at them first.

The Flexbox is made up of telescopic containers and telescopic projects . flex inline-flex You can get a telescopic container by setting the display property of the element. The container set to is flex rendered as a block-level element, and the container set to is inline-flex rendered as a inline element.

The example here creates a telescopic container.

1234	. Flex-container { display: -webkit-flex; Display: Flex;}

View Raw Gistfile1.css This GistBrought to and by GitHub.

1234	. Flex-container { display: -webkit-flex; Display: Flex;}

View Raw Gistfile1.css This GistBrought to and by GitHub.

All of the examples in this article will have the appropriate browser vendor prefix.

Each child element in a telescopic container is a scalable project. Telescopic projects can be any number of. All elements outside the telescopic container and within the telescopic project are unaffected. Simply put, the Flexbox defines how the telescoping project in a telescopic container should be laid out.

Flex Lines Telescopic Line

The telescopic project is positioned along a telescopic line within the telescopic container. Usually there is only one telescopic line for each telescopic container.

This example shows the positioning of 2 projects by default: It is displayed from left to right along a horizontal stretch line.

Writing Modes Writing mode

One important part of designing Flexbox is to change the direction of the flex line. By default, telescopic lines and text are in the same direction: from left to right, from top down.

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

Writing mode is an ongoing plan, but Chrome has been the first to support direction CSS properties. If we set the direction to rtl (from right to left) in the previous example, 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 a language uncertainty, you can't 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 the spindle and the side axis . The telescopic line follows the spindle. The side axis is perpendicular to the spindle.

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

• Spindle Start main start
• Spindle Endpoint Main End
• Main spindle Direction Direction (sometimes also become the flow direction of telescopic flows Direction)
• Side axis start Cross start
• Side axis Endpoint Cross end
• Side axis Direction Cross Direction

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

Properties of Telescopic containers

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 of the Flex project. Again, the default is from left to right, from top to bottom. The other values are as follows:

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

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

Now our telescopic project is vertically displayed.

Justify-content Spindle Alignment

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

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

Here we set up to align the justify-content center telescopic items to the center of the spindle:

flex-start, flex-end , and center a look on the understanding. space-betweenand space-around is a different way to allocate blank space between telescopic projects. The illustration in this specification is a good explanation for everything:

Align-items Side Axis Alignment

align-itemsis a and justify-content echoes the attribute. align-itemsAdjust the alignment of the telescopic project on the side axis. The possible values are:

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

Here we set up to align the align-items center telescopic items on the side axis:

As before,,, flex-start flex-end and center The meaning of the obvious. Is stretch simple: It stretches the telescopic item from the side axis to the end of the side axis. baselineis to align the Flex project with their baseline. The baseline is calculated based on the contents of the telescopic project. The following illustration from the standard of the consortium is a good explanation for these attributes:

Flex-wrap Stretch Line Wrapping

So far, each telescopic container has and has only one telescopic line. Use flex-wrap you can create multiple telescopic lines for telescopic containers. This property accepts the following values:

• NoWrap (default)
• Wrap
• Wrap-reverse

If flex-wrap set to wrap , in a telescopic line can not accommodate all the expansion of the project, the expansion of the project will wrap to a new line of expansion. The new expansion line is added according to the direction of the side axis.

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

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

Align-content Stack Flex Line

align-content flex-wrap The behavior that will change. It align-items is similar to, but not aligned to, a telescopic project, which aligns to a telescopic line. As you may 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 are set align-content to center :

Flex-flow expansion direction and line wrapping

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

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

As an example:

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

View Raw Gistfile1.css This Gist brought to and byGitHub .

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

View Raw Gistfile1.css This Gist brought to and byGitHub .

properties of a scalable project

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

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

Telescopic items have 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 project depends on the axis of the telescopic container, which may be its spindle length or side shaft length.

The following properties can adjust the behavior of a scalable project:

Order display Sequence

orderIs the simplest and most straightforward attribute. Set the order of the telescopic items to adjust their rendering. In this example, we set one of the telescopic projects to order 1, so it was advanced to the top of the other scaling projects.

This is a useful feature if you want the document order and display order to be the same.

margin outer margin

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

Here we declared on the first telescopic 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 • Vertically centered:

Align-self Side Axis Alignment

The properties of the telescopic project align-self override the properties of the telescopic container for the project 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 scalable project align-self :

I have included 2 scaling projects for baseline alignment in the example, because their alignment needs to interact with each other.

Flex Scalability

Now we're finally going to start setting the expansion box scalability. flexspecifies how a scalable project should allocate the remaining space on the spindle.

Let's go through all the common values at once.

Flex: [NUMBER]

This syntax specifies a number that represents the amount of space left for this telescopic project to occupy.

In this example, the first telescopic project takes up 2/4 of the remaining space, while the other two occupy 1/4 of the remaining space.

If each telescopic project is set to 1, then the remaining space will be evenly distributed.

Flex:initial

A flex property value is set to a initial scalable item that will not change in the case of space remaining, but will be shrunk if necessary.

Flex:auto

a flex The property value is set to auto a scalable project that automatically scales to occupy all remaining space based on the spindle.

autoIt is currently valid only in Opera 12.11 and is not valid on Chrome 23.0.1271.95. You can flex: 1; achieve the same effect by using it.

Flex:none

a flex The property value is set to none a scalable project and will not scale in any case.

Flex abbreviation

flexYou can also put flex-grow , flex-shrink , and flex-basis these 3 abbreviations for 1 statements:

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

In most cases it is not necessary to use this syntax. In addition, it requires a much easier to understand scaling algorithm. If you think you're pretty good, take a look in the specs.

you can, of course flex-grow , flex-shrink set it separately, and flex-basis as a single attribute. But I strongly disagree with this approach: when using flex abbreviations, you can get a more reasonable default value even if no values are set.

Visibility Overlay Project

When the value is in effect, the application visibility: collapse; and visibility: hidden; display: none; the effect are different. If it is collapse , the element affects the length of the side axis of the telescopic container, but it will not be realistic or occupy the spindle space. This can be useful if you want to dynamically add or remove telescopic items without affecting the side axis length of the telescopic container.

so far, visibility: collapse; has not been let any browser to implement correctly. visibility: collapse;and now it visibility: hidden; 's the same effect. I hope to make a difference soon.

you can see here collapse how it should work.

Summary

As you can see, the Telescopic layout box (Flexbox) is a powerful new layout model that will bring a revolutionary layout to the site, but it also needs a new way of thinking. Hopefully this article will help you build a website with a telescopic layout box. I don't know what you think, but in my opinion the future is beautiful.

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

From:[translate] deep understanding of Flexbox Telescopic box model :http://c7sky.com/dive-into-flexbox.html

Enclosed is a translation CSS telescopic box layout module organized by the China Team of the consortium.

Extended reading:

2. CSS3 Flexible Box Layout Explained
4. CSS3 Flexbox Layout Module
6. Learn a Flexbox for great good!
8. Website Design Understanding the CSS3 Flexbox
10. Flexbox-fast track to layout nirvana?
12. Flexbox revisited:the New Syntax for flexible Boxes
14. QUICK HITS with the flexible BOX MODEL
16. An Introduction to the CSS Flexbox Module
18. The CSS 3 flexible Box Model
20. CSS3 Flexible Box Model
22. Flexible box ("Flexbox") layout (Windows)
24. The CSS3 Flex Box specification
26. Julyvoice "s Choice
28. CSS3 Flexbox Reference

--Desert