Web page design page Layout tutorial: CSS Layout new properties

Article Introduction: The new CSS properties provide us with a more convenient way to layout our web pages. Thomas Lewis from Microsoft will take you to the three major areas of grid Alignment,flexibox box and multi-column layout.

The new CSS properties provide us with a more convenient way to layout our web pages. Thomas Lewis from Microsoft will take you to the three major areas of grid Alignment,flexibox box and multi-column layout.

The article first appeared in the April issue . NET Magazine--a magazine designed for web designers and developers, the world's highest-selling magazine.

In the past, using CSS to layout looks like a very complicated job. However, with the introduction of new standards, web designers have been able to achieve a very easy layout work.

Mainstream browsers, driven by the consortium, have begun to implement a variety of new layouts, and we are ready to start using them now. For example, the CSS3 multicolumn Layout Module has been taken into account by the consortium. This means that the consortium is very willing to see the browser in the future to achieve the above modules.

prefix (vendor prefixes)

Although some browsers have a general perception of attributes, this does not mean that you cannot take these attributes. Now we can get some mainstream browsers to support properties by adding prefixes, until these properties are supported stably, and we may not need to add these prefixes. ' Adding a vendor prefix is equivalent to doing two things : ' says Jonathan Snook.

• Allow developers to debug new features without having to worry about incompatible conversion browsers.
• You can warn Web developers that these things are not stable.

There are some controversial prefixes . When people discuss the need to add a prefix, it does provide an opportunity for people to experience these attributes before the criteria are fully determined, and of course, it takes some care to use these attributes at this time. Below we will see these layout attributes the use of various browsers, in general, you may not need these browsers need to support these properties, but it is necessary to have a macro understanding of these.

Multi-column layout (multi-column)

Next I'll introduce the first layout feature, let's start with a simple, CSS multi-column layout module. (hereinafter referred to as multi-column) you might want to, this module gives us the ability to layout on a Web page without the attributes of position and float.

Also, depending on the size of the container, you can control the number of columns created, which is a remarkable feature. For example, if you need a container with a column width of 13em (which can also be used as a unit of length with PS), and according to the size of the container, create a number of suitable columns, on the code!

See, it's easy! You can also define the number of columns, at this time, these columns will automatically distribute the column width, as far as possible to fill the width of the container.

#mcexample {   

If you want to control your column more specifically, you can do it! For example, the following code allows you to control the number of columns, columns of their own width, columns and columns between the spacing between the style. On the code!

Some other properties have the following features:

• Define the maximum of a column
• Define the interval size in multiple columns
• Distribute the display content evenly across multiple columns.

Multi-column good to be able to automatically arrange for you fluid content, you do not need to calculate the number of columns, let them row line stand on the lines!

However, when using the multi-column, you still have something to pay attention to, you have to pay attention to set the height of the column, otherwise someone else in the website, because the high column, to see the contents of a column to pull down the scroll so laborious, this user experience that how bad.

Most desktop browsers and mobile browsers support multicolumn (ie, you can now only preview on the IE10 platform). A quick way to query whether a property is supported by a browser is to find out whether the main desktop and mobile browsers support these properties caniuse.com. What we want to keep in mind is that maybe a property is supported, but also add the browser vendor prefix, some browsers do not fully support the attribute, in short, we must test more, this can better solve the problem and avoid unnecessary trouble.

Scalability Layout (Flexbox)

Flexible box CSS Layout module, can be found in the W3.org/tr/css3-flexbox. For convenience, the following module is collectively called Flexbox.

Flexbox gives us the ability to horizontally and vertically position the neutron-level elements of a parent container, and to add spacing between these child elements.

For example, the use of Flexbox in IE10, the first use of display properties, on the code!

#fbexample {       display: -ms-flexbox;         background: black;   

Again, we can set the direction of the child element arrangement, but we need to add the corresponding browser provider prefix (for IE10, we need to add at the beginning -ms-flexbox ), on the code!

#fbexample {   display: -ms-flexbox;   

Flexbox allows us to arrange child elements in a variety of ways: from left to right, from right to left, from top to bottom, from bottom to top. At this point we may need to define the arrangement axis orientation of the child elements.

The following code also controls that each child element is displayed in the middle of the parent container, as well as the allocation of space up and down for each child element.

#fbexample {   display: -ms-flexbox;   -ms-flex-direction: row;   

We can also use another attribute flex-pack , which controls how the child element allocates the remaining space. For example, first we want to make the child elements arrange in a certain direction in the parent element:

#fbexample {   display: -ms-flexbox;   -ms-flex-direction: row;   -ms-flex-align: center;   

But what if we have too many child elements and we don't want their size to be compressed into a situation that is not what we want? OK, at this time we use the handle flex-wrap element erase, still can let the browser continue to display normally:

#fbexample {   display: -ms-flexbox;   -ms-flex-direction: row;   -ms-flex-align: center;   -ms-flex-pack: start;   

Now that we know how to build a container, how do we control our child elements? First, we're going to set these elements in HTML as child elements of the Flexbox element, the code is as follows:

To validate the adaptability of child elements. We can flex set the property value to 0, which means there is no adaptive, or set a value of 1 or 2, which represents the amount of space the child element will occupy.

Illustrated: When Flexbox is applied to elements, it is easy to make a rich and diverse layout of the child-level elements, where we see a horizontal layout and a surrounded layout.

For example, we have three child elements, the first child element is set to 0, the second child element is set to 1, and the third child element is set to 2. The first child element will retain its original size, in other words, he is not adaptive, the second child element will share the extra space with the third child element, the second child element occupies 3 1 of the length, and the third child element occupies 3 2 of the length. One of the most commendable is that in the process of the browser will automatically calculate the length of your, mom no longer have to worry about my calculations!

At this very moment, you will surely find that some of the attributes on the latest guidelines do not necessarily seem to be exactly right, and that the current Flexbox is just a sketch of the work that the Consortium considers, which is only an early standard. As a project in development, it is normal to change frequently, below, let's look at the launch time of the recent guidelines:

• November 29, 2011
• March 22, 2011
• July 23, 2009

If you look for the Flexible box layout module in caniuse.com , you will see that the vendor prefix appears in front of the Flexbox attribute used. Some vendors are based on the 2009 guidelines (refer to the above example) rather than the latest September 2011. This is why we should not only refer to the criteria for support, but also to understand in practice whether these attributes really support.

However, it is gratifying that we do not have to worry about the changes in the face of the change is difficult to adapt, for example, like now, that an element is Flexbox, Cui flower, on the code!

#fbexample {   display: -ms-flexbox;    

To say more, because this is still a working sketch, so this rule is still changing, remember to add the full vendor prefix, save a test.

The sample code demonstrated in Flexbox was modified on the basis of the original text. Because the Flexbox is used under the Ie10, and the corresponding child properties are also adjusted accordingly. See the Flexbox series Tutorials in more detail.

--Desert

Grid Layout

In the past, IE was the most widely recognized browser in terms of support for standard innovation. But in the latest version of the change, IE changed the past slow reaction, a gorgeous attack. For example, in the latest IE10 platform, a CSS based grid layout is supported. The instructions are available in w3.org/tr/css3-grid-layout , and the note was submitted by Microsoft to the consortium in the recent April, and so far IE10 is the only browser that supports the grid layout.

Legend Description: In the grid system, we no longer tangle positioning (position) and floating (float) problems, but in a simpler and faster way to set rows and columns way to table layout.

The grid layout is a fundamental consideration before web design, so it is only a matter of time before the browser's universal support. And it is the terminator that most hopefully becomes the table element in HTML! This standard will allow us to use rows and columns to lay out the page and to display the content across unit lines when we keep the layout and content separate from each other. First, before we start the grid layout, we have to add the vendor prefix, on the code:

We can set the size specification for columns (columns) and rows (rows):

What the? So many attribute values make you dizzy? Well, let's take a slow look at the truth. The above code presents us with a grid of four rows and three columns.

• The height of the first row will be 30px.
• The height of the second row will be 5em.
• The height of the third line is adjusted automatically according to the remaining space size
• The width of the first column is adjusted automatically according to the remaining space size
• The width of the second column is 70px
• The width of the third column will be two-thirds of the remaining width
• The width of the fourth column will be One-third of the remaining width.

Now we can also customize the special location for the children in our grid. If we want our child elements to be in the first row, and the second column, we can do that, on the code:

Remember, this is similar to Flexbox, and our child elements need to be defined as children of grid elements. Also, if we want the elements to be displayed across rows, then we can use the Grid-row-span, the code!

And we can also arrange elements by using grid-row-align and grid-colum-align. These attributes allow you to define the content in the center of the row and you can also arrange the elements horizontally or vertically. For example, if you want the elements to be centered in the column, we can do this:

In the past, the table-based layout of HTML has caused a lot of trouble, because these elements are only loners, which leads to the instability that arises when faced with different display devices. But in the grid layout, we can provide a variety of styles by using a number of parameters like media queries that are based on our device width, height, and so on.

Illustration: Griddle is an application from Microsoft, a app that uses Multi-column,flexbox and grid layout technology to connect to dribble.

Summary

If you are more visually enjoyable, I suggest you look at Markus Mielke's presentation, where the layout features mentioned or not mentioned in this article are discussed, and how they are applied to the app.

In this article, the layout features we mentioned are universally supported by all browsers, and some are just forming. These may make people feel less practical, this feeling may be right in one respect, but, as a designer we should all accept the understanding of these things, we have to face all the things of CSS, and those who are used every day by our CSS properties, not all of this step-by-step development over it?