1, the layout of the elastic
(1) display: flex; add the attribute to the parent container;
(2) display: flex; after adding an elastic container layout shown as block-level element;
display: inline-flex; after adding an elastic container layout shown as row-level element;
(3) Flex the set layout, child elements float, clear attribute will fail. But the position property, continue to apply.
2, acting on the properties of the parent container 5
(1) flex-direction property determines the main direction (i.e., the arrangement direction of the project).
row (default value): The spindle is horizontal, the starting point at the left end;
row-reverse: the spindle in the horizontal direction, starting at the right end;
column: a vertical direction of the spindle, the starting point in the direction;
column-reverse: the spindle in the vertical direction, along the lower starting point.
(2) flex-wrap property definition, if the row axis less than one, how wrap.
nowrap (default): Do not wrap. When the container is not wide enough, the width of each item will be squeezed;
wrap: wrapping, and the top of the vessel a first line;
wrap-reverse: wrapping, and the bottom of the first container row.
As shown below, the use of an elastic layout, arranged laterally, to the left of the starting point, line.
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>弹性布局</title> 9 <style> 10 .box { 11 width: 800px; 12 height: 500px; 13 background-color: aqua; 14 display: flex; 15 flex-wrap: wrap; 16 } 17 18 .box div { 19 width: 150px; 20 height: 150px; 21 Color-background : BlueViolet ; 22 is border : 2px Solid Black ; 23 is } 24 </ style > 25 </ head > 26 is 27 < body > 28 < div class = "Box" > 29 < div > first box </ div > 30 < div > second box </ div > 31 is < div > third box </div > 32 < div > fourth box </ div > 33 is < div > fifth box </ div > 34 is < div > sixth box </ div > 35 < div > seventh box </ div > 36 </ div > 37 [ </ body > 38 is 39 </ HTML >
(3) justify-content attribute defines the alignment of the items on the spindle. This property is closely related to the spindle direction.
Spindle direction: row- starting point on the left, row-reverse- starting point on the right, column- starting point at the top, column-reverse- starting point below.
flex-start (default): The project is located in the spindle starting point.
flex-end: Project is located in the spindle end.
center: center
space-between: justification, the spacing between the items are equal. (Beginning and final project, and no parent container edge interval)
space-around: at equal intervals on both sides of each item. Therefore, the gap between the project twice the size of the project and the interval of the border. (First and last project, with the edge of the parent container there is a certain interval)
space-evenly: at equal intervals on both sides of each item. Therefore, the spacing between the project and the project with the same frame interval.
The first figure is the effect of the space-between, the second map is a space-around effect, and the third figure is the effect of space-evenly.
(4) align-items in the item attribute defines how to align the cross shaft.
flex-start: the starting point of cross-axis alignment.
flex-end: end cross-axis alignment.
center: the midpoint of cross-axis alignment.
baseline: first line of text of the project baseline alignment. (High lines of text, the font size will affect the baseline of each line)
stretch (default): If the project height is not set or set to auto, occupies the entire height of the container.
(5) align-content attribute defines a plurality of axes alignment. If the project is only one axis, the property does not work.
(When item replaced multiple rows, using the align-content can be substituted align-items)
flex-start: the starting point is aligned with the cross shaft.
flex-end: the end is aligned with the cross shaft.
center: the cross-axis aligned with the midpoint.
space-between: both ends of the cross-axis alignment, the average spacing between the axes of the distribution.
space-around: the interval on both sides of each axis are equal. Therefore, the spacing between the axes twice the size of the interval axis border.
stretch（默认值）：轴线占满整个交叉轴。