Web design CSS Page layout: The future of CSS page layout

Article Introduction: as we all know, CSS has a wonderful feature, however, it is disappointing that CSS support for basic page layout is deficient. But the situation is changing, and more dynamic pages are supported by CSS, as Peter Gasston said.

Here, I can guarantee that in a few years, CSS3 will certainly be able to lead the trend. A package of front-end tools is being created to facilitate our rounded corners rounded corners, gradients gradients, opacity transparency, transformations,transitions,animations, and even more effects. But now we all have fun stuff,eye candy, what else do we need?

The next thing we need to deal with IS positioning CSS3 layout problem, although now we can use float,relative positioning, negative margin positioning, but we still have difficulty in the layout of multiple columns to show their skill.

The consortium and browser makers are aware of the problem and have introduced a package of solutions. The main force is the IE team. IE10 is like stepping into the new era of CSS layout of the pioneers, it makes our website become more colorful, flexible, attract everyone's attention.

In this article, I will introduce you to the CSS layout from the good practical to the pure theory stage, perhaps you may not use them in these stages, (at least not now), but still need to understand, through this can see the future through the fog. If you need more details about these tools in this article, or more about CSS3, you can recommend this book to everyone.

Multi-column layout (Columns)

Distributing good content in multiple columns is the most important part of typesetting, andCSS multi-columns module can also achieve adaptive effects on Web pages. Here are two ways to achieve the layout of the column, it is worth mentioning that both methods have different attributes (and they all need to have a Godfather hood-the parent container). The first method is to specify directly, which means you directly indicate the number of columns you want to set in the text. The following code produces three columns of text whose width fills the width of the parent.

div {column-count:3;}	 

The second method is more flexible, first column width is fixed, and the number of its columns will always increase until the parent width is filled, for example, I set the width of the column is 140px, if its parent width of 800px, then this will produce the number of columns 5.

div {column-width:140px;}	 

By default, the length of the interval between each column is 1em, but you can make changes by column-gap this property. Also, you can change the style of column in Column-rule, and we can recall that the border attribute has the same rule of writing. The following code statement generates a dashed line with a width of 2px, and the interval of column for 28px-shows you another rule.

div {   column-gap:28px;   column-rule:2px dotted #ccc; }	 

If you want to see how it works, click here . By the way, you need to be on a firefox,chrome,safari,opera11.1 or ie10 platform to get a normal display; If you don't have the browser you mentioned above, look at the effect picture below.

The CSS columns attribute provides a very convenient way for you to split chunks of content in a horizontal space.

There are more things you can do around column, but the article is limited to one by one. If you want to see a practical example, This can satisfy you here, using the Column-count attribute to divide the article into three columns, The use of multi-column on Firefox requires the addition of a-moz-prefix, with-webkit-prefixes on Chrome and Safari, opera11.1+ and ie10 without prefixes.

Extended Reading

1. CSS multi-column Layout Module
2. Number and column widths of CSS3 multi-columns
3. The Column-gap column-rule of CSS3 Multi-columns
4. Cross column of CSS3 Multi-columns
5. Multiple Columns Layout (magazine-alike) with CSS3
6. CSS3 multi-column Layout
7. An (almost) Complete Guide to CSS3 multi-column Layouts
8. Using CSS multi-column Layouts
9. Multi-column Layouts climb out of the Box

--Desert

Telescopic box model (flexible box)

Flexible Box Layout module(flexbox) provides an adaptive method that does not take into account the height and width values in the parent container. As a simple example, imagine that you have two child elements, and you want them to be able to fill their parent widths with the same width. You may be able to use percentages, but once you take border,padding,margins into consideration, the situation is much more complicated. The advent of Flexbox has made this problem no longer a problem:

. Parent {Display:flex}. Child-one,. child-two {flex:1;}	 

Simply place two child elements horizontally in the parent container, while keeping the width consistent. The value of flex is actually the meaning of proportionality, in which the spaces are redistributed in proportion to their width; Well, say no more, on the code!

. child-one {flex:1}. child-two {flex:2;}	 

When the width of these two child elements is allocated in the parent container, the. Child-two width will be supplemented by two-thirds of the remaining space,. The width of the child-one will be supplemented by one-third of the remaining space, so if their parent is 260px wide, Each column is given a 100px width first, and the extra 60px will have 40px widths assigned to the Child-one, and the 20px width will be assigned to the Child-two.

A case in point, click here , you will see this knowledge more clearly (you need to Firefox,chrome,safari, or ie10+). You can also try to change the size of the browser window to see what changes are made.

Just as you can dynamically change the size of a container, Flexbox provides properties for the parent container to control excess space allocations, or you can position the child element. The Justify-content property acts on the width of the child element (this is by default, which can be changed). Then Justify-content has a sibling attribute, Align-items, and he's acting on the heights, and here's how they do it:

. parent {   justify-content:center;   Align-items:center;   Display:flex;   height:200px;    width:100px; } child {   flex:0;   height:100px;    width:100px; }	 

The flex value of the child is 0 so it will not have any dynamic dimensional changes, and his width is half the size of the parent container, so the children element will be positioned in the horizontal, vertical center position.

You can learn more about Flexbox in an article in. NET Magazine called the CSS3 flexible Box model explained . Plus the associated prefix (-moz-.webkit-,-ms-) You can use the Flexbox attribute in the corresponding Firefox,chrome,safari and ie10pp browser platforms, in JS Polyfill, Flexie in this site, you can also make an attempt on flexbox. We should note that the code is also flexible; Click here to learn more about the version specification .

The code in the translation has been modified to include more information on the original text, or read the extended reading below.

Extended Reading

1. A complete guide to Flexbox
2. Deep understanding of the Flexbox telescopic box model
3. Flexible box ("Flexbox") layout in IE10
4. "Old" Flexbox and "new" Flexbox
5. Using Flexbox: New and old syntax mix to achieve best browser compatibility
6. Cross-browser Flexbox
7. See what happens next: CSS3 flexible Boxes
8. The future--flexbox of responsive design
9. Use CSS3 flexbox layout
10. flexbox--Quick Layout Artifact
11. The inside of Flexbox animation
12. CSS3 Achieve Horizontal Vertical Center

--Desert

grids (GRID)

Brand New to ie10pp) is the most commendable place is the Grid Layout system, which I am most excited about. This is the first time that you have used columns and rows to define our grid. We can use the width value, the keyword auto, and a new length unit, FR (fracion abbreviation). Say more useless, Cui flower, on the code!

div {   Display:grid;   GRID-COLUMNS:1FR 3FR 1fr;   grid-rows:100px Auto 12em; }	 

The above code can bring us a three-column grid, which is the middle of the column width is about three times times the column, the first row of the height of 100px, the last line of height is 12em, the middle of the row high automatic adjustment to just fill the entire column size.

Once the grid is OK, we can locate the contents in it, using some section tags I created a simple page layout, and here's the code:

header {    grid-column:1;    Grid-column-span:3;    grid-row:1;  } Nav {    grid-column:1;    Grid-row:2;  } Article {    grid-column:2;    Grid-row:2;  } aside {    grid-column:3;    Grid-row:2;  } footer {    grid-column:1;    Grid-column-span:3;    Grid-row:3;  }	 

Looking at the code, you'll definitely find that these are all using columns and rows, the Grid-column and Grid-row attributes; in the article element tag, I put him in the second row of the grid, the second column, which is in the center of the 3*3 grid. Similarly, I used Grid-column-span in header and footer tags, which gave them the courage and ability to cross three columns, and (Grid-column-span has a similar function, which is not quoted here.) ）

I did a layout example of these attributes, and I'll take a look at it, but it's going to require you to open it up with the ie10pp platform. If you do not have this browser, then you can look at the following effect chart.

These attributes are supported in ie10pp, so you can take your own test, in the technical document there are many attributes are also supported by ie10pp, so the future is very bright, please look forward to.

Extended Reading

1. Grid
2. CSS3 Grid Layout
3. Use CSS3 Grid layout to implement content first
4. Introduction to CSS3 Grid layout--grid operation
5. How to create an adaptive layout using a CSS grid
6. CSS Grid Layout
7. IE10 and the Future of CSS Layout
8. CSS Grid Layout
9. Understanding the difference between CSS3 Flexbox & Grid Layout
10. FUTURE of CSS Layout:css GRID
11. Farewell floats:the Future of CSS Layout
12. Master the new CSS layout properties

--Desert

template (Template)

Another grid-enabled system is Template Layout module. With different syntax, the first step is to assign values to the position attribute, which is the alphabetical sequence. On the code!

header {Position:a} nav {position:b;} article {position:c;}	 

After we've taken care of the Posiiton work, we can lay it out with this series of letters, each of which represents a line, and each letter represents a column; a case of Victory hundred words, get a row of three columns of grid, you need to do so, on the code!

div {display: "ABC";}	 

In this way, you can display three elements of the same size in a horizontal line. Similarly, you can repeat the letters so that you can do the cross column display, if you use the same letter in the same position in different strings, then you will be able to cross the line display, the following example is illustrated NAV elements across the line display, header,article across the column display, on the key code!

div {display:         "Baa"         "Bcc";}	 

Template layout has not been supported by browsers so far, but there is a jQuery polyfill by Alexis Deveria that can be supported. I'm relying on this example , which is exactly the same as the grid layout, but the code methods are really different.

This example uses JS so he can be supported by most modern browsers, but you still do not see the effect in the browser, then you can pull back to see the grid layout posted on the effect map reference, because the effect of the image is the same. Again, I remember I said grid Layout module is broad and profound? OK, the following about template in the statement contains the code, not to say, on the code!

Header {Grid-cell:a} article {grid-cell:b;} div {   display:grid;   Grid-template: "A" "B"; }	 

The code above implements the same effect as the template layout attribute, and it has the same fate that is not widely supported, but we all know that tomorrow will certainly not be the same.

Extended Reading

1. CSS Template Layout Module
2. CSS Template layouts:a Simpler css Layout System, now Possible with JQuery

--Desert

Floating positioning

The current float property allows our text to float to the left or right of an element, but the extended attribute within the ie10pp , taking us farther, we can locate the floating element where we want it, and the sibling elements can still surround them. This requires a new value in float, along with some positional attributes, on the code:

div {   float:positioned;   left:200px;    Position:absolute;    top:100px;    width:250px; }	 

This code will produce an element of 250px width, and this element is positioned at the leftmost 200px of the parent container, and at the top of the 100px. By default, its sibling elements will float around it, but you can make changes using the Wrap-type property as if the following code controls that text can only appear above and below the element:

div {wrap-type:top-bottom;}	 

Similarly, you can combine position float with grid Layout module, after determining the position of the element in the grid, arrange the other elements to appear around it, on the code:

div {   float:positioned;   Grid-column:2;   Grid-row:2; }	 

Position float is supported by ie10pp, so you can immediately use him, the following also has a demo, but need to be in the IE10 platform under normal view, if you do not have IE10 platform, then you look at the following effect picture console.

The floats and positioning specifications do more than I can show here, more attributes, including shaped floats, or masks of image floats; so far, though, There is no browser support for these things, but you will see more support for this when the next version of the browser arrives.

Exclusions

Positioned floats can make text flow with the help of tag box-shaped, but I would say that shaped float is available in technical documentation. The idea comes from one of Adobe's modules:CSS exclusions. There are two key attributes in this module; the first is wrap-float, which allows you to create ellipses, rectangles, polygons, and float in these forms, on the code!

div {wrap-shape:circle (50%, 50%, 100px);}	 

This code can produce a circle with a radius of 100px and is displayed in the center of the parent container. You can also use POLYGN () to create any shape you want, using a space to display the longitudinal and horizontal axis of a group, and a triangle with the following code:

div {Wrap-shape:polygon (0,100px 100px,100px 50px,0);}	 

When you get your shape, you can use the second attribute Wrap-shape-mode to make the introverted element appear around the original element, and of course these inline elements need to have a common parent container with your anchor element. On the code!

div {   wrap-shape:circle (50%, 50%, 100px);   Wrap-shape-mode:around; }	 

You can view this CSS expansion by downloading it with a complete technical description and some impressive examples, one of which is shown in the following illustration.

As mentioned above, the exclusions syntax has been accepted by the floats module, so it is likely to be presented to us later with an expanded content rather than an independent new content.

Extended Reading

1. CSS floats and positioning level 3

--Desert

Regions

A more ferocious support from Adobe:CSS regions, providing an adaptive content in a multiple file. In the first statement it was determined that the float attribute set some unique strings as numeric values, and then in the content attribute using the From () function to specify the adaptive region, a bit messy, on the code:

. Content {Flow:foo}. Target1,. Target2 {content:from (foo);}	 

Looking at the code, it is quite simple, the content of the class name, first placed in the class name. TARGET1 element, if the content overflows, then continue to be placed in the. Target2. In order to be clearly shown, there will be no duplication of content in the two target elements, and he begins with Target1 and is supplemented in target2 if necessary. A picture wins hundred words, above picture!

Incidentally, these two target do not need to be close to each other in HTML documents, and they may be displayed at both ends of a page if necessary.

However, regions this usage has not been universally supported by browsers, in which case you can download the attribute from Adobe Labs and try it yourself.

Extended Reading

1. CSS regions Module Level 1
2. Diving into CSS regions
3. Regions
4. CSS regions
5. Using CSS regions to flow content through a layout
6. CSS3 regions and Flow
7. CSS3 Regions:rich page layout with HTML and CSS3
8. CSS regions
9. Introducing CSS Regions
10. Regions

--Desert

Conclusions

Flexbox and columns, I'm not sure that the browser is fully supported in the new layout module. I would also like to say that the positioned floats and exclusions are very close to the two modules and are very likely to be merged. In the IE10 grid layout the template layout included. Regions has been supported by the WebKit, so it has quickly appeared in the WebKit browser (safari,chrome).

So I feel that some grammar is about to change, and the effects you see here are about to appear in the future CSS3 effects. If this becomes a reality, I think it's definitely a good situation; These new approaches will be a good complement to the CSS3, and after a few years, we'll be able to create a complex site that's very simple and easy.

Thank Oli Studholme for the professional evaluation of this article

A similar article about CSS layouts and forward-looking articles .

Translator's Sign Language: the entire translation is carried out according to the original line, and in the process of translation slightly individual understanding of the technology. If the translation has the wrong place, but also please peer friends pointing. Thank you!

If you want to reprint, please indicate the source:

Original English:http://www.netmagazine.com/features/future-css-layouts