Introduction
Among the css2, and the presence of bizarre box model IE box model in the standard mode. These two programs represent is a box model rendering mode. In css3 among the new box model increased the resilience, elasticity box model is a new addition of a strong, flexible layout program. Elastic box model is a new layout scheme css3 proposed. In response to a whole new layout program widths of different devices for different screen. Mainly on the sub-elements are arranged in a container, the alignment and adjustment programs allocated empty space.
Old and new versions of elasticity box model
before, css3 has launched an older version of elasticity box model. Relative to the new version of the elastic box model, the old version with the new version of the content is slightly different. Moreover, Functionally speaking, the old version of the elastic box model is far from a powerful new version of the box model, from compatibility is concerned, both in the pc side ie9 there are compatibility issues, but in the mobile terminal, the old version flexible box model compatibility is a little better. But for us, we still want to focus on the main body of the elastic box model of the new version, the old version because the elastic out of the box model is inevitable, compatibility with the mobile phone side gradually upgrade, the old version will be eliminated . In addition, the new version has a more powerful, but also worthy of our in-depth study. So we For the old and new versions of two elastic box model, we just need to learn to hold the mentality contrast, acquire new version, the old version to understand, so even if one day we need to use the old version, can also be very easy to learn the old version flexible box model.
Related concepts
- Spindle
We came in line with the elements, for example, when the elements are arranged in a row, when both the main shaft indicates the direction of arrangement of the elements, horizontal arrangement, the spindle which can be understood as a horizontal line, and because we default element is arranged from left to right, then we can say that in case of default, the starting position of the spindle element is on the left, while the direction is right, but also for the right end.
- Side shaft
Is the direction perpendicular to the side of the shaft element. The default as a starting point, at the end point.
- Elastic container
We want to use the elastic box model, you need to convert container into the elastic container, we say that a child element of the container included in the set display: flex, then this will become a container vessel elasticity.
- Elastic sub-elements
When the child element of the parent element into a resilient container, then all of the child elements of which are also naturally become resilient children.
How to create a resilient container: Run the display: Flex | inline-Flex
Elastic container Properties
- flex-direction
Arrangement of neutron elastic container element (spindle arrangement)
attribute value: Row: default in one row are arranged row-reverse: Reverse arranged laterally (right-justified, from the forward row, the last one at the top.) Column : longitudinally aligned. column-reverse: reverse vertical arrangement, the discharge from the bottom up, and finally an uppermost row
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>flex-direction</title> <style> html,body { margin:0; padding:0; } nav { height: 500px; background-color: lightcyan; display: flex; flex-direction: row-reverse;/*居左1234 变成居右4321*/ flex-direction: column;/*居左1234变成上下1234*/ flex-direction: column-reverse;/*变成下上1234*/ } nav div { width: 100px; height: 100px; background-color: lightblue; line-height: 100px; text-align: center; font-weight: bold; margin-right: 10px; } </style> </head> <body> <nav> <div class="d1">1</div> <div class="d2">2</div> <div class="d3">3</div> <div class="d4">4</div> </nav> </body> </html>
- flex-wrap
Whether the elastic wrap box sub-element beyond a parent container
attribute value:
nowrap: Default. Provision of elements without removal of a row or column is not removed.
wrap: specified elements when necessary demolition of a row or column demolition.
wrap-reverse: element in a predetermined row or split when necessary demolition columns, but in reverse order.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex-wrap</title> <style> .box { height: 600px; background-color: lightgoldenrodyellow; display: flex; /*设置了属性为wrap，那么一行放不下的时候会自动的去下一行*/ /*flex-wrap:wrap;*/ /*设置了属性为wrap-reverse会让排序发生一个反转，虽然同样是多行，但是会变成从下到上*/ flex-wrap: wrap-reverse; } .box div { width: 100px; height: 100px; background-color: lightblue; line-height: 100px; text-align: center; font-weight: bold; margin: 10px; } </style> </head> <body> <div class="box"> <!--此时元素如果不换行，那么当一行的整体放不下时，每个元素就会相应的缩小--> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div> </body> </html>
- flex-flow
flex-direction and flex-wrap shorthand
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>flex-wrap</title> <style> .box { height: 600px; background-color: lightgoldenrodyellow; display: flex; flex-flow: row wrap; } .box div { width: 100px; height: 100px; background-color: lightblue; line-height: 100px; text-align: center; font-weight: bold; margin: 10px; } </style> </head> <body> <div class="box"> <!--此时元素如果不换行，那么当一行的整体放不下时，每个元素就会相应的缩小--> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div> </body> </html>
- align-item
An elastic element disposed in the box-side shaft (longitudinal) direction of alignment of the
relevant property values:
Flex-Start: start position of border-side shaft cassette elastic elements (vertical axis) against the side of the shaft of the live starting boundary line .
flex-end: a boundary (vertical axis) of the side shaft start position of the elastic element abut against the box side shaft end of the boundary line.
center: the elastic elements centered on top of the box side of the shaft of the row (vertical axis). (If the size is smaller than the size of the elastic line of the box element will overflow the same length in both directions).
baseline: The elastic box element row side inner shaft and an axis of the same, the value of 'flex-start' equivalent. In other cases, the value will participate baseline alignment.
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>align-item</title> <style> .box { height: 600px; background-color: lemonchiffon; display: flex; /*默认 侧轴起点横向排列*/ /*align-items: flex-start;*/ /*侧轴终点横向排列*/ /*align-items: flex-end;*/ /*侧轴终点横向排列*/ /*align-items: center;*/ align-items: baseline; } .box div{ width: 100px; height: 100px; background-color: lightsalmon; text-align: center; line-height: 100px; font-weight: bold; margin:10px; } </style> </head> <body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> </body> </html>
- align-content
Flex-wrap property modifying behavior, similar to align-items, but not the sub-element disposed aligned but arranged aligned row (its way between rows).
Related properties:
Flex-Start: No row spacing
flex-end: end of line spacing is not aligned
center: center line spacing is no
space-between: justification, center automatically assigns
space-around: automatically assigned from
Note that this has no effect on the properties of only one line of the telescopic container.
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>align-content</title> <style> nav { height: 600px; background-color: lemonchiffon; display: flex; /*开启多行*/ flex-wrap: wrap; /*侧轴起点上下两行对齐，没有行间距*/ /*align-content: flex-start;*/ /*侧轴终点上下两行对齐，没有行间距，第一行依然在上*/ /*align-content: flex-end;*/ /*侧轴终点对齐，第一行依然在上，没有行间距*/ /*align-content:center;*/ /*两端对齐，中间自动分配*/ /*align-content: space-between;*/ /*自动分配距离*/ align-content:space-around; } nav div { width: 100px; height: 100px; background-color: lightcoral; margin:10px; } </style> </head> <body> <nav> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> <div>13</div> </nav> </body> </html>
- justify-content
The elastic element is aligned on the cassette axis (horizontal axis) direction
related attributes:
Flex-Star: T default, top alignment
flex-end: end aligned
center: center aligned
space-between: Justify intermediate automatically assigned
space- around: automatically assigned from
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>justify-content</title> <style> nav { height: 600px; background-color: lightgoldenrodyellow; display: flex; /*justify-content: flex-start;*/ /*主轴对齐，贴右 1234*/ /*justify-content: flex-end;*/ /*主轴对齐，居中*/ /*justify-content: center;*/ /*两端对齐，中间自动分配*/ /*justify-content: space-between;*/ /*自动分配距离*/ justify-content: space-around; } nav div { width: 100px; height: 100px; background-color: lightblue; margin:10px; } </style> </head> <body> <nav> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </nav> </body> </html>
Elastic properties of sub-elements
- order
An elastic sub-elements in the order box. sort priority number, the higher the number the next row, the default is 0, negative support.
- flex-grow
Set or retrieve the elastic expansion ratio of the box element.
Property value: int
- flex-shrink
Elastic contraction ratio set or retrieve the box element.
Property value: int
- flex-basis
Used to set or retrieve the flexible pouch telescoping reference value
attribute value: int
- flex
How to set the elastic sub-element cassette allocated space
is shorthand property flex-grow, flex-shrink properties and flex-basis
- align-self
Used in the elastic sub-elements. Covering the container align-items property.
Like the attribute value of the container, but this is a separate setting element.