Flex layout
Web layout is a key application of CSS.
The traditional solution to layout, based on the box model, relies on the display property + position property +float property. It can be very inconvenient for some particular layouts, for example, vertical centering is not easy to implement.
In 2009, the W3C introduced a new approach, Flex layout, that enables easy, complete, and responsive implementation of various page layouts. It is now supported by all the new major browsers, which means it is safe to use today.
The characteristics of
1. Any element can be specified as a Flex layout
2. After setting the Flex layout, the float, clear, and vertical-align attributes of the child elements are invalidated.
Flex properties
1.flex-direction
2.flex-wrap
3.flex-flow
4.justify-content
5.align-items
6.align-content
Flex child element properties
1.order
2.flex-grow
3.flex-shrink
4.flex-basis
5.flex
6.align-self
flex-direction
Determine the layout direction of the Flex layout, which defaults to landscape layout
flex-direction: row | row-reverse | column | column-reverse;
<div class="flex">
<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>
Copy the code.flex{
display: flex;
width: 360px;
height: 360px;
flex-wrap: wrap;
justify-content: space-between;
}
.flex>div{
display: flex;
box-sizing: border-box;
width: 96px;
height: 96px;
justify-content: center;
align-items: center;
font-size: 35px;
border: 1px solid red;
}
Copy the coderow
(Default) Layout horizontally, starting at the upper left corner
.flex{
flex-direction: row;
}
Copy the code
row-reverse
Horizontal layout, starting at the upper right corner
.flex{
flex-direction: row-reverse;
}
Copy the code
column
Layout in vertical, starting at the upper left corner
.flex{
flex-direction: column;
}
Copy the code
column-reverse
Vertical layout, starting from the lower left corner
.flex{
flex-direction: column-reverse;
}
Copy the code
flex-wrap
Determines whether and how flex wraps lines outside of the main layout position
flex: nowrap | wrap | wrap-reverse
<div class="flex">
<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>
Copy the code.flex{
display: flex;
width: 360px;
height: 360px;
flex-direction: row;
justify-content: space-between;
}
.flex>div{
display: flex;
box-sizing: border-box;
width: 96px;
height: 96px;
justify-content: center;
align-items: center;
font-size: 35px;
border: 1px solid red;
}
Copy the codenowrap
Default, no line breaks
.flex{
flex-wrap: nowrap;
}
Copy the code
wrap
Line feed, regular typesetting
.flex{
flex-wrap: wrap;
}
Copy the code
wrap-reverse
Reverse line wrap to type from bottom to top
.flex{
flex-wrap: wrap-reverse;
}
Copy the code
flex-flow
The flex-flow property is a short form of the flex-direction and flex-wrap properties. The default value is Row Nowrap.
flex-flow: <flex-direction> <flex-wrap>
Copy the codejustify-content
Decide how to layout the Flex layout on the main axis
justify-content: flex-start | flex-end | center | space-around | space-between
<div class="flex">
<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>
Copy the code.flex{
display: flex;
border:1px solid blue;
width: 360px;
height: 360px;
flex-wrap: wrap;
flex-direction: row;
}
.flex>div{
display: flex;
box-sizing: border-box;
width: 96px;
height: 96px;
justify-content: center;
align-items: center;
font-size: 35px;
border: 1px solid red;
}
Copy the codeflex-start
Default values, in order along the main axis, no special style (left aligned)
.flex{
justify-content: flex-start;
}
Copy the code
flex-end
In reverse order along the main axis, no special style (right aligned)
.flex{
justify-content: flex-end;
}
Copy the code
center
Center arrangement of main axis, no special style (center)
.flex{
justify-content: center;
}
Copy the code
space-around
The spacing between child elements and child elements is twice the spacing between child elements and the border of the parent element
.flex{
justify-content: space-around;
}
Copy the code
space-between
The main axis is arranged in turn, and there is no interval at both ends. The child elements and child elements see automatic generation of equal width interval
.flex{
justify-content: space-between;
}
Copy the code
align-items
align-items: flex-start | flex-end | center | baseline | stretch
Typesetting in which child elements cross axes on a single axis (one line)
The flex-start,flex-end,center rule is the same as the justify-content rule. Replace the axis with the cross axis
<div class="flex">
<div style="font-size:22px;">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div style="font-size:22px;">5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div style="font-size:22px; height:auto;">9</div>
</div>
Copy the code.flex{
display: flex;
border:1px solid blue;
width: 360px;
height: 360px;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
}
.flex>div{
display: flex;
box-sizing: border-box;
width: 96px;
height: 96px;
justify-content: center;
align-items: center;
font-size: 66px;
border: 1px solid red;
}
Copy the codebaseline
.flex{
align-items: baseline;
}
Copy the code
stretch
.flex{
align-items: stretch;
}
Copy the code
align-content
As with preception-content rules with the same value, replace the axis with a cross axis; this property is not valid on a single axis (the item is a single line)
Flex child element properties
Acts on direct child elements under the Flex project
order
The order attribute defines the order of items. The smaller the value is, the more advanced it is. The default value is 0.
.item{
order: <integer>;
}
Copy the codeflex-grow
The Flex-Grow property defines the project’s zoom scale, which defaults to 0, or no zoom if there is free space.
Allocates the remaining space equally scaled to the currently specified project
If all projects have a flex-Grow attribute of 1, they divide the remaining space equally, if any. If one project has a flex-grow attribute of 2 and all the other projects are 1, the former takes up twice as much free space as the other items.
.item{
flex-grow:<float>;
}
Copy the codeflex-shrink
The Flex-shrink attribute defines the scale by which a project shrinks. The default is 1, that is, if there is insufficient space, the project shrinks.
If all projects have a Flex-shrink attribute of 1, they are scaled equally when space is insufficient. If the flex-shrink attribute is 0 for one project and 1 for all other projects, the former does not shrink when space is insufficient.
Negative values have no effect on this property.
.item{
flex-shrink:<float>;
}
Copy the codeflex-basis
Resize the project. The default is auto, which is the size of the project itself
It can be set to the same value as the width or height attribute (such as 350px), and the project will take up a fixed space.
I feel this attribute is not very useful
flex
The Flex attribute is a short form of the Flex-grow attribute and the Flex-shrink and Flex-basis attributes
flex: <flex-grow> <flex-shrink> <flex-basis>
Copy the codealign-self
The align-self property allows a single item to have a different alignment than other items, overriding the align-items property. The default value is auto, which inherits the align-items property of the parent element. If there is no parent element, it equals stretch.
align-self: auto | flex-start | flex-end | center | baseline | stretch;
Flex CSS instance
.flex{
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
align-content: center;
position: relative;
}
.flex.row{
flex-flow: row nowrap;
}
.flex.wrap{
flex-wrap: wrap;
}
.flex>.auto{
width: 100%;
flex-grow: 1;
position: relative;
}
.row>.auto{
width: auto;
height: 100%;
}
.absFull{ /* Use the.auto style for some browsers
position: absolute;
top:0;
left:0;
right: 0;
bottom: 0;
overflow: auto;
}
Copy the code