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 . flex
a 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-direction
Allows you to change the spindle direction of the telescopic container. flex-direction
The 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-between
and 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-items
is a property that corresponds justify-content
to and echoes. align-items
adjust 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. stretch
It is also very simple: it stretches the telescopic project from the start of the side axis to the end of the side axis. baseline
is 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-reverse
Just like wrap, the new telescoping line is added to the side axis of the opposing upward.
Align-content Stack Scaling rows
align-content
flex-wrap
the 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-flow
is 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
order
Is 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. flex
specifies 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.
auto
Currently 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
flex
can 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