Elastic properties box

A, align-content property

Properties effect: used to modify the behavior of flex-wrap property. Similar to justify-content, but it is not aligned with the elastic sub-element is provided, but set the alignment of the respective rows.

Property values:

The starting position of each row laterally flex-start the stacking axis.
End position laterally flex-end axis of each row stack.
Each center line of the intermediate stacked position of the elastic container cartridge side shaft
space-between each row of evenly distributed to the flexible pouch container
space-around flexible pouch container rows each evenly distributed, the size of both ends to retain a half pitch between the sub-elements and sub-elements.
It will stretch to stretch each row occupying the remaining space, the default value.

Code examples:

Only the box element is provided the elastic wrap (flex-wrap: wrap), the compressed page, the line is not sufficient to put all subelements will wrap, the second row and the first row is not close together, each line will extend accounted filled the remaining space.

1, a flexible pouch container align-content: flex-start, the starting position of each row of the stack shaft as possible laterally.

.box{
            height:300px;border:1px solid red;display:flex;flex-wrap:wrap;
            align-content: flex-start;
        }

2, elastic cartridge container align-content: flex-end, end position laterally in each row possible stacking axis

.box{
            height:200px;border:1px solid red;display:flex;flex-wrap:wrap;
            align-content: flex-end;
        }

After compression width of the page:

3, elastic cartridge container align-content: center, the axis of each row laterally intermediate stacked position.

.box{
            height:200px;border:1px solid red;display:flex;flex-wrap:wrap;
            align-content: center;
        }

After compression Page:

4, the elastic container provided align-content: space-between, if not, then the starting point of the first branch line will be placed next to the side of the shaft, if the branch, the starting point of a first line side of the shaft, the end of the last line in the side of the shaft, other containers evenly distributed among rows.

    .box{
            height:300px;border:1px solid red;display:flex;flex-wrap:wrap;
            align-content: space-between;
        }

If the page has a lot of lines:

5, the elastic container provided align-content: space-around, each row evenly distributed side shaft according elastic container, the distance from the bottom two lines start and end side shaft between two adjacent rows is half the pitch.

    .box{
            height:200px;border:1px solid red;display:flex;flex-wrap:wrap;
            align-content: space-around;
        }

Compression page width, the child element branches.

6, the elastic element of the parent align-content: stretch, when the parent element has a height, child elements linefeed, and the performance results provided only flew-wrap: wrap the same. Extra space bar each line bisecting the parent element inside.

.box{
            height:200px;border:1px solid red;display:flex;flex-wrap:wrap;
            align-content: stretch;
        }

Change the height of the parent element

Setting properties in subelements

Two, flex-grow Properties

语法：flex-grow:<number>(default 0)

Action property: the ratio of elastic to set or retrieve extended cartridge. As the ratio of the remaining space allocated spreading factor according to the elastic elements disposed cartridge. (A lot of space remaining when the parent element, how to allocate the remaining space)

Property Value: <Number> value is defined by the spread rate. It does not allow a negative value.

flex-grow default value 0, if this attribute is not explicitly defined, the remaining space is allocated not have rights.

1, flex-grow: 0 is not allocated the remaining space, and the property is not set flex-grow the same effect.

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>FlexBox</title>
 6     <style>
 7         .box{
 8             width:300px;border:1px solid red;
 9             background:#faa;
10             display:flex;}
11         .b1{width:80px;background:#aaf;}
12         .b2{width:160px;background:#af;}
13     </style>
14 </head>
15 <body>
16 <div class="box">
17     <div class="b1">1</div>
18     <div class="b2">2</div>
19 </div>
20 </body>
21 </html>

Performance results: If the right child element is set, the sub-element will occupy a good width according to the width of the elastic container has been set.

1, the sub-element setting flex-grow: After 1, since the two sub-elements are disposed is flex-grow: 1, so put elastic container remaining space ratio of 1: 1 to the two sub-elements equally. It fills the container.

Displaying a first width b1 child element width = 80px provided bisects the width of the remaining + 30px (110px)

A second display element width b2 width = 160px + sub-set of the remaining parent element bisecting the width 30px (190px)

2, set different values for the flex-grow two sub-elements, so that the rest of the container space allocation ratio also becomes 1: 2.

B1 display sub-element width = 80px + parent element distribution width 20px (100px)

The width b2 of the sub-element display width = 80px + parent element assigned 40px (120px)

Three, flex-shrink properties

语法：flex-shrink:<number>（default 1）

属性作用：设置或检索弹性盒的收缩比率(根据弹性盒子元素所设置的收缩因子作为比率来收缩空间)

flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。

代码示例：

在弹性盒子中，如果不进行其他的设置，子元素永远不会溢出父元素。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>FlexBox</title>
 6     <style>
 7         .box{
 8             width:200px;
 9             height:50px;
10             border:1px solid red;
11             background:#faa;
12             display:flex;}
13         .b1{width:80px;height:20px;background:#aaf;}
14         .b2{width:160px;height:20px;background:#afa;}
15     </style>
16 </head>
17 <body>
18 <div class="box">
19     <div class="b1">1</div>
20     <div class="b2">2</div>
21 </div>
22 </body>
23 </html>

父元素宽度为300px，两个子元素的宽度之和为340px，子元素本应该溢出父元素的，但是由于父元素设置了弹性盒子，所以子元素还是放置在父元素中。

1、给弹性盒子元素设置flex-shrink：0后，子元素父容器中溢出。

2、给弹性盒子元素分别设置flex-shrink：2和flex-shrink:1后，子元素并不会从页面中溢出。

flex-shrink的收缩比例是如何分配呢

超出的空间=(160+80) - 200 =40px

加权总和=80*2+160*1=320px

.b1被移除的宽度：80*(2/320)*40=20px（元素原有设置的宽度 * 在加权总和中所占的比例2/320 * 超出的空间）

所以第一个弹性盒子元素b1在页面所显示的宽度=原有宽度 - 被移除的宽度=80px - 20px= 60px

.b2被移除的宽度：160 * (1/320) * 40=20px （元素原有的宽度 * 在加权总和中所占的比例1/320 * 超出的空间）

第二个弹性盒子元素b2在页面所显示的宽度=原有宽度 - 被移除的宽度 = 160px - 20px=140px

四、flex-basis属性

语法：flex-basis：<length> | auto（default auto）

属性作用：设置或检索弹性盒伸缩基准值。

属性取值：

auto：无特定宽度值，取决于其他属性值

<length>：用长度值来定义宽度。不允许负值。

<percentage>：用百分比% 来定义宽度。不允许负值。

代码示例：

在不设置其他属性，弹性盒子内部子元素的排列情况应该是成行排列，按照已经设置好的宽度在弹性容器内部占据空间。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>flexbox</title>
 6     <style>
 7     *{
 8         margin:0;padding:0;
 9     }
10     ul li {list-style: none;}
11     ul{width:600px;  height:50px;  background-color: #eee;  display:flex;}
12     li{width:100px;height:30px;}
13     li:nth-child(1){background:#f66;}
14     li:nth-child(2){background:#6f6;}
15     li:nth-child(3){background:#66f; /*flex-basis:600px;*/}
16     li:nth-child(4){background:#faa;}
17     li:nth-child(5){background:#aaf;}
18     </style>
19 </head>
20 <body>
21     <ul>
22         <li>1</li>
23         <li>2</li>
24         <li>3</li>
25         <li>4</li>
26         <li>5</li>
27     </ul>
28 </body>
29 </html>