CSS3 Flexbox Layout those things

Believe that the study of CSS3 students on the Flexbox layout must not be unfamiliar (as a future mainstream layout way, at least heard). Recently, two projects were completed: One is the mobile End H5 project, and the other is a MAC client project that embeds HTML pages. In order to celebrate these two projects no longer compatible with the evil of IE, but also to reflect the advantages of modern browsers, decided to try to use the Flexbox layout in the project. When the first version of the project is finished, there are still a lot of areas to look out for. Some of the experience in the project is summed up, I hope to be able to try to use Flexbox students help, in the appropriate place to use the appropriate layout method.

First knowledge of Flexbox

Flexbox layout is commonly known as telescopic layout, it can easily and quickly create a flexible layout. A flexbox layout is made up of a telescopic container (flex containers) and a telescopic item (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 will automatically become flex items. When displayed on a small screen, flexbox can allow elements to expand and shrink freely in containers (telescopic containers), making it easy to adjust the entire layout.

The Flexbox layout makes it easy for us to achieve the following effects:

• The elements are lined up without setting the specific width of the elements, and the rows are folded when there is not enough space in a row.
• Quickly line up the elements into a vertical row.
• Align elements along the left, right, or center or both ends of the parent container (you can only use text-align:justify before, and you need to do a lot of compatibility for a lower version of the browser).
• Change the order in which elements are displayed without changing the HTML code.
• Set the space occupied by each element to be a proportion of the width/height of the parent element, without worrying that the layout will break when the parent element's size is set to a percentage value or the window's size changes.
• Implements the level of the element, centered vertically.

These effects are not very attractive, in order that we can better understand the next content, we need to have a preliminary understanding of Flexbox. Do not know flexbox knowledge of students, please go to telescopic layout-open the door to the layout of heaven!

Flexbox Layout Combat

If you have a rudimentary understanding of flex, let's illustrate when it's better to use the layout.

1. See which products use the Flexbox layout

Control area of the "No.1" Youku H5 playback page

Change the browser's UA to iOS or Android, and then access the Youku playback page. Let's take a look at the schematic:

Play area is divided into four parts: Mod-one for the play button area, Mod-two for the time display area, Mod-three for switching video quality and other operating areas, Mod-four for the full Screen button area.

The layout requirements of the playback area are as follows: Mod-one and mod-two fixed width in turn left, mod-four fixed width of the right, Mod-three automatically fill the remaining width and the elements in the area in order (in addition to switching the video quality button and other action buttons).

Let's look at how Youku uses Flexbox for HTML layouts and CSS implementations:

X-controls for Flexbox telescopic container, the core style is as follows:

Display:-webkit-box;
Display:-moz-box;
Display:box;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
Box-orient:horizontal;

The CSS sets the x-controls as the Flexbox container, and the child elements (telescopic items) are arranged horizontally. Box-pack is not set, the default is start, which is that the child elements of the elastic box model object are aligned from the start position.

PS: When using the Flexbox layout, use compatible syntax as much as possible, avoiding the incompatibility of legacy systems (ANDROID2.2,IOS5) with the latest syntax.

If you want to be compatible with Windows Phone (ie10+) need to add IE proprietary syntax (IE and other browser syntax slightly different, be sure to note), see the last attached compatible code.

Back to the Youku play page, X-play-control for the play button area, just need to set the width according to the requirements. X-time-display for the time display area, CSS is set with the play button area.

X-settings needs to set the width of the automatic padding screen, and the child elements within the module need to be displayed right, so it is both a telescopic project and a telescopic container. The CSS code is as follows:

Display:-webkit-box;
Display:-moz-box;
Display:box;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
Box-orient:horizontal;
-webkit-box-pack:end;
-moz-box-pack:end;
Box-pack:end;
-webkit-box-flex:1;
-moz-box-flex:1;
Box-flex:1;

			
X-settings Code

For the sake of structure rationality, Youku puts X-fullscreen into x-settings, so it needs to be absolutely positioned to the right. Otherwise, you can put X-fullscreen as sibling node after x-settings, also can achieve this effect.

"No.2" UC Web site Navigation

One day using the UC Browser Web site navigation, subconscious view of the source code, found that its navigation part also uses the Flexbox layout. Heart Anxi, this is to promote CSS3 in the domestic popularization made a little contribution.

Direct access to the Web site in the browser, the schematic below:

The demand is simpler, with 8 tags in 221 groups. 4 groups distribute screen widths evenly.

The HTML structure and style are as follows:

Block is a telescopic container, set the following style:

Display:-webkit-box; -webkit-box-pack:justify;

Block-list for telescopic projects, set the following styles:

-webkit-box-flex:1; width:25%;

A few simple CSS to achieve the automatic expansion of the layout. Of course, this example is relatively simple, the use of CSS2 technology can also be implemented, such as block-list in the width:25%; I think it's just a graceful demotion.

2. When to use Flexbox layout

Let's look at a demand:

Also is a player's operation area, divides into three parts: the left is the video quality selection button, occupies the left display, in the middle controls the video progress the button group, the center display, the right is the sharing and the full screen button, occupies the right display.

Understand the demand after I am very excited, just learn the Flexbox layout finally have a useful. Two sets of scenarios are developed for this version of the UI, regardless of 3,721:

The two sets of scenarios have the same HTML structure, as shown in the figure:

The CSS scenario is slightly different, with the scenario one:

Do not give telescopic project width, directly using box-pack:justify to position 3 telescopic items into the diagram, code:

Display:-webkit-box;
Display:-ms-flexbox;
Display:box;
-webkit-box-pack:justify;
-ms-flex-pack:justify;
box-pack:justify;
-webkit-box-orient:horizontal;
-ms-box-orient:horizontal;
Box-orient:horizontal;

Fbjustify

No need to give the telescopic project to write any CSS to achieve the effect of the UI, after the completion of regrets Flexbox is simply the existence of the inverse days!

Programme II:

To three telescopic project Div set-webkit-box-flex:1; Then give the first set text-align:left respectively; The second setting text-align:center; The third setting text-align:right; Can be done through CSS3: First-child and: Last-child.

One day, the front-end development of the process, the product came to me and said: "Share button this period is not." So easy, I directly use Display:none to hide the corresponding a tag.

And then...... I believe that some students have found that there will be God horse situation.

I go, the middle button moves to the right. This problem can occur regardless of scenario one or scenario two. After analysis, it is found that the width of my telescopic project is based on its content. So the right child content is gone, the width of the expansion project has naturally changed, redistribution of three telescopic projects is the effect of the figure. While the Scheme II set the telescopic ratio flex:1; But the overall width is still related to the contents of the container. After a careful thought, although this fluke encountered problems in advance, but even if the sharing function on the line, not all videos are provided to share, so eventually there will be this problem.

How to solve it?

For this layout with a centered display (and the requirement may change at any time), the best way to do this is to set the width of about two scalable projects. The middle of the telescopic project is set to Flex:1, with a fixed-width telescopic project that does not have an impact on the flexible telescopic project. This example tells us that on the basis of understanding the requirements, as far as possible the layout to do a little more versatility, can adapt to more unexpected situations. CSS has been respected in recent years Oocss philosophy that is so.

Finally, a flexbox implementation of the horizontal, vertical Center example:

The telescopic container has the following style, and the telescopic item can be horizontally and vertically centered, regardless of whether the width is defined or not.

HTML code: <div class= "Flexbox" ><div> can put any element here </div></div>

* * Old version of the grammar/
display:-webkit-box;
Display:-ms-flexbox;
-webkit-box-pack:center;
-ms-flex-pack:center;
-webkit-box-align:center;
-ms-flex-align:center;

* * NEW Syntax/
display:-webkit-flex;
Display:flex;
-webkit-align-item:center;
Align-item:center;
-webkit-justify-content:center;
Justify-content:center;

Flexbox Center

Attach a section of Flexbox new and old version compatible and corresponding syntax code, for your reference.

* Display/display:-webkit-box;     /* Old-ios 6-, Safari 3.1-6/display:-moz-box;&nbs p;       /* Old-firefox 19-(doesn ' t work very-OK) */display:-ms-flexbox; & nbsp;   /* Tweener-ie 10+ * * Display:-webkit-flex;     /* new-chrome/DIS play:flex;                
 /* NEW, Spec-opera 12.1, Firefox 20+//////* To align the project in the direction of the main axis * *-WEBKIT-BOX-PACK:START;
-moz-box-pack:start;
-webkit-justify-content:flex-start;
-ms-flex-pack:start;

Justify-content:flex-start;
* * Align the item/-webkit-box-align:start along the side axis direction;
-moz-box-align:start;
-webkit-align-item:flex-start;
-ms-flex-align:start;

Align-item:flex-start; /* Telescopic item Arrangement/-webkit-box-direction:normal;   /* old version of the expansion of the alignment, in the new version has been merged into the flex-direction * *
Moz-box-direction:normal;
-webkit-box-orient:horizontal; -moz-box-orient:horizontal;      /* Vertical * *-webkit-flex-direction:row;   
    /* column, Row-reverse, column-reverse * *-MS-FLEX-DIRECTION:ROW;

Flex-direction:row;
* * Telescopic project is a line/-webkit-flex-wrap:nowrap;
-ms-flex-wrap:nowrap;

Flex-wrap:nowrap;
* * Multi-line Telescopic container alignment/-webkit-align-content:stretch;
-ms-flex-line-pack:stretch;

Align-content:stretch;
/* Change the layout order of telescopic items and make telescopic items adaptable to telescopic containers/-webkit-box-ordinal-group:1;
-moz-box-ordinal-group:1;
-ms-flex-order:1;
-webkit-order:1;

order:1;
-webkit-box-flex:1;
-moz-box-flex:1;
-webkit-flex:1;
-ms-flex:1; 

Flex:1; Flexbox compatible

Conclusion

The purpose of this article is to play a role in helping people to apply the Flexbox layout to their projects more quickly. I believe that the future direction of CSS development is the use of flexbox this way of layout.