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-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 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-between
and 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-items
is a and justify-content
echoes the attribute. align-items
Adjust 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. baseline
is 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-reverse
Just 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-flow
is 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
order
Is 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. flex
specifies 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.
auto
It 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
flex
You 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:
- CSS3 Flexible Box Layout Explained
- CSS3 Flexbox Layout Module
- Learn a Flexbox for great good!
- Website Design Understanding the CSS3 Flexbox
- Flexbox-fast track to layout nirvana?
- Flexbox revisited:the New Syntax for flexible Boxes
- QUICK HITS with the flexible BOX MODEL
- An Introduction to the CSS Flexbox Module
- The CSS 3 flexible Box Model
- CSS3 Flexible Box Model
- Flexible box ("Flexbox") layout (Windows)
- The CSS3 Flex Box specification
- Julyvoice "s Choice
- CSS3 Flexbox Reference
--Desert