Flex layout: In 2009, W3C proposed a layout program.
First, what is the flex
any container can be specified as a Flex layout.
Inline elements can also be used Flex layout.
.box{
display: inline-flex;
}
Note that, in the future to Flex layout, sub-element float, clear, and vertical-align attribute will fail.
Second, the basic concept of
using Flex layout elements, called Flex container, all of its child elements automatically become members of the vessel, called Flex project. The presence of two container axis: horizontal axis and a vertical fork shaft.
Three, six attributes container
1, flex-direction property
flex-direction property determines the direction of the spindle (i.e., the arrangement direction of the project).
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
row (default value): The spindle is horizontal, the starting point at the left end.
row-reverse: the spindle horizontal direction, the starting point at the right end.
column: main vertical direction, the starting point on the edge.
column-reverse: the spindle in the vertical direction, along the lower starting point.
2, flex-wrap attribute
if a row axis less than, flex-wrap attribute defines how wrap.
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap (default): Do not wrap.
wrap: wrap, over the first line.
wrap-reverse: wraps, below the first line.
3, flex-flow property
is shorthand for flex-direction property and flex-wrap property, the default value row nowrap.
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
4, justify-content attribute
justify-content attribute defines the alignment of the items on the spindle.
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
DETAILED alignment with the direction of the shaft concerned. The following assumptions spindle from left to right.
flex-start (default): Left
flex-end: the right alignment
center: center
space-between: justification, the spacing between the items are equal. So, spacing and border project is zero.
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.
5, align-items attribute
align-items in the item attribute defines how to align the cross shaft.
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
DETAILED alignment direction intersecting the axis-related, cross-axis from top to bottom the following is assumed.
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.
stretch (default): If the project height is not set or set to auto, occupies the entire height of the container.
6, align-content attribute
align-content attribute defines a plurality of axes alignment. If the project is only one axis, the property does not work.
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
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 (default): axis occupies the entire cross-axis.
Four, six attributes item
. 1, the order attribute
in the order defined in the order attribute item. The smaller the value, the more forward arrangement, the default is 0.
.item {
order: <integer>;
}
2, flex-grow attribute
enlarged scale flex-grow item attribute definition, the default is 0, i.e., if there is free space, not enlarged.
.item {
flex-grow: <number>; /* default 0 */
}
If the flex-grow attributes of all items are 1, they will aliquots remaining space (if any). Flex-grow property if a project is 2, other projects are 1, then the remaining space is occupied by the former than the other items more than doubled.
3, flex-shrink properties
flex-shrink attribute defines the reduced scale of the project, the default is 1, that is, if space is insufficient, the project will be reduced.
.item {
flex-shrink: <number>; /* default 1 */
}
If the flex-shrink attribute all items are 1, when the lack of space, will be scaled down. Flex-shrink property if a project is zero, other projects are 1, when the lack of space, the former does not shrink.
Invalid negative value of the property.
4, flex-basis attribute
flex-basis attribute defines the space of the spindle prior to dispensing of extra space occupied by the item (main size). Browser Based on this property, calculate the spindle if there is extra space. The default is auto, that the original size of the project.
.item {
flex-basis: <length> | auto; /* default auto */
}
It can be set with the same width or height attribute values (such as 350px), the project will occupy a fixed space.
. 5, flex properties
flex properties are flex-grow, flex-shrink and flex-basis shorthand, the default value 0 1 auto. After two optional attributes.
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
This property has two quick values: auto (1 1 auto) and none (0 0 auto).
It recommended that priority use of this property, rather than write a separate three separate properties, because the browser will calculate the correlation value.
6, align-self attribute
align-self attribute allows a single item with other items has a different alignment, may cover the align-items property. The default value is auto, indicating inheritance of the parent element align-items attributes, if no parent, is equivalent to the stretch.
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
This attribute may take six values, in addition to auto, the other is fully consistent with the align-items property.