Look at the code above, explain the meaning, see if you can know how much (behind the comment):
. 1 .container { 2 the display : Flex ; // the layout elastic . 3 Flex-direction : column ; arrangement direction of the container item // (column arranged along a vertical shaft from top to bottom) . 4 align = left-items : Center ; // item how to cross-axis alignment (center center) 5 background-color : # b3d4db ; // set the background color 6 } 7 a little dizzy, because I did not give you explain some of the terminology:
1. What is the main axis, what is the cross-axis?
The following will give you explain the above problem, we look at the chart:
1, the spindle is horizontal in the figure (main axis) line marked
2, the vertical axis is the intersection (cross axis) of the line indicated
What about the other, what it is?
See all explained below:
Default container exists two axes: a horizontal spindle (main axis) and vertical axis intersect (cross axis). The start position of the spindle (intersection with border) is called main start, the end position is called main end; called cross-axis start position cross start, end position is called cross end. The default project along the spindle arrangement. A single project called the space occupied by the spindle main size, called the cross-axis space occupied cross size.
After understanding the basis of the above, we learn more about Flex (elastic box) of six properties, these properties mainly on the basis of the above set up a different position of the container (explained below graphic);
The following six attributes provided on the container:
- Flex-direction arrangement direction within the container item (default lateral arrangement)
- flex-wrap inner wrap container projects manner
- flex-flow shorthand way of two or more of the properties
- justify-content projects on the spindle alignment
- how to align the align-items item cross shaft
- align-content defines a plurality of axes alignment. If the project is only one axis, the property does not work.
Then one by one interpretation (see the patient):
(1) flex-direction: row; (default)
1 .container { 2 flex-direction: row | row-reverse | column | column-reverse; 3 }
Note: When the x-axis arrangement, the sub-elements are inline-block element; when arranged in the y-axis, the sub-elements are block elements.
(2) whether the line feed: flex-wrap: nowrap; (default, all sub-elements arranged in one row)1 .container{ 2 flex-wrap: nowrap | wrap | wrap-reverse; 3 }
If you can wrap, then the first line there are several sub-elements? The second line has several sub-elements?
1 <style> 2 .container{ 3 display: flex; 4 5 flex-wrap: wrap; 6 width: 400px; 7 height: 400px; 8 border: 1px solid black; 9 } 10 .item{ 11 width: 98px; 12 height: 100px; 13 border: 1px solid black; 14 } 15 .item:nth-of-type(1){ 16 flex-grow: 1; 17 } 18 .item:nth-of-type(2){ 19 flex-grow: 1; 20 } 21 .item:nth-of-type(3){ 22 flex-grow: 1; 23 } 24 .item:nth-of-type(4){ 25 flex-grow: 1; 26 } 27 .item:nth-of-type(5){ 28 flex-grow: 1; 29 } 30 </style> 31 <body> 32 <!-- 容器 --> 33 <div class="container"> 34 <!-- 项目 --> 35 <div class="item">1</div> 36 <div class="item">2</div> 37 <div class="item">3</div> 38 <div class="item">4</div> 39 <div class="item">5</div> 40 </div> 41 </body>
The above code: box width of each sub-element 98 + 2 = 100px, and the content "container" to the width: 400px, so the first sub-element row 4 may be placed; so after the fifth sub-elements placed in the second row , bearing in mind the height
If the: width of the box sub-elements: 100px + 2px = 102px, then there are three sub-elements of the first row, the second row has two child elements, while paying attention to the height
If the height is set to handle the elements: 150px, then the effect:
If the child element, a total of three lines, then the effect: the child element width: 196px, 100px high
Conclusion subelements :( x-axis direction are arranged) is provided after the line feed attributes, sub-elements in the first row of the first arrangement (box model child element width = border + padding + content) and ( "container" content of the width) can be put down put on the line, can not be put down on the next line.
Two rows, the container is divided into two half-regions, each row on their home half region (the parent align-items Default is: flex-start); Similarly: three rows, the sub-container three half-area, each line is in the region living on their own half.
Focus on: a few lines, it will be divided into upper and lower half of the container area. (Default align-content: stretch)
(3) justify-content: Default: flex-start;
Project is aligned on the spindle (spindle axis to see exactly which properties flex-direction is provided)
flex-start: start the spindle from left or on the
flex-end: on a spindle arranged starting from the right or the lower
center: the main shaft arranged centrally
space-between: both ends of the upper and lower ends or left and right are arranged on the spindle start
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.
1 <style> 2 .container{ 3 display: flex; 4 justify-content: center; 5 flex-wrap: wrap; 6 width: 400px; 7 height: 400px; 8 border: 1px solid black; 9 } 10 .item{ 11 width: 100px; 12 height: 100px; 13 border: 1px solid black; 14 } 15 16 </style> 17 <body> 18 <!-- 容器 --> 19 <div class="container"> 20 <!-- 项目 --> 21 <div class="item">1</div> 22 <div class="item">2</div> 23 <div class="item">3</div> 24 <div class="item">4</div> 25 <div class="item">5</div> 26 </div> 27 </body>
（4）在侧轴上如何对齐：align-items：stretch（默认值）
注意：stretch值在有height值时，height值决定高度
当子元素中无height值时，效果：
主要看下两个轴的时，效果：
因为有两行，第一行占容器的上半区，第二行占容器的下半区，每一行都在自己的半区居中。
（5）align-content：stretch（默认值）
注意：当只有一行flex项时，此属性不起作用。
该属性在多行下，设置每一行在容器的排列。
比如：align-content：flex-start
4. “项目”中的属性
注意：子级元素设置的宽是100px，但是盒模型的宽却是78px，要注意的是，width值的存在意义重大，尤其是计算布局时。
（1）order：number；该子级的先后顺序中排第几位
默认情况下，每一个子级按照标签的先后顺序在页面中布局，但是order可以改变子级在页面中的先后顺序。
1 <style> 2 .container{ 3 display: flex; 4 width: 400px; 5 height: 400px; 6 border: 1px solid black; 7 } 8 .item{ 9 width: 100px; 10 height: 100px; 11 border: 1px solid black; 12 } 13 .item:nth-of-type(1){ 14 order: 5 15 } 16 .item:nth-of-type(2){ 17 order: 4 18 } 19 .item:nth-of-type(3){ 20 order: 3 21 } 22 .item:nth-of-type(4){ 23 order: 2 24 } 25 .item:nth-of-type(5){ 26 order: 1 27 } 28 </style> 29 <body> 30 <!-- 容器 --> 31 <div class="container"> 32 <!-- 项目 --> 33 <div class="item">1</div> 34 <div class="item">2</div> 35 <div class="item">3</div> 36 <div class="item">4</div> 37 <div class="item">5</div> 38 </div> 39 </body>
（2）flex-grow：number；子级在该行中所占的剩余空间比例。
剩余空间：就是子级的原始盒模型（设置的border+padding+content值）要是没有剩余空间，该值是无效的
比如：.item:nth-of-type(5){ flex-grow: 2; }
但是效果：因为没有剩余空间，所以flex-grow是无效的。同时，该例子中，
（3）flex-shrink：number；每一行中，子元素按原始盒模型排列后，超出“容器”的部分，按照比例大小进行收缩（砍掉），每个子元素中该值越大，被砍掉的越多，默认值为1
比如：上面图片效果中，5个子元素的flex-shrink都是默认值1，所以，都被等比例的砍掉了一部分
无意中，发现一个知识点：
如果子元素中，原始盒模型 > flex盒模型，内容是数字或者英语单词，且数字或英语单词过长，超过了flex盒模型的宽度，那么内容会撑开flex盒模型的宽度，直到原始盒模型的width值，内容如果继续增长，flex盒模型的宽度，不再增大，内容溢出。同时其他的子元素的flex盒模型重新计算布局。
如果子元素的原始盒模型 < flex盒模型，那么无上述效果。
（4）flex-basis：length | 0 | auto，（auto是默认值）
1）当值是：length长度的时候，它可以是长度（例如20％，5rem，10px等），flex-basis属性设置子元素的宽或高，当然width也是设置子元素的原始盒模型的宽，flex-basis值会替代width值
比如：第一个子元素设置：flex-basis：120px，那么第一个子元素的原始盒模型width = 120px，将剩余空间进行分配后，每个子元素的获得24.67的宽度。所以结果如下图：
1 <style> 2 .container{ 3 display: flex; 4 width: 400px; 5 height: 400px; 6 border: 1px solid black; 7 } 8 .item{ 9 width: 100px; 10 height: 100px; 11 border: 1px solid black; 12 } 13 .item:nth-of-type(1){ 14 flex-grow: 1; 15 flex-basis: 120px; 16 } 17 .item:nth-of-type(2){ 18 flex-grow: 1; 19 } 20 .item:nth-of-type(3){ 21 flex-grow: 1; 22 } 23 </style> 24 <body> 25 <!-- 容器 --> 26 <div class="container"> 27 <!-- 项目 --> 28 <div class="item">1 内容区：144.67*102</div> 29 <div class="item">2 内容区：124.67*102</div> 30 <div class="item">3 内容区：124.67*102</div> 31 </div> 32 </body>
2）那么当flex-basis：0时，相当于原始width的值是0；上述代码中的第一个子元素的flex-basis：0；结果：
因为第一个子元素的宽度是66.67，小于 原始盒模型的width值100px，所以当第一个子元素内容是数字或者单词的时候，若数字或单词的长度大于了flex盒模型的宽度，那么flex的盒模型的宽度会随着单词或数字的长度增大，直至原始盒模型的width100px。
3）flex-basis：auto；默认值。
（5） flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
这是速记flex-grow, flex-shrink和flex-basis组合。第二个和第三个参数（flex-shrink和flex-basis）是可选的。默认是0 1 auto
（6）align-self：允许子元素对容器的align-items属性进行覆盖设置
-
.item {
-
align-self: auto | flex-start | flex-end | center | baseline | stretch;
-
}
请注意float，clear、column、vertical-align等属性对弹性无效。