Flexbox is the abbreviation for flexible box, and the mainstream browser of the flexible box layout supports
The Flexbox layout is a telescopic container (container) and a scaling item (item)
The main idea of the Flexbox layout is that elements can be resized to fit the available space, and when the available space becomes larger, the flex element will stretch to fill the available space and will shrink automatically when the flex element exceeds the free space. In short, the flex element allows you to automatically scale your layout according to the size of the browser.
Layout according to the direction of the telescopic flow
The telescopic container consists of a spindle and a cross axis! The spindle can be either a horizontal axis or a vertical axis
Flexbox is still in draft state, all when using flexbox layout, need to add each browser's private prefix, namely-WEBKIT-MOZ-MS-O, etc.
# # #Scaling container properties
1.display
Display:flex | Inline-flex
block-level telescopic container in-line telescopic container
2.flex-direction
specifies the direction of the spindle flex-direction:row (default) | row-reverse | column | Column-reverse
3.flex-wrap
If the telescopic container has insufficient space in the main axis direction, whether to wrap and how to break the line
flex-wrap:nowrap (default) | wrap | Wrap-reverse
4.flex-flow
is an abbreviated version of Flex-direction and Flex-wrap, which defines both the spindle and the side axis of the telescopic container .
, whose default value is row nowrap
5.justify-content
used to define the alignment of the scaling item on the main axis, the syntax is:
justify-content:flex-start (default) | flex-end | center | space-between | Space-around
6.align-items
used to define the alignment of the scaling item on the intersection axis, with the following syntax:
align-items:flex-start (default) | flex-end | center | baseline | Stretch
7.align-content
used to adjust the alignment of the scaling item on the intersection after a line break appears, the syntax is:
Align-content:flex-start | flex-end | center | space-between | space-around | stretch (default)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Centering an Element on the Page</title>
<style type="text/css">
Html {
Height: 100%;
}
Body {
Display: -webkit-box; /* Old version syntax: Safari, iOS, Android browser, older WebKit browsers. */
Display: -moz-box; /* Old version syntax: Firefox (buggy) */
Display: -ms-flexbox; /* Mixed version syntax: IE 10 */
Display: -webkit-flex; /* New version syntax: Chrome 21+ */
Display: flex; /* New version syntax: Opera 12.1, Firefox 22+ */
/*Vertically centered*/
/*Old version syntax*/
-webkit-box-align: center;
-moz-box-align: center;
/* mixed version syntax */
-ms-flex-align: center;
/*New version syntax*/
-webkit-align-items: center;
Align-items: center;
/* horizontally centered*/
/*Old version syntax*/
-webkit-box-pack: center;
-moz-box-pack: center;
/* mixed version syntax */
-ms-flex-pack: center;
/*New version syntax*/
-webkit-justify-content: center;
Justify-content: center;
Margin: 0;
Height: 100%;
Width: 100% /* needed for Firefox */
}
/*Implement text vertical centering*/
H1 {
Display: -webkit-box;
Display: -moz-box;
Display: -ms-flexbox;
Display: -webkit-flex;
Display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
Align-items: center;
Height: 10rem;
}
</style>
</head>
<body>
<h1>OMG, I’m centered</h1>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
