CSS3 Flexbox How to achieve horizontal vertical center and three columns of high layout

Recently these days have been to make up for the basics of CSS and css3, in the opening of the web page, found that Firefox default on the home page has such a thing.

The first CSS property is not read. so, began to find information, a variety of reading. These days, the understanding of the CSS3 retractable layout box (flexbox) model is written in a blog post to make a brief introduction to Flexbox.

The following sections are categorized as Follows:

1. About the concepts Flexbox need to master in CSS3

2.flexbox Achieve horizontal Vertical center alignment

3. Three columns such as High adaptive, footer area adhesion bottom layout

1. What flexbox need to know in CSS3

　　Because for three columns of the high adaptive layout and horizontal vertical center alignment needs some understanding of the Flexbox basic concept in css3, so the concept of Flexbox will be a simple introduction to the following example to do a Cushion. I have always believed that no matter what knowledge is learned, the concept of understanding is very important.

A: Telescopic container: means that the display property is displayed to set an element to flex or Inline-box (standard version), which is a telescopic container.

B: Scaling project: A scaling project is a child element of a telescopic container. The content of a telescopic container has more than 0 scaling Items-each child element of the telescopic container becomes a scaling item (including text, called an anonymous scaling project).

C: Telescopic flow direction: refers to the direction of the spindle in the telescopic container, can be understood as the x-axis Direction. The direction of the telescopic flow is mainly set by the Flex-direction property (standard standard Version) and the default value is ROW.

D: Telescopic line wrapping: telescopic items sometimes overflow the telescopic container in the telescopic container. In the telescopic container properties, the Flex-wrap property is primarily set to wrap the scaling container, and the default value is Nowrap.

E: scalability: define scaling items to change the width or height of the telescopic container to fill the available space. You can distribute the extra space of the telescopic container to its scaling items or shrink them to prevent the scaling project from Overflowing.

2.flexbox Achieve horizontal Vertical center alignment

　　

html, Body{Height:100%;width:100%;}Body{Display:-moz-box;-moz-box-orient:Vertical;-moz-box-align:Center;-moz-box-pack:Center;Display:-webkit-box;-webkit-box-orient:Vertical;-webkit-box-align:Center;-webkit-box-pack:Center;}. Content{width:300px;Height:300px;Background-color:LightBlue;text-align:Center;Display:-moz-box;-moz-box-orient:Vertical;-moz-box-align:Center;-moz-box-pack:Center;Display:-webkit-box;-webkit-box-orient:Vertical;-webkit-box-align:Center;-webkit-box-pack:Center;}

<class= "content"><H1> Horizontal Vertical Center alignment </  H1></div>　　

first, both the width and height of the HTML and body are set to 100% to allow for width and height, No side spindle alignment (box-pack) and side axis alignment (box-align) to allow additional space for the telescopic container to be distributed before scaling the Project.

then, let body become a telescopic container, set display property to box, set Box-pack and box-align to control spindle alignment and side axis alignment, so that its property values are Center.

finally, The. content element becomes a telescopic container so that its inner block of text becomes an anonymous scaling Item. At this point, the. content element is a telescopic container and a scaling project. When used as a telescopic container, the H1 element is its telescopic project, and the body is its telescopic container as a scaling item. Also set box-align and Box-pack for. content to control Side-axis alignment and spindle alignment.

As below, The. cotent element and the H1 all achieve horizontal vertical center Alignment.

3. Three columns such as High adaptive, footer area adhesion bottom layout

　　There are a number of methods for three-column layouts that can be achieved by float+ percent widths, or with percentages of Inline-block mates, but it is difficult to implement a footer sticking to the layout at the bottom of the Browser's visual WINDOW. Here only the CSS3 three columns and other high-level layouts are introduced.

Do any layout effect, can not be separated from the HTML structure.

    <DivID= "header">        <H1>Head</H1>    </Div>    <DivID= "page">        <DivID= "main">            <H1>Main content</H1>        </Div>        <DivID= "sidebar-left">            <H1>Left column</H1>        </Div>        <DivID= "sidebar-right">            <H1>Right column</H1>        </Div>    </Div>    <DivID= "footer">        <P>Footer</P>    </Div>

Assume that the width of the head and footer is 100%, the left and right columns are 200px wide, and the main content is adaptive to the Width.

Body{-moz-box-sizing:Border-box;-webkit-box-sizing:Border-box;box-sizing:Border-box;}#header, #footer{width:100%;padding:10px;Background-color:#ccc;}#footer{Margin-top:10px;}#sidebar-left, #sidebar-right{width:200px;padding:10px;Background-color:#f36;}

The body is set to box-sizing the width of the box model = content Width +border+padding, Avoiding the need to calculate width when setting the padding Value.

next, Use the Telescopic layout box model box (the old version, which can still be used), to make the #page element a telescopic container, and set the Box-flex to let its child elements have the scalability to accommodate the remaining space of the telescopic container.

  #page  { margin-top :  10px ; :  100% ;  display : -moz-box ;  display : -webkit-box ;}  #main  { Background-color :  #e66 ;  padding :  10px ;  margin :  0 10px ; -moz-box-flex :  1 ; -webkit-box-flex : ;} 

In the code above, the display property set for the #page element is used to make it a telescopic container. It is important to note that width must be set. If width is not set, the Box-flex property of the #main element here is invalidated because the parent container has no width and naturally cannot fill the extra space of the telescopic container (the extra space here refers to the area occupied by the #page element, not just the width). Setting the Box-flex property for the #main element is the extra width that makes it adaptive to the telescopic container. Because the WebKit kernel browser (chrome,safari) and the Gecko kernel (Firefox) do not support the Box-flex property and the box property, you must add a vendor prefix.

In the above example, you need to modify the main content and the left column, the right column arrangement, using the Box-ordinal-group Property.

  #sidebar-right  {-moz-box-ordinal-group :  3 ; -webkit-box-ordinal-group :  3 ;}  #main  { Background-color :  #e66 ;  padding :  10px ;  margin :  0 10px ; -moz-box-flex :  1 ; -moz-box-ordinal-group :  2 ; -webkit-box-flex :  1 ; -webkit-box-ordinal-group : ;} 

In the above code, the Box-ordinal-group property is used to modify the order in which the scaling items are displayed in the telescopic container, with the default value of 1, which is sorted by the order in which the DOM document Flow Appears. The following resets the effect after the Box-ordinal-group Property.

At this point, the page is Ready. however, One problem is that the footer area does not stick to the bottom of the viewable area of the browser window, which makes the user experience very bad.

The implementation of the Flexbox property with CSS3 is Straightforward. The key trick is to make the BODY element a telescopic container, and use the scalability attribute Box-flex to make the div before the footer area scalable (that is, the #page element). That is, the DIV in front of the footer area becomes a scaling item that fills the extra space of the telescopic container based on the height of the telescopic container, which is the div that fills the Browser's viewable area before the footer area is automatically stretched.

If you want the layout of the entire page to be as high as the viewable area of the browser window,

　　The height of the HTML and body elements must first be set as high as the viewable area of the browser window. If the body height is less set, the body itself is not high, of course, the scalability of telescopic projects can not be reflected.

{  height: 100%;}

next, let the body element itself become a scaling container, and set the flow direction (box-orient) to vertical (the attribute in the old version).

 body  {-moz-box-sizing :  Border-box ; -webkit-box-sizing :  border-box ;  box-sizing :  Border-box ;  display : -moz-box ; -moz-box-orient :  vertical ;  display : -webkit-box ; -webkit-box-orient :  vertical ; :  100% ;} 

　finally, set the Box-flex property in the Div (#page元素) in front of the footer area so that it is automatically stretched to the height of the #page element, depending on the height of the telescopic container (which is referred to as the body) for the extra space of the telescopic container Body. This will be the footer is always displayed at the bottom of the browser visual WINDOW.

{  margin-top: 10px;   width: 100%;   display: -moz-box;   -moz-box-flex: 1;   -moz-box-align: stretch;   display: -webkit-box;   -webkit-box-flex: 1;   -webkit-box-align: stretch;}

The above code, #page元素本身是一个伸缩容器, now becomes a scaling project. In the Telescopic layout box model, the alignment of the telescopic item on the side axis box-align (old version) defaults to stretch, (the CSS does not write the Box-align property), which causes the three scaling items of the #page element to be automatically stretched, regardless of the height of the content has a telescopic container # The height of the page, which implements three columns of equal height layout and the footer adheres to the effect at the bottom of the viewable area of the Browser. Finally Attached.

　　

Finish.

Thank you for Reading.

CSS3 Flexbox How to achieve horizontal vertical center and three columns of high layout