This article has participated in the Denver Nuggets Creators Camp 3 “More Productive writing” track, see details: Digg project | creators Camp 3 ongoing, “write” personal impact.
Why learn this layout?
The Flexbox in CSS3 was born for layout, and using it makes many layouts easier. The typical three-column, vertical, horizontal, and centered layout uses traditional floating and positioning methods, and the code is relatively complex and difficult to understand, which would be very simple if you used Flexbox.
Turn an element into Flexbox
Syntax for defining containers:
display : flex
or display : inline-flex
Once the container is defined, the elements in the flex container become flex items, and the container generates two axes: the main axis and the side axis.
Common container properties
The first group:
Flex-direction: used to change the main axis direction. The default value is row
flex-direction: row(from left to right) |row-reverse| (from right to left)column(from top to bottom) |column-reverse(From bottom to top)Copy the code
Flex-wrap: auto-wrap and change the side axis orientation. The default is nowrap
flex-wrap: nowrap| (not a newline)wrap(wrap) |wrap-reverse(Newline and change side axis direction)Copy the code
Flex-flow: Short for the first two
flex-flow: <flex-direction> || <flex-wrap>
Copy the code
The second group:
Context-content: Controls the alignment of child items on the main axis. Default is flex-start
justify-content: flex-startStarting point (aligned) |flex-end| aligned (end)center| (center)space-between| (away)space-around(Equally distributed)Copy the code
Align-items: controls the alignment of sub-items on the side axis. The default value is “stretch”
align-items: flex-startStarting point (aligned) |flex-end| aligned (end)center| (center)stretch(Full side axle without setting height)Copy the code
Align-content: Controls the alignment of rows (columns) on the side axis of the subitems
Attribute is almost identical to justify-contentCopy the code
Commonly used item (subitem) properties
The first group:
Order: used to change the position of child items. Default is 0
order: 0// The larger the value, the farther the positionCopy the code
The second group:
Align-self: Controls the alignment of a single subitem on the side axis
Property is almost identical to align-itemsCopy the code
The third group:
Flex-grow: The extension ratio of the child item. Default is 0, that is, no expansion if there is free space.
flex-grow: 0;
Copy the code
Flex-shrink: The percentage of a subitem that shrinks. The default value is 1, that is, if there is insufficient space, the subitem shrinks.
flex-shrink: 1;
Copy the code
Flex-basis: Defines the length of the child before scaling (similar to using width). The default is auto, which is the original size.
flex-basis: auto;
Copy the code
Flex: short form of the first three, the last two optional properties, default value 0 1 auto
flex: 0 1 auto;
Copy the code
The instance
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title>The Flexbox is vertically and horizontally centered</title>
<style type="text/css">
#div_0 {
height: 300px;
width: 500px;
background-color: dimgray;
display: flex;
/* Elastic box */
justify-content: center;
/* displays in the middle of the spindle */
align-items: center;
/* The child is located in the middle of the side axis */
}
#div_1 {
height: 100px;
width: 100px;
background-color: burlywood;
}
</style>
</head>
<body>
<div id="div_0">
<div id="div_1">Intermediate element</div>
</div>
</body>
</html>
Copy the code