Elastic layout:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Elastic layout: The following is recommended to use a developer tool to modify the value of the view is pretty straightforward.
Elastic properties layout order of use:
A parent element attribute setting order:
The following four attributes are sub-elements on the major axis direction is adjusted:
1, the elastic box display: flex;
2, and the arrangement direction of the spindle is determined, this value has been determined that the arrangement direction, all of the following sub-elements are the same,
If left to right, then the following are also determined from left to right, it can not be changed.
flex-direction:
Row; default values, from left to right
row-reverse; right to left
column; from top down
column-reverse; from the bottom to the arrangement
3, if the line feed setting (flex-direction arrangement direction has been determined, can not be changed, the errors do not remember.)
flex-wrap:
nowrap; default values, without wrap, may overflow.
wrap; wrap, no less than a first row line, the second rows. . . (Left to right)
wrap-reverse; wrap contrast with, the last line from left to right, the penultimate row from left to right. . .
4, the arrangement position is provided on the spindle direction of the sub-elements
justify-content:
flex-start; all the sub-elements are stacked on the spindle start position
flex-end; all the sub-elements are stacked on the spindle end position
center; all child elements in the middle of the spindle stack
space-around; all child elements on both sides in the major axis direction is equal to the margin (ml = mr or mt = mb)
space-between; Spindle two terminal elements aside, additional spacing between all sub-elements are equal
space-evenly; margins, and two-terminal element among all child elements to be equal to the side margins.
The following two properties are opposite sides of the axial direction of sub-elements is adjusted:
5, the arrangement position is provided on the upper side in the axial direction of the sub-elements
align-content:
stretch; default. Each row will be extended to occupy the remaining space.
flex-start; all child elements are stacked side shaft start position
flex-end; all child elements are stacked side shaft end position
center; all child elements are stacked on the intermediate shaft side
space-around; all child elements on both sides in the axial direction of the side margins equal (ml = mr or mt = mb)
space-between; two-terminal-side shaft element aside, additional spacing between the sub-elements all equal
space-evenly; margins, and two-terminal element among all child elements to be equal to the side margins.
6, set the basic properties may be five or more sub-elements arranged in a good position:
align-items:
Each value analysis:
flex-start: boundary (vertical axis) of the side shaft start position of the elastic element abut against the box side shaft of the 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.
stretch: If the size of the margin of the cartridge side shaft size specified attribute value of 'auto', its value will project as close as possible the size of the row, but will follow the 'min / max-width / height' attributes limit.
align-items set or retrieve an elastic element is aligned on the cartridge side shaft (longitudinal) direction.
align-content property is used to modify the behavior of flex-wrap property. Similarly align-items, but it is not aligned with the elastic sub-element is provided, but set the alignment of the respective rows.
Second, examples
1, the value of flex-direction are:
row: left to right lateral (left), the default arrangement.
row-reverse: Reverse arranged laterally (right-justified, from the forward row, the last one at the top.
column: vertical arrangement.
column-reverse: reverse vertical arrangement, forward from the row, the last one at the uppermost row.
2, for example: wherein a fixed value flex-direction: column-reverse; namely: vertical arrangement is from top to bottom: 4321
Wherein the values are equal to justify-content:
When the flex-start sub-element 1 on the bottom edge of the parent element
flex-end when a child element of the parent element 4 on top
All child elements are arranged vertically centered when cneter
Each child element of the margin-top / margin-bottom space-around time are equal
space-between the element 1 against the bottom edge of the parent element, parent element against the top element 4, each of the two elements equal to the previous margin
space-evenly when the base element 1 and the parent element, parent element and the upper element 4, and is equal to the margin before the element by element.
All that is equal to the margin.
3, align-items retrieved or set the alignment of the elastic element on the cartridge side shaft (longitudinal) direction. That is: the direction perpendicular to the spindle.
Wherein the two fixed values:
flex-direction: column-reverse; reverse shaft arranged in a vertical arrangement, i.e., from the top down: 4321
justify-content: space-evenly; all margins are equal.
Reverse vertically aligned spindle, so that the elements are arranged in a vertical, align-items is determined so that the vertical position of the
When the align-items values are equal to:
The vertical elements left by the father when flex-start
The vertical right side by flex-end when the parent element
When centered around the vertical center
When the vertical baseline to the left of the parent element (equivalent to a flex-start)
When the vertical stretch of the parent element to the left (if the width is not defined, then the elements will be stretched to the maximum width)
Here the style can be commented as follows .container> span the width,
And the use of developer tools can be viewed clearly.
Three, CSS3 elastic properties box
The following table lists common to the box in the elastic properties:
display box to specify the type of HTML element.
flex-direction elastic container specify how to arrange child elements
justify-content box element elastic aligned on the main axis (horizontal axis) direction.
align-items box elastic element in the direction of alignment of the side shaft (vertical axis).
Whether an elastic flex-wrap box sub-element wrap beyond parent container.
align-content attribute to modify the behavior of the flex-wrap, similar to the align-items, but not the sub-element disposed aligned, but aligned in rows disposed
flex-flow flex-direction and flex-wrap shorthand
order sub-elements disposed in the order of the elastic box.
align-self using the resilient sub-elements. Covering the container align-items property.
How to flex the elastic sub-element cassette allocated space.
</title>
</head>
<style>
.container{
width: 500px;
height: 500px;
background: lightgrey;
display: flex;
flex-wrap: wrap;
flex-direction:column-reverse;
justify-content:flex-start;
align-content: flex-start;
align-items:stretch;
}
.container > span{
background: #0f0;
display: inline-block;
width: 100px;
height: 100px;
}
</style>
<body>
<div class="container">
<span class="one1" style="background: blue">001</span>
<span class="one2" style="background: green">002</span>
<span class="one3" style="background: yellow">003</span>
<span class="one4" style="background: orange">004</span>
<span class="one5" style="background: #0f0">004</span>
<span class="one6" style="background: #f3f">004</span>
<span class="one7" style="background: #553">004</span>
<span class="one8" style="background: #2f8">004</span>
</div>
</body>
</html>
Sort order syntax:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Sort grammar
1, order 0 is the default value, may be a negative number, the smaller the value the more forward arrangement, the greater the value depending on the following arrangement.
2, sub-elements: ABCD
All child elements are not set order value, the default value is 0.
If the order B> 0 are arranged at the end face
If B is arranged in order = 0 then all unchanged
If the Order B <0 are arranged in the front B
</title>
</head>
<style>
.container{
width: 530px;
height: 530px;
background: #eee;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-content: flex-start;
align-items: center;
}
.flex-item{
width: 100px;
height: 100px;
}
.one1{
/*order:1;*/
}
.one2{
order:-1;
}
.one3{
/*order:1;*/
}
.one4{
/*order:1;*/
}
.one5{
/*order:1;*/
}
.one6{
/*order:1;*/
}
.one7{
order:-5;
}
</style>
<body>
<div class="container">
<span class="flex-item one1" style="background: #f00">flex-item 1</span>
<span class="flex-item one2" style="background: #0f0">flex-item 2</span>
<span class="flex-item one3" style="background: #00f">flex-item 3</span>
<span class="flex-item one4" style="background: #0ff">flex-item 4</span>
<span class="flex-item one5" style="background: #f0f">flex-item 5</span>
<span class="flex-item one6" style="background: #e9f">flex-item 6</span>
<span class="flex-item one7" style="background: #77e">flex-item 7</span>
</div>
</body>
</html>
Provided inside the box in the elastic margin is "auto", various centering
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Alignment:
1, provided inside the box in the elastic:
margin:auto;
margin-top:auto;
margin-right:auto;
margin-bottom:auto;
margin-left:auto;
Settings "margin" is "auto" value, automatically obtain an elastic space remaining in the container.
Therefore, margin is provided in the vertical direction is "auto", the elastic sub-elements can be perfectly centered in the two axial direction of the elastic container.
Similarly, margin-left horizontal direction is provided on / right value is "auto", the sub-elements can be made in about the middle of the horizontal direction of the elastic container.
Further, if the same line has three sub-elements ABC, B sub-elements disposed margin-right: auto;
AB then stacked to the left, C directly to the right top edge.
If B is set to a margin-left: auto; margin-right;
Then the width of the elastic box minus three sub-element width, B will be approximately centered relative to the remaining space. I.e., left and right margins are equal.
</title>
</head>
<style>
.container{
width: 530px;
height: 330px;
background: #0ff;
margin-top: 30px;
display: flex;
/*flex-direction: row;*/
/*flex-wrap: wrap;*/
/*justify-content: flex-start;*/
/*align-content: flex-start;*/
}
.flex-item{
display: inline-block;
height: 100px;
width: 100px;
}
.one{
margin-right: auto;
margin-left: auto;
}
.two{
margin-right: auto;
}
.three{
margin-left: auto;
}
.four{
margin: auto;
}
</style>
<body>
<h3>
Just use the elastic inside the box
Settings "margin" is "auto" value, automatically obtain an elastic space remaining in the container.
Therefore, margin is provided in the vertical direction is "auto", the elastic sub-elements can be perfectly centered in the two axial direction of the elastic container.
Similarly, margin-left horizontal direction is provided on / right value is "auto", the sub-elements can be made in about the middle of the horizontal direction of the elastic container.
</h3>
<H4> child element disposed second margin-left / margin-right: auto; the space will be distributed equally to the elastic box remaining left and right margins. </ H4>
<div class="container">
<span class="flex-item" style="background: #f00">flex-item 1</span>
<Span class = "flex-item one" style = "background: # ff0"> approximately equal margins </ span>
<span class="flex-item" style="background: #0f0">flex-item 3</span>
</div>
<div class="container">
<span class="flex-item two" style="background: #f00">flex-item 1</span>
<span class="flex-item" style="background: #ff0">flex-item 2</span>
<span class="flex-item" style="background: #0f0">flex-item 3</span>
</div>
<div class="container">
<span class="flex-item" style="background: #f00">flex-item 1</span>
<span class="flex-item" style="background: #ff0">flex-item 2</span>
<span class="flex-item three" style="background: #0f0">flex-item 3</span>
</div>
<div class="container">
<Span class = "flex-item four" style = "background: # 0f0"> Absolute centered vertically and horizontally </ span>
</div>
</body>
</html>
align-self property with respect to the axis of the sub-side elements themselves set position along the axial direction upper side:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
align-self is used to set the elastic properties of the element itself in the alignment direction of the side shaft (vertical axis).
In short: the best possible use developer tools set.
</title>
</head>
<style>
.flex-container{
padding: 30px;
width: 600px;
height: 500px;
background: #624F5E;
margin: auto;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.flex-item{
height:123px;
}
.flex-1{
background: #f00;
align-self: flex-start;
margin-right: auto;
margin-left: auto;
}
.flex-2{
background: #ff0;
}
.flex-3{
background: #f0f;
align-self: flex-end;
}
.flex-4{
background: #0f3;
}
.flex-5{
background: #dd3;
}
.flex-6{
background: #233;
align-self: flex-end;
}
.flex-7{
background: #a3e;
align-self: flex-start;
}
</style>
<body>
<h3>
All the following are not flex-item setting width, flex-wrap: wrap; wrap may be provided;
flex-direction: column main shaft is: arranged vertically from top to bottom, are more sub-elements, so for rows.
Because there is no set width, the default will fill the remaining space.
If a child element rows only enough, then the default value of the sub elastic element width of 100% of the width of the box, which is the width direction of the side shaft and
If the two row sub-element, then the value sub-element width is 50% of the width of the elastic box, and the width direction is the side of the shaft
If the child element row three, then the value sub-element width of 33.3% of the width of the elastic box, and the width direction is the side of the shaft
If the child element row four, then the value sub-element width is 25% of the width of the elastic box, and the width direction is the side of the shaft
Remember: align-self is set with respect to the position of the upper shaft and its direction. If the child element side shaft width / height of the fixing property it is invalid.
align-self:
auto; custom child element side shaft stretching width = maximum width
flex-start; child elements located side shaft origin
flex-end; child elements located side shaft end
center; in the middle sub-element side shaft
baseline; box resilient element row side inner shaft and an axis of the same,
The value 'flex-start' equivalent. In other cases, the value will participate baseline alignment.
If the width is not set, then the width of the sub-element content distraction.
Stretch; if the specified side shaft size attribute value 'auto', the margin size cassette will project its value as close as possible the size of the row,
But while limiting compliance 'min / max-width / height' attributes.
</h3>
<div class="flex-container">
<span class="flex-item flex-1">flex-item 1</span>
<span class="flex-item flex-2">flex-item 2</span>
<span class="flex-item flex-3">flex-item 3</span>
<span class="flex-item flex-4">flex-item 4</span>
<span class="flex-item flex-5">flex-item 5</span>
<span class="flex-item flex-6">flex-item 6</span>
<span class="flex-item flex-7">flex-item 7</span>
<span class="flex-item flex-1">flex-item 1</span>
<span class="flex-item flex-2">flex-item 2</span>
<span class="flex-item flex-3">flex-item 3</span>
<!-- <span class="flex-item flex-4">flex-item 4</span>
<span class="flex-item flex-5">flex-item 5</span>
<span class="flex-item flex-6">flex-item 6</span>
<span class="flex-item flex-7">flex-item 7</span> -->
</div>
</body>
</html>
flex attribute is assigned for the remaining space on the main axis direction
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
resilient flex attribute specifies how the sub-elements allocated space - means: a spindle remaining space line / one assignment.
Flex value may be directly non-negative (i.e.: 0 may be, the decimal, a positive integer).
My understanding is: The following three properties only flex-grow to work. So you can understand the value of doing less.
The official value of each resolution:
auto: 1 1 auto calcd
initial: calcd 0 1 auto
none: calcd 0 0 auto
inherit: inherited from the parent element
Acronym three or more values representing:
[Flex-grow]: elastic expansion ratio is defined box element.
[Flex-shrink]: Elastic shrinkage ratio is defined box element.
[Flex-basis]: defines the default reference value of the elastic element box.
flex-flow: row nowrap; in the case of not changing the line:
No child elements stack overflow, and there is extra space in the shaft direction, Flex setting is valid.
Overflow or no space, flex attribute is invalid.
flex-flow: row wrap; in the case can wrap:
for flex property is in the major axis direction, each row of sub-elements stacked allocating the remaining space.
Each sub-minimum element width / height not less than the value has been previously set.
If the object is a child element of a set margin-left value is too large to fit in the current row, then immediately wrap.
Example: a box row with a resilient three sub-elements stacked together ABC (width and height of each element is 100px), no overflow
And display: flex; flex-flow: row wrap; left stacked on a spindle direction further 200px remaining space.
1, are provided to the sub-elements such as flex properties: A [flex: 1] B [flex: 2] C [flex: 2]
Namely: 200px / 5 = 40px;
A sub-element width = 100px + 40px = 140px;
B sub-element width = 100px + 40px * 2 = 180px;
C subelement width = 100px + 40px * 2 = 180px;
2, are provided to the sub-elements such as flex properties: A [flex: 1] B [flex: 2] C [flex: 2]
Namely: 200px / 5 = 40px;
A sub-element width = 100px + 40px = 140px;
B sub-element width = 100px + 40px * 2 = 180px;
C subelement width = 100px + 40px * 2 = 180px;
3, the other above, the only difference is only one element of elastic inside the box A.
Namely: 200px / 1 = 200px;
A sub-element width = 100px + 200px * 1 = 300px;
Best practice: to all child elements are added:
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
Then use the developer tools for testing can be.
</title>
</head>
<style>
.flex-container{
width: 550px;
height: 440px;
background: #ddd;
/*padding:20px;*/
display: flex;
flex-flow: row wrap;
margin-top: 30px;
}
.flex-item{
width: 100px;
height: 100px;
display: inline-block;
}
.flex-item-1{
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background:#f00;
}
.flex-item-2{
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background:#00f;
}
.flex-item-3{
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background:#ff0;
}
.flex-item-4{
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background:#0ff;
}
.flex-item-5{
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background:#ff0;
}
.flex-item-6{
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background:#00f;
}
.flex-item-7{
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background:#f00;
}
.flex-item-8{
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background:#091D77;
}
.flex-item-9{
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background:#C326C5;
}
.flex-item-10{
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background:#F2A241;
}
.fct{
flex-flow: row nowrap;
}
</style>
<body>
<div class="flex-container">
<span class="flex-item flex-item-1">flex-item 1</span>
<span class="flex-item flex-item-2">flex-item 2</span>
<span class="flex-item flex-item-3">flex-item 3</span>
<span class="flex-item flex-item-4">flex-item 4</span>
<span class="flex-item flex-item-5">flex-item 5</span>
<span class="flex-item flex-item-6">flex-item 6</span>
<span class="flex-item flex-item-7">flex-item 7</span>
<span class="flex-item flex-item-8">flex-item 8</span>
<!-- <span class="flex-item flex-item-9">flex-item 9</span> -->
<!-- <span class="flex-item flex-item-10">flex-item 10</span> -->
</div>
<div class="flex-container fct">
<span class="flex-item flex-item-1">flex-item 1</span>
<span class="flex-item flex-item-2">flex-item 2</span>
<span class="flex-item flex-item-3">flex-item 3</span>
<span class="flex-item flex-item-4">flex-item 4</span>
<span class="flex-item flex-item-5">flex-item 5</span>
<span class="flex-item flex-item-6">flex-item 6</span>
<span class="flex-item flex-item-7">flex-item 7</span>
<span class="flex-item flex-item-8">flex-item 8</span>
<!-- <span class="flex-item flex-item-9">flex-item 9</span> -->
<!-- <span class="flex-item flex-item-10">flex-item 10</span> -->
</div>
</body>
</html>