Css multi-bar Adaptive Layout _ html/css_WEB-ITnose-html tutorial

Css multi-bar Adaptive Layout in page refactoring, we often need to implement multi-column layout, such as the combination of fixed width of n columns and adaptive width of m columns, absolute layout + padding + percentage width is a relatively violent solution that is easy to think of, but as an "engineer" in the future, we need some elegant methods. Let's talk about the layout of the two columns. The example above is as follows:

    
1
    
2

If there are two sub-elements in a container, we want element 1 to be Px in width, and element 2 to be filled with the remaining container width, the violent method is the absolute layout + padding + percentage width mentioned above. The key css:

// The absolute layout of the brute force method + padding + percentage. container {padding-left: 200px; position: relative ;}. p1 {height: 200px; position: absolute; left: 0 ;}. p2 {width: 100% ;}

I am an example, and stamp me

Of course, here. p2 is a block-level element and can be used without a width.

The second method is to use the mysterious "BFC" under the specific conditions of the dom element to clear the float. If you do not know about the search, the key css is directly used.

// Elegant method float + BFC. p1 {width: 200px; float: left;}. p2 {overflow: hidden ;}

I am an example, and stamp me

Is it elegant. Because. if the width of p1 is specified, it cannot be triggered. for the BFC feature of p2, setting its margin-left: 200px can also achieve the same page effect. p1 has changed. This requires manual modification. p2 margin-left, which is not flexible enough. If you are interested, try it on your own.

The third method is to use the flex layout of css3, which is also known as the layout of the New Generation-a streaming layout.

// Avant-garde method flex. container {display: flex;}. p1 {width: 200px;}. p2 {flex: 1 ;}

I am an example, and stamp me

Isn't it very easy? If you want to know more original rational things, we suggest you observe the blog of great god. Here we only summarize the knowledge of 0.0, And the flex layout may require a prefix in Some browsers, browser prefixes can be automatically added to the http://pleeease.io/play/ (good bookmarks)

Method 4: the front-end circles in the "ancient times" were popular in table layout, and css

// Ancient method table + table-cell.container {display: table; width: 100% ;}. p1 {width: 200px; display: table-cell ;}. p2 {display: table-cell ;}

I am an example, and stamp me

Actually, it looks quite simple, haha .. However, it may be because the name is not tall enough or is replaced by other layout methods.

The above examples are all for the layout of two columns. If there are more than two columns, the float + BFC method is not very good, because only one column can be filled with the remaining width by clearing the floating adaptive mode, I suggest using the flex layout, the principle is the same, set the width of the fixed width, auto scaling sets the flex value based on the ratio. If the table layout is not flexible enough, the fixed-width table-cell sets the width. If the width is not set, the remaining width will be evenly allocated.

To sum up the above, flex is the most flexible. In fact, there are many other advantages of flex, such as its implementation.

Vertical and horizontal centered Element

. Container {display: flex; align-items: center; // The child element is vertically centered. justify-content: center; // The child element is horizontally centered}

Of course, align-items and justify-content are also written differently in the old browser, but most modern browsers support this method. To be conservative, still go to http://pleeease.io/play/, http://caniuse.com/check

Vertical multi-column Adaptive Layout, etc.

.container{display: flex;flex-direction: column;height: 500px;}.p1{width: 100%; flex:1;}.p2{width: 100%;height: 200px;}.p3{width: 100%;flex:1;}

Learn more about other magical usage. If there are any errors, please point out