Using the CSS3 flexbox layout

Flexbox (Chinese version can click here) layout is a new CSS3 module function for page layout. It can put the list in the same direction (from left to right or top to bottom), and let these lists extend to occupy the available space. A more complex layout can be assisted by nesting a telescopic container (Flex container).

Flexbox can easily and quickly create a flexible layout, when displayed on a small screen, flexbox can let the element in the container (Telescopic container) free expansion and contraction, making it easy to adjust the entire layout. Its purpose is to use common layout patterns, such as three-column layouts, which can be implemented very simply.

Take a look at some examples of what flexbox is good at.

Telescopic containers (flex containers) and scaling projects (Flex items)

A flexbox layout consists of a telescopic container (flex containers) and a scaling project (Flex items) in this container.

A telescopic container (Flex containers) is an HTML tag element, and the display property explicitly sets the Flex property value. All child elements in the telescopic container are automatically converted to scaling items (flex items).

Here is an example of a three-column layout. The outer div container is a telescopic container, and the left, main, and right three div are the scaling items:

It is easy to set up a simple telescopic container with the following code:

<class="container" ></div>   

{  display: flex;}  

Scaling direction and line wrapping (Flex-flow)

The telescopic container has a CSS property of "Flex-flow" that determines how the scaling project is laid out. If the scaling container has the "Flex-flow" value set to "row", the scaling items are arranged from left to right:

If the "Flex-flow" value is set to "column", the scaling items are arranged from top to bottom:

Here you will set up the telescopic container and use the scaling item to display it in one line:

{  display: Flex;  Flex-flow: row;}    

All scaling items in a telescopic container can be arranged in a single row or in multiple rows. This is mainly determined by whether "Flex-flow" is set to "wrap". If the scaling container sets the "Wrap" property value, the scaling item will be arranged in a different row when it cannot be displayed in a row in the telescopic container.

Here's how to set the scaling container to "wrap":

{  display: Flex;  flex-flow: row wrap;}    

Scaling projects (Flex items)

All child elements in the telescopic container will automatically become scaling items. There is no need for additional CSS configuration. The only thing you need to do is set the size of the scaling project.

If the telescopic container sets "Flex-flow" to "row", the scaling project will need to set their width. The height of the scaling item is automatically set to the height of the telescopic container:

If the telescopic container sets "Flex-flow" to "column", the scaling project will need to set their height, and the width of the telescopic project will automatically be set to the width of the telescopic container:

Set the width and Height properties for the scaling project to define the size of the scaling project, which is independent of the other scaling items. For example, if we set a 600px width for the main content, regardless of whether there is one, two, or hundreds of scaling items in the telescopic container, the width of the main content is 600px.

If you want the scaling project to determine the width of the scaling item based on the remaining space of the telescopic container, you can use the Flex property. For example, we can tell the browser that the left and right columns occupy the space of the retractable container minus the main content width.

The value of flex is proportional to the corresponding space. If the left column is set with a value of "1" and the right column has a value of "2", the remaining space for the telescopic container is prorated to the left and right columns, and the right column occupies twice times the left column:

Here are some of the code in the example that is used on the scaling project, showing the independent width and the proportionally calculated width:

{  width:600px;} Flex:1;} Flex:2;}        

A complete example

This is a very simple example, and Flexbox creates a classic three-column layout. The main content width is 60%, and the sidebar uses the Flex property to proportionally automatically calculate the corresponding width according to the remaining space of the telescopic container:

HTML structure

<class= "container" >  <class="Nav Left" ... </<class=</<class="nav Right" ... </nav></div>             

CSS Code

{  display: Flex;  Flex-flow: row;} width:60%;} Flex:1;} Flex:2;}             

Example effects

Online demo case.

Browser support

When writing in 2012, the browser supports the finalization (the latest version) syntax is not very good. This example works well with the content of opera and WebKit Chrome (WebKit need to add a prefix-webkit).

In my article sample code is not written in the browser prefix, mainly to let everyone better understand. Before March 2013, in order to support a wider browser, you need to add the WebKit kernel and IE browser prefix. You may also want to consider adding an old grammar version that supports Flexbox. I personally think that I can learn the use of Flexbox, postpone use in actual projects until the final syntax is supported by more browsers.

Translator Sign Language: the entire translation according to the original line, and in the process of translation slightly personal understanding of the technology. If the translation has the wrong place, also please peer friend pointing. Thank you!

If you want to reprint please indicate the source:

English Original: Http://helephant.com/2013/03/23/css3-flexbox-layout

Chinese translation: http://www.w3cplus.com/css3/css3-flexbox-layout.html

Using the CSS3 flexbox layout