Basic concepts of flex
Flex layout (Flex is the abbreviation of flexible box), also known as elastic box model. Attribute and attribute value( display:flex; )In which label style it is written, it is the container; all its child elements automatically become container members, which are called projects.
When the display value of an element is flex, all items (child elements) will be displayed in one line; if the sum of the dimensions of all items is greater than the container, it will not exceed the width and height of the parent element. Does not wrap (each item is automatically scaled down).
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Layout:flex</title> <link rel="stylesheet" href="./CSS/normalize.css"> <style> section { width: 500px; height: 800px; border: 2px solid black; margin: 50px auto; display: flex; } div { width: 100px; height: 100px; border: 1px solid tomato; } </style> </head> <body> <section> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div> </section> </body> </html>
Page effect: each container is scaled down equally
There are two kinds of css Codes: one is applicable to the container (setting the starting position of the spindle, line feed, alignment of the spindle, alignment of multiple axes); the other is applicable to the project (setting the location of the project).
Container common properties and property values
Because there are many duplicate codes, we won't upload them one by one. You can do it yourself, knock on the codes and try.
1, Set the starting direction of the spindle: Flex direction:
The default is X axis (row):
<style> section { width: 500px; height: 500px; border: 2px solid black; margin: 50px auto; display: flex; /* flex-direction: row; */ /* flex-direction: row-reverse; */ /* flex-direction: column; */ /* flex-direction: column-reverse; */ } div { width: 100px; height: 100px; border: 1px solid tomato; } </style>
flex-direction:row; By default, the starting direction of the X axis is the starting position (from left to right);
flex-direction:row-reverse; Change the starting direction of X-axis to the ending position (from right to left);
Set the starting direction of the spindle as Y-axis (column):
flex-direction:column; By default, the starting direction of Y-axis is the starting position (from top to bottom)
flex-direction:column-reverse; Change the starting direction of Y-axis to the ending position (from bottom to top)
2, Set whether to wrap items: Flex Wrap: (no line wrapping by default)
<style> section { width: 400px; height: 400px; border: 2px solid black; margin: 50px auto; display: flex; /* flex-wrap: wrap; */ /* flex-wrap: wrap-reverse; */ } div { width: 100px; height: 100px; border: 1px solid tomato; } </style>
Flex Wrap: nowrap; the default value is no line wrapping; (n items will be displayed in one line. If the sum of item sizes is larger than the size of the main axis of the container, the items will automatically reduce the corresponding proportion column.) (refer to the result display of the first code page)
Flex Wrap: wrap; sets the line wrap; (beyond the width of the spindle, the line wrap is performed. After wrapping, there will be a gap between the two lines, because there is space left in the vertical direction, which will be evenly distributed to the top and bottom of the second line.)
Flex Wrap: wrap reverse; reverse line wrapping; (if there are two lines, the second line is displayed at the front and the first line is displayed at the back)
3, Alignment of main axis direction: justify content:
When the project is one:
<style> section { width: 400px; height: 400px; border: 2px solid black; margin: 50px auto; display: flex; /* justify-content: flex-start; */ /* justify-content: flex-end; */ /* justify-content: center; */ } div { width: 100px; height: 100px; border: 1px solid tomato; } </style>
justify-content:flex-start; Align from spindle start (default)
justify-content:flex-end; Align at end of spindle
justify-content:center; Spindle direction centered
When there are multiple projects:
<style> section { width: 500px; height: 500px; border: 2px solid black; margin: 50px auto; display: flex; /* justify-content: space-between; */ /* justify-content: space-around; */ /* justify-content: space-evenly; */ } div { width: 100px; height: 100px; border: 1px solid tomato; } </style>
Justify content: space between; align both ends (the first item is at the beginning of the container, the last item is at the end of the container, and the middle distance is the same)
Justify content: space around; distributed alignment
Justify content: space every; divide the remaining space equally, and the distance between each item is the same
4, Alignment of the spindle changing to the direction of the cross axis
One axis: the main axis needs to be changed to Y axis: Flex direction: column;
Align items: baseline; aligns to the baseline of the first line of text in the item
Align items: stretch; (stretch is the default value when the item is not set high, and if the item is not set high, it is the height of the container.)
<style> section {
width: 500px; height: 500px; border: 2px solid black; margin: 50px auto; display: flex; /* Spindle to be changed to Y-axis items to be placed in columns */ flex-direction: column; /* align-items: flex-start; Default placement */ /* align-items: center; */ /* align-items: flex-end; */
} div { width: 100px; height: 100px; border: 1px solid tomato; } </style>
Align items: Flex start; align cross axis from start
Align items: Center; align cross axis center
Align items: Flex end; align cross axis from end
Multiple axis lines: (the sum of the dimensions of all items must be larger than the size of the container, so that the items will wrap)
<style> section { width: 500px; height: 500px; border: 2px solid black; margin: 50px auto; display: flex; flex-direction: column; flex-wrap: wrap; /* align-content: center; */ /* align-content: flex-end; */ /* align-content: space-between; */ /* align-content: space-around; */ } div { width: 100px; height: 100px; border: 1px solid tomato; } </style>
Align content: Flex start; align cross axis from start
Align content: Center; align cross axis center
Align content: Flex end; align cross axis from end
Align content: space between
Align content: space around
Align content: space event; cross axis average distribution
Properties and property values for the project:
1, order control project location
order: 1；
Value: positive and negative (default value is 0)
The smaller the value is, the higher the value is, the later the value is.
(applicable scenario: 1. Search engine optimization, improve SEO to put important information in front of html code, but do not affect layout 2. Adjust project location)
<style> section { width: 500px; height: 500px; border: 2px solid black; margin: 50px auto; display: flex; } div { width: 100px; height: 100px; border: 1px solid tomato; } div:nth-child(4) { order: -1; } </style>
Set the alignment of one or more [items] on the cross axis:
<style> section { width: 800px; height: 400px; border: 2px solid black; margin: 50px auto; display: flex; } div { width: 100px; height: 100px; border: 1px solid tomato; } div:nth-child(2) { align-self: center; } div:nth-child(3) { align-self: flex-end; } </style>
Align self: Flex start; set the position of the project at the beginning of the cross axis (default position)
Align self: Center; set items to be placed in the center of cross axis
Align self: Flex end; set items to be placed at the end of cross axis
Set the magnification of one or more elements
Condition: the sum of the dimensions of all items is smaller than the size of the container
(setting this property is not valid if there is no space left.)
An element has a flex grow attribute
<style> section { width: 800px; height: 400px; border: 2px solid black; margin: 50px auto; display: flex; } div { width: 100px; height: 100px; border: 1px solid tomato; } div:nth-child(2) { flex-grow: 1; } </style>
Multiple projects have flex grow attribute
<style> section { width: 800px; height: 200px; border: 2px solid black; margin: 50px auto; display: flex; box-sizing: border-box; } div { width: 100px; height: 100px; border: 1px solid tomato; box-sizing: border-box; } div:nth-child(2) { flex-grow: 1; } div:nth-child(4) { flex-grow: 2; } </style>
Effect display
Divide the remaining space of the container into the corresponding number of flex growth parts, and then distribute the parts of each item to the items with the flex growth attribute.
In a word, flex is very convenient to use. It can be applied to reactive layout or Holy Grail layout. It's just that there are many attributes, and you should practice more. I believe you can use flex skillfully soon.
Recommend a small game, which is fun and can enhance the use of flex: Flexbox Froggy http://blog.xiaoboswift.com/flexbox/#zh -Go to help little frog go home~~