CSS 3 flexbox: how to achieve high horizontal and vertical residence and three columns layout, css3flexbox

CSS 3 flexbox: how to achieve high horizontal and vertical residence and three columns layout, css3flexbox

 

 

 

These days I have made up for the basic knowledge of css and css3. When I opened the webpage, I found that Firefox's default homepage has such a thing.

The first css attribute is not understood. As a result, I began to look for various materials and read various books. These days I have written a blog post on my understanding of the CSS 3 scaling layout box (flexbox) model to give a brief introduction to flexbox.

 

 

The following content is divided into the following sections:

1. concepts to be mastered by flexbox in css3

2. flexbox align horizontally and vertically in Center

3. Three columns are highly adaptive, And the footer area sticks to the bottom layout.

 

 

 

1. Learn more about flexbox in css3

　　Because the three-column high Adaptive Layout and horizontal vertical center alignment require some understanding of the basic concepts of flexbox in css3, we will give a brief introduction to the concept of flexbox, to pave the way for subsequent instances. I have always believed that the understanding of concepts is very important no matter how much knowledge is learned.

 

A: Scaling container: sets an element to flex or inline-box (standard version) through the display attribute. This container is a scaling container.

B: Scaling project: a scaling Project is a sub-element of a scaling container. The content of a scaling container has more than one scaling project-each sub-element of the scaling container will become a scaling project (including text, called an anonymous scaling project ).

C: Scaling flow direction: refers to the direction of the spindle in the scaling container, which can be understood as the direction of the X axis. The scaling flow direction is mainly set through the flex-direction attribute (standard version). The default value is row.

D: Scaling line feed: a scaling project sometimes overflows the scaling container in the scaling container. In the scaling container attribute, the flex-wrap attribute is used to set whether the scaling container has a line break. The default value is nowrap.

E: Scalability: Define a scaling project to change the width or height of the scaling container to fill the available space. The extra space of the scaling container can be distributed to its scaling project or scaled down to prevent scaling project overflow.

 

2. flexbox align horizontally and vertically in Center

　　

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;}

<Div class = "content"> 
First, set the width and height of the html and body to 100%, so that the width and height of the html and body are supported. Whether the side spindle is aligned (box-pack) or the side axis is aligned (box-align) you cannot allocate additional space for the scaling container before the scaling project.
Then, let the body become a scaling container, set the display attribute to box, set box-pack and box-align to control the axis alignment and side axis alignment, and set the attribute values to center.
Finally, the. content element becomes a scaling container, so that its internal text block becomes an anonymous scaling project. The. content element is the scaling container and the scaling project. When used as a scaling container, the h1 element is its scaling project; when used as a scaling project, the body is its scaling container. Similarly, box-align and box-pack are set for. content to control the matching of side axis and axis alignment.
As shown in the following figure, both the. cotent element and h1 implement horizontal and vertical center alignment.

3. Three columns are highly adaptive, And the footer area sticks to the bottom layout.
　　There are many layout methods for the three columns, which can be implemented by float + percentage width, or by using inline-block with percentage, however, it is difficult to stick the footer to the bottom of the visible window of the browser. Here we will only introduce the High-Level layout of css3 with three columns.
The HTML structure is indispensable for any layout effect.
<Div id = "header"> 
Assume that the width of the header and footer is 100%, the width of the left and right columns is PX, and the adaptive width of the main content.
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;}
Here, box-sizing is set for the body to make the box model width = content width + border + padding, so as to avoid calculating the width when setting the padding value.
Next, use the scaling layout box model box (the old version can still be used) to make the # page element a scaling container, and set box-flex to make its child elements scalable, auto scaling container space remaining.
#page {  margin-top: 10px;  width: 100%;  display: -moz-box;  display: -webkit-box;}#main {  background-color: #e66;  padding: 10px;  margin: 0 10px;  -moz-box-flex: 1;  -webkit-box-flex: 1;}
In the code above, set the display attribute for the # page element to make it a scaling container. Note that the width must be set. If the width is not set, the # box-flex attribute of the main element is invalid because the parent container does not have the width and cannot fill the extra space of the scaling container, (the extra space here refers to # the area occupied by the page element, not just the width ). Setting the box-flex attribute for the # main element is to make it auto scale the additional width of the container. Because webkit kernel browsers (Chrome, Safari) andGeckoThe kernel (Firefox) does not support the box-flex attribute and the box attribute, so you must add the vendor prefix.

In the above example, You need to modify the content in the main and left sidebar and the arrangement in the right sidebar, using the box-ordinal-group attribute.
#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: 2;}
In the code above, the box-ordinal-group attribute is used to modify the display sequence of the scaling project in the scaling container. The default value is 1, that is, sort by the order in which DOM document streams appear. The following shows the effect of resetting the box-ordinal-group attribute.

Now, this page is ready. However, a problem occurs, that is, the footer area does not stick to the bottom of the visible area of the browser window, which makes the user experience very bad.
Using the flexbox attribute of css3 is simple. The most critical technique is to turn the body element into a scaling container, and use the scalability property box-flex to make the div before the footer area scalable (that is, the # page element ). That is to say, the div in front of the footer area will become a scaling project, and the extra space of the scaling container will be automatically filled according to the height of the scaling container, that is, the div before the footer area is automatically stretched to fill all spaces in the visible area of the browser.
If you want the layout of the entire page to be as high as the visible area of the browser window,
　　First, you must set the height of the html and body elements as high as that of the visible area of the browser window. Without the body height setting, the body itself has no height. Of course, the scalability of the scaling project cannot be reflected.
html, body {  height: 100%;}
Second, let the body element itself become a scaling container, and set the scaling stream direction (box-orient) to vertical (attributes in earlier versions ).
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;  width: 100%;}
　Finally, set the box-flex attribute in the div (# page element) before the footer area, so that it can automatically scale the additional space of the container body according to the height of the scaling container (this is the body, that is, automatic stretching # the height of the page element. In this way, the footer is always displayed at the bottom of the browser visual window.
#page {  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;}
In the code above, the # page element itself is a scaling container and is now a scaling project. In the scaling layout box model, the default value of box-align (earlier version) for the alignment of the scaling project on the side axis is stretch (the box-align attribute can be left blank in css) as a result, the three scaling items of the # page element will be automatically stretched, regardless of the content height, there will be a scaling container # page height, so as to achieveThree columns with a high layout and footer sticking to the bottom of the visible area of the browser. Attached.

　　
 
 
.
 
 
Thank you for reading this article.