Web page layout (layout) is a key application of CSS.
The traditional solution of the layout, based on the box model, relies on the Display property + Position property + Float property. It is very inconvenient for those special layouts, for example, vertical center is not easy to implement.
In the 2009, the consortium proposed a new scheme----flex layout, which is simple, complete and responsive to various page layouts. At present, it has been supported by all browsers, which means that this feature can be safely used now.
The flex layout will be the preferred solution for future layouts, and this article describes its syntax.
First, what is Flex layout?
Flex is the abbreviation for flexible box, meaning "elastic layout", which provides maximum flexibility for the box model.
Any container can be specified as a flex layout.
. box{
Display:flex;
}
Inline elements can also use flex layouts.
. box{
Display:inline-flex;
}
WebKit Kernel Browser, the-webkit prefix must be added.
. box{
Display:-webkit-flex; * Safari *
Display:flex;
}
Note that after you set the flex layout, the float, clear, and vertical-align properties of the child elements are invalidated.
Ii. Basic Concepts
Elements that use flex layout are called Flex containers (Flex container), referred to as "containers." All of its child elements automatically become container members, called Flex items (Flex Item), or "project".
The container defaults to two axes: the horizontal spindle (main axis) and the vertical cross axis (cross axis). The starting position of the spindle (the intersection of the border) is called main start, and the ending position is called main end, and the start position of the cross axis is called Cross start, and the end position is called the cross ending.
The project is arranged by default along the main axis. The main axis space occupied by a single project is called Main size, and the cross axis space occupied is called cross size.
Third, the container's properties
The following 6 properties are set on the container.
Flex-direction
Flex-wrap
Flex-flow
Justify-content
Align-items
Align-content
3.1 Flex-direction Properties
The Flex-direction property determines the direction of the spindle (that is, the arrangement direction of the item).
. box {
Flex-direction:row | Row-reverse | Column | Column-reverse;
}
It may have 4 values.
Row (default): The spindle is horizontal and the starting point is on the left side.
Row-reverse: The spindle is horizontal and the starting point is at the right end.
Column: The main axis is vertical, and the starting point is up along.
Column-reverse: Spindle for vertical direction, beginning at lower edge.
3.2 Flex-wrap Properties
By default, items are lined up on one line (also known as the "axis"). Flex-wrap attribute definition, if an axis line, how to wrap.
. box{
Flex-wrap:nowrap | Wrap | Wrap-reverse;
}
It may take three values.
(1) nowrap (default): No line change.
(2) Wrap: Line change, the first line above.
(3) Wrap-reverse: line Change, the first line below.
3.3 Flex-flow
The Flex-flow property is a shorthand for the Flex-direction property and the Flex-wrap property, and the default value is row nowrap.
. box {
Flex-flow: | | ;
}
3.4 Justify-content Properties
The Justify-content property defines how the item is aligned on the spindle.
. box {
Justify-content:flex-start | Flex-end | Center | Space-between | Space-around;
}
It may take 5 values, and the alignment is related to the direction of the axis. The following assumes that the spindle is left to right.
Flex-start (default): left-aligned
Flex-end: Align Right
Center: Center
Space-between: Justified, the spacing between items is equal.
Space-around: The spacing is equal on both sides of each item. Therefore, the interval between items is one times greater than the spacing between items and borders.
3.5 Align-items Properties
The Align-items property defines how items are aligned on the cross axis.
. box {
Align-items:flex-start | Flex-end | Center | Baseline | Stretch
}
It may take 5 values. The specific alignment is related to the direction of the cross axis, assuming that the cross axis is from top to bottom.
Flex-start: The starting point of the cross axis is aligned.
Flex-end: The end of the cross axis is aligned.
Center: The midpoint of the cross axis is aligned.
Baseline: Baseline alignment of the first line of text in the project.
Stretch (default): If the item is not set to a height or set to auto, it fills the height of the entire container.
3.6 Align-content Properties
The Align-content property defines the alignment of multiple axes. This property does not work if the project has only one axis.
. box {
Align-content:flex-start | Flex-end | Center | Space-between | Space-around | Stretch
}
This property may take 6 values.
Flex-start: Aligns with the starting point of the cross axis.
Flex-end: Aligns with the end of the cross axis.
Center: Aligns with the midpoint of the cross axis.
Space-between: aligned with the cross axis, evenly spaced across the axes.
Space-around: Each axis on both sides of the interval is equal. Therefore, the spacing between axes is one-fold greater than that between axes and borders.
Stretch (default): The axis occupies the entire cross axis.
Iv. Properties of the project
The following 6 properties are set on the project.
Order
Flex-grow
Flex-shrink
Flex-basis
Flex
Align-self
4.1 Order Property
The Order property defines the arrangement of the items. The smaller the number, the higher the arrangement, and the default is 0.
. Item {
Order:;
}
4.2 Flex-grow Properties
The Flex-grow property defines the magnification of the item, which defaults to 0, that is, if there is space left, it is not magnified.
. Item {
Flex-grow:; /* Default 0 * *
}
If all items have a Flex-grow property of 1, they will equal the remaining space (if any). If an item has a Flex-grow property of 2 and the other items are 1, the former occupies a multiple of the remaining space than the other items.
4.3 Flex-shrink properties
The Flex-shrink property defines the reduction of the project, which defaults to 1, which means that if there is not enough space, the project shrinks.
. Item {
Flex-shrink:; /* Default 1 * *
}
If all items have a Flex-shrink property of 1, when the space is low, the proportions will be reduced. If an item has a Flex-shrink property of 0 and the other items are 1, the former does not shrink when there is not enough space.
Negative values are not valid for this property.
4.4 Flex-basis Properties
The Flex-basis property defines the spindle space (main size) that the project occupies before allocating extra space. Depending on this property, the browser calculates whether the spindle has extra space. Its default value is auto, which is the original size of the item.
. Item {
Flex-basis: | Auto /* Default Auto * *
}
It can be set to the same value as the width or height property (such as 350px), the item will occupy a fixed space.
4.5 Flex Properties
The flex properties are shorthand for Flex-grow, Flex-shrink, and flex-basis, and the default value is 0 1 auto. The latter two properties are optional.
. Item {
Flex:none | [< ' Flex-grow ' > < ' flex-shrink '] | | | < ' flex-basis ' >]
}
This property has two shortcut values: Auto (1 1 Auto) and none (0 0 Auto).
It is recommended that you use this attribute first rather than write three separate attributes separately, because the browser calculates the correlation value.
4.6 Align-self Properties
The Align-self property allows a single item to be aligned differently than other items, overriding the Align-items property. The default value is auto, which indicates the Align-items property of the inherited parent element, and is equivalent to stretch if there is no parent element.
. Item {
Align-self:auto | Flex-start | Flex-end | Center | Baseline | Stretch
}
This property may take 6 values, except auto, which is exactly the same as the Align-items property.
Flex Web Page Layout instance
No matter what the layout, flex can often be done with a few lines of command.
I only list the code, detailed syntax explanation please refer to the Flex Layout Tutorial: Grammar Chapter. My main reference is Landon Schropp's article and solved by Flexbox.
The layout of the dice
On one side of the dice, you can place up to 9 points.
Below, let's look at how flex implements the layout from 1 to 9 points. You can go to Codepen to see the demo.
If not, the HTML templates for this section are as follows.
In the code above, the DIV element (representing a face of the dice) is a flex container, and a SPAN element (representing a point) is a flex project. If you have more than one item, you add multiple span elements, and so on.
1.1 Items
First, there are only 1 points in the upper left corner. The flex layout defaults to the first line of left alignment, so one line of code is enough.
. box {
Display:flex;
}
If you set the alignment of your project, you can achieve center alignment and right alignment.
. box {
Display:flex;
Justify-content:center;
}
. box {
Display:flex;
Justify-content:flex-end;
}
Sets the cross axis alignment so that the spindle can be moved vertically.
. box {
Display:flex;
Align-items:center;
}
. box {
Display:flex;
Justify-content:center;
Align-items:center;
}
. box {
Display:flex;
Justify-content:center;
Align-items:flex-end;
}
. box {
Display:flex;
Justify-content:flex-end;
Align-items:flex-end;
}
1.2 Double Items
. box {
Display:flex;
Justify-content:space-between;
}
. box {
Display:flex;
Flex-direction:column;
Justify-content:space-between;
}
. box {
Display:flex;
Flex-direction:column;
Justify-content:space-between;
Align-items:center;
}
. box {
Display:flex;
Flex-direction:column;
Justify-content:space-between;
Align-items:flex-end;
}
. box {
Display:flex;
}
. Item:nth-child (2) {
Align-self:center;
}
. box {
Display:flex;
Justify-content:space-between;
}
. Item:nth-child (2) {
Align-self:flex-end;
}
1.3 Three projects
. box {
Display:flex;
}
. Item:nth-child (2) {
Align-self:center;
}
. Item:nth-child (3) {
Align-self:flex-end;
}
1.4 Four projects
. box {
Display:flex;
Flex-wrap:wrap;
Justify-content:flex-end;
Align-content:space-between;
}
The HTML code is as follows.
The CSS code is as follows.
. box {
Display:flex;
Flex-wrap:wrap;
Align-content:space-between;
}
. column {
flex-basis:100%;
Display:flex;
Justify-content:space-between;
}
1.17 Six items: First line full, last line full
. box {
Display:flex;
Flex-wrap:wrap;
Align-content:space-between;
}
1.5 Six projects
. box {
Display:flex;
Flex-direction:column;
Flex-wrap:wrap;
Align-content:space-between;
}
The HTML code is as follows.
The CSS code is as follows.
. box {
Display:flex;
Flex-wrap:wrap;
}
. row{
flex-basis:100%;
Display:flex;
}
. Row:nth-child (2) {
Justify-content:center;
}
. Row:nth-child (3) {
Justify-content:space-between;
}
1.5 Nine items
. box {
Display:flex;
Flex-wrap:wrap;
}
Second, Grid layout
2.1 Basic Grid Layout
The simplest grid layout is the average distribution. The average space inside the container is similar to the dice layout above, but the automatic scaling of the item needs to be set.
The HTML code is as follows.
...
...
...
The CSS code is as follows.
. Grid {
Display:flex;
}
. Grid-cell {
Flex:1;
}
2.2 percent layout
The width of a grid is a fixed percentage, and the rest of the grid distributes the remaining space evenly.
The HTML code is as follows.
...
...
...
. Grid {
Display:flex;
}
. Grid-cell {
Flex:1;
}
. Grid-cell.u-full {
flex:0 0 100%;
}
. GRID-CELL.U-1OF2 {
flex:0 0 50%;
}
. grid-cell.u-1of3 {
flex:0 0 33.3333%;
}
. GRID-CELL.U-1OF4 {
flex:0 0 25%;
}
Third, the Holy Grail layout
The Grail layout (Holy Grail Layout) refers to one of the most common web site layouts. Page from top to bottom, divided into three parts: Head (header), trunk (body), tail (footer). The torso is divided into three columns horizontally, from left to right: navigation, main bar, and secondary bar.
The HTML code is as follows.
...
...
...
...
...
The CSS code is as follows.
. Holygrail {
Display:flex;
MIN-HEIGHT:100VH;
Flex-direction:column;
}
Header
Footer {
Flex:1;
}
. Holygrail-body {
Display:flex;
Flex:1;
}
. holygrail-content {
Flex:1;
}
. Holygrail-nav,. holygrail-ads {
/* Two sidebar width set to 12EM * *
flex:0 0 12em;
}
. Holygrail-nav {
/* Navigation to the left/
Order:-1;
}
If it's a small screen, the three columns of the torso automatically become vertically superimposed.
@media (max-width:768px) {
. Holygrail-body {
Flex-direction:column;
Flex:1;
}
. Holygrail-nav,
. Holygrail-ads,
. holygrail-content {
Flex:auto;
}
}
Iv. layout of the input box
We often need to add a hint to the front of the input box and add a button to the rear.
The HTML code is as follows.
<div class= "Inputaddon" ></div>
The CSS code is as follows.
. Inputaddon {
Display:flex;
}
. Inputaddon-field {
Flex:1;
}
Five, hanging type layout
Sometimes, to the left or right of the main bar, you need to add a picture bar.
The HTML code is as follows.
<div class= "Media" >
<p class= "Media-body" >...</p>
</div>
The CSS code is as follows.
. Media {
Display:flex;
Align-items:flex-start;
}
. media-figure {
Margin-right:1em;
}
. Media-body {
Flex:1;
}
Six, fixed the bottom column
Sometimes, the content of the page is too small to fill the height of a screen, the bottom bar will be elevated to the middle of the page. You can use flex layout to make the bottom bar always appear at the bottom of the page.
The HTML code is as follows.
<body class= "Site" >
<main class= "Site-content" >...</main>
<footer>...</footer>
</body>
. Site {
Display:flex;
MIN-HEIGHT:100VH;
Flex-direction:column;
}
. site-content {
Flex:1;
}
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
