Telescopic layout
traditional trisection
flex-direction adjusting spindle direction
flex-direction: row left to right, the default level of
flex-direction: row-Reverse;
flex-direction: column;
flex-direction: Reverse-column;
The justify Content-adjustment spindle alignment
justify-content: flex -start;
default value represents the sub-elements from the start so that the start of the parent container sorting
justify-content: flex-end;
represents subelements so beginning from the back ordering the parent container, but the order of the same box
justify-content: center;
represents a sub-element so displayed in the middle of the parent container
justify-content: space-between;
around the intermediate box close to the average amount of space between the parent box
justify-content: space-around;
equivalent margin added to each of the left and right cassette
align-items side adjustment shaft alignment (perpendicular alignment) of the case to one line arranged in
align-items: stretch; / * default sub-element height stretches adaptation parent container (sub-element is not provided under the premise height) * /
align = left-items: Center; / * vertical center * /
align- items: flex-start; / * * aligned on /
align-items: flex-end; / * the alignment * /
Flex-wrap controls whether wrap
flex-wrap: nowrap; Default item not split line without removal column contraction display one line
flex-wrap: wrap; project when necessary demolition row or demounted column
flex-wrap: wrap-reverse; items when necessary demolition row or removed columns, but in the reverse order
flex-flow flex-direction and flex-wrap shorthand
flex-flow: flex-direction flex -wrap
arrangement direction change no wrap
order to control the order of child elements
order smaller the value of the top face value may be a default value of negative 0
align = left-Content
must parent element provided the display: Flex Flex-direction: row
Flex-wrap: wrap
its value can be set stretch Start-Flex Center
Flex End-Space-Space-around BETWEEN
06 telescopic arrangement layout .html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> section { width: 80%; height: 200px; margin: 100px auto; border: 1px solid #ccc; /*Parent box add Flex * / the display : Flex ; / * telescopic arrangement pattern in the box having resilient * / min-width : 500px ; Flex-direction : Row-Reverse ; Flex-direction : column-Reverse ; } sectionTop div { } div: Child-Nth (. 1) { background-Color : Pink ; width : 200px ; } div: Child-Nth (2) { background-Color: red; width: 100px; margin: 0 6px; } div:nth-child(3) { background-color: blue; flex: 1; } div:nth-child(4) { background-color: green; flex: 1; } </style> </head> <body> <section> <div>111</div> <div>222</div> <div>3333</div> <div>4444</div> </section> </body> </html>
07justify-content property .html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> section { width: 80%; height: 200px; margin: 100px auto; border: 1px solid #ccc; /*父盒子添加flex*/ display: flex; /*伸缩布局模式 这个盒子具有弹性*/ min-width: 500px; justify-content: flex-start; justify-content: flex-end; justify-content: center; justify-content: space-between; justify-content: space-around; } section div{ width: 200px; } div:nth-child(1) { background-color: pink; } div:nth-child(2) { background-color: red; margin: 0 6px; } div:nth-child(3) { background-color: blue; } </style> </head> <body> <section> <div>111</div> <div>222</div> <div>3333</div> </section> </body> </html>
08align-items属性详解.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> section { width: 80%; height: 600px; margin: 100px auto; border: 1px solid #ccc; /*父盒子添加flex*/ display: flex; /*伸缩布局模式 这个盒子具有弹性*/ min-width: 500px; align-items: stretch; /*默认 子元素高度会拉伸适应父容器（子元素没有设置高度前提下）*/ align-items: center; /*垂直居中*/ align-items: flex-start;/*上对齐*/ align-items: flex-end;/*下对齐*/ } section div{ width: 200px; height: 200px; } div:nth-child(1) { background-color: pink; } div:nth-child(2) { background-color: red; margin: 0 6px; } div:nth-child(3) { background-color: blue; } </style> </head> <body> <section> <div>111</div> <div>222</div> <div>3333</div> </section> </body> </html>
09flex-wrap属性.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> section { width: 80%; height: 600px; margin: 100px auto; border: 1px solid #ccc; /*父盒子添加flex*/ display: flex; /*伸缩布局模式 这个盒子具有弹性*/ min-width: 500px; flex-wrap: nowrap; flex-wrap: wrap-reverse; flex-wrap: wrap; align-content: space-between; } section div{ width: 500px; height: 200px; } div:nth-child(1) { background-color: pink; } div:nth-child(2) { background-color: red; margin: 0 6px; } div:nth-child(3) { background-color: blue; } </style> </head> <body> <section> <div>111</div> <div>222</div> <div>3333</div> </section> </body> </html>