Flexbox is the abbreviation of flexible box (Note: it means "flexible box container"), which is a new layout mode introduced by CSS3. It determines how elements are arranged on the page so that they can be displayed predictably under different screen sizes and devices.
It is called flexbox because it can expand and shrink the elements in the flex container to maximize the available space. Flexbox is a more powerful way than previous layout methods, such as table layout and floating element embedded block elements:
- Arrange elements in different directions
- Rearrange the display order of elements
- Change the alignment of elements
- Dynamically loading elements into containers
1.flex container: block level label (div) with flex layout
2.flex item: sub element of accounting label with flex layout
3. Properties of flex container:
(1) flex-direction:
- row (default): the main axis is horizontal and the starting point is at the left end.
- 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 at the top edge.
- Column reverse: the main axis is vertical and the starting point is at the bottom edge.
.flex-row{
display: flex;
flex-direction: row-reverse;
}
(2) flex-wrap:
- nowrap (default): no line breaks.
- Wrap: wrap, first line above.
- Wrap reverse: wrap line, first line below.
.flex-row{
display: flex;
flex-direction: row;
flex-wrap: wrap-reverse;
}
(3) justify-content:
- Flex start (default): align left
- Flex end: right justified
- center: center
- Space between: both ends are aligned, and the spacing between items is equal.
- Space around: the space on both sides of each item is equal. Therefore, the interval between items is twice as large as that between items and borders.
.flex-row{
display: flex;
flex-direction: row;
flex-wrap: wrap-reverse;
justify-content: space-around;
}
(4) align-items:
- Flex start: align the start point of the cross axis.
- Flex end: align the ends of the cross axes.
- center: align the midpoint of the cross axis.
- Baseline: the baseline alignment of the first line of text of the project.
- stretch (default): if the project is not set to height or set to auto, it will occupy the height of the entire container.
(5)align-content:
Defines the alignment of multiple grid lines. If the project has only one grid line, this property will not work
- Flex start: align with the start point of the cross axis.
- Flex end: align with the end of the cross axis.
- center: align with the midpoint of the cross axis.
- Space between: align with both ends of the cross axis, and the spacing between the axes is evenly distributed.
- Space around: the spacing on both sides of each axis is equal. Therefore, the spacing between the axes is twice as large as that between the axis and the frame.
- stretch (default): the axis occupies the entire cross axis.
4. Item attribute
(1)order: the order of items. The smaller the number, the higher the order
(2) Flex grow: sets the magnification of the item
If all items have a flex growth attribute of 1, they will equally divide the remaining space (if any). If one item has a flex growth attribute of 2 and all other items have a flex growth attribute of 1, the former will occupy twice as much remaining space as the others.
(3) Flex shrink: sets the reduction scale of the item
If the flex shrink property of all items is 1, they will be reduced in equal proportion when the space is insufficient. If the flex shrink property of one item is 0 and all other items are 1, the former will not be reduced when the space is insufficient.
Negative values are not valid for this property.
(4)align-self:
The align self property allows a single item to have a different alignment from other items and can override the align items property. The default value is auto, which means that it inherits the align items property of the parent element. If there is no parent element, it is equivalent to stretch.
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}#d1{
width: 300px;
/* height: 100px; */
background-color: blue;
color: white;
order: 1;
/* flex-grow: 2; */
flex-shrink: 2;
align-self:center;
}
Note: elastic layout does not change the width of the item by default, but it changes the height of the item by default. If the item does not specify the height explicitly, it will occupy all the heights of the container.
5. Length units in CSS:
in: inches Cm: cm Mm: mm
Pt: pounds (1pt = 1/72in)
px: pixel, relative length unit, relative to computer screen resolution
Em: relative length unit, relative to the font size of the text in the current object (the default relative font height of any browser is 16em)
12px = 0.75em 10px = 0.625em
(1)vw, vh, vmin and vmax: are viewport units and relative units, which are determined by the window size. 1 unit is similar to 1%
A. vw: percentage of window width (1vm = 1% of window width)
B. vh: percentage of window height
C. vmin: indicates the smaller value of vm and vh
D. vmax: indicates the larger value of vm and vh
(2) Difference between VW, vh and%:
A. % is the proportion set relative to the size of the parent element, and vw and wh are determined by the size of the window
B. vw and vh can directly obtain the width or height of the window,% when setting, the actual width or height can not be obtained correctly according to the height of the body
(3) Use of Vmin and vmax:
When developing mobile pages, vw and wh are used to set the font size. The font size displayed in vertical and horizontal screens is different
Because vmin and vmain are currently small or large, they can be used to set the font to ensure that the font size is the same in the vertical and horizontal screen states
6. Grail layout
/*<style>*/
.HolyGrail {
display: flex;
min-height: 96vh;
flex-direction: column;
}
header,footer {
flex: 1;
background-color: darkgray;
text-align: center;
line-height: 11vh;
}
.HolyGrail-body {
display: flex;
flex: 1;
}
.HolyGrail-content {
flex: 1;
background-color:bisque;
text-align: center;
line-height: 75vh;
}
.HolyGrail-nav, .HolyGrail-ads {
/* The width of the two sidebars is set to 12em */
flex: 0 0 12em;
height: 75vh;
}
.HolyGrail-nav {
/* Navigation to the far left */
order: -1;
background-color: cornflowerblue;
text-align: center;
line-height: 75vh;
}
.HolyGrail-ads{
background-color: brown;
text-align: center;
line-height: 75vh;
}
/*</style>8?<body class="HolyGrail">
<header>#header</header>
<div class="HolyGrail-body">
<main class="HolyGrail-content">#center</main>
<nav class="HolyGrail-nav">#side</nav>
<aside class="HolyGrail-ads">#right</aside>
</div>
<footer>#footer</footer>
</body>