Flex Layout
Once the parent element is set to display: flex; This parent element is called the Flex container. All of its child elements automatically become members of the container and become Flex projects, called projects for short.The container has two axes by default: a horizontal axis and a horizontal cross axis. The starting position of the horizontal spindle is shown as main start, and the end position is called main end. The cross axis starts at cross start and ends at Cross end. By default, items are arranged along the main axis.
Common Flex layout container properties
Let me just write a few elements
<div class="father">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
Copy the code
Give me the style
.father {
width: 800px;
height: 800px;
border: 1px solid #000;
}
.father div {
width: 300px;
height: 200px;
font-size: 100px;
line-height: 200px;
text-align: center;
}
.father .item:nth-child(1) {
background-color: red;
}
.father .item:nth-child(2) {
background-color: green;
}
.father .item:nth-child(3) {
background-color: blue;
}
Copy the code
To get here
dispaly: flex
.father {
width: 800px;
height: 800px;
border: 1px solid #000;
display: flex;
}
Copy the code
Flex-direction: determines the direction of the spindle (default: row)
The attributes are: row column row-reverse column-reverse
Change the main axis flex-direction: column
.father {
width: 800px;
height: 800px;
border: 1px solid #000;
display: flex;
flex-direction: column;
}
Copy the code
Change the spindle direction to flex-direction:row-resever;
Flex-wrap: Whether to wrap (default: no line wrap)
Look carefully at the initialization Settings. Father width (800px) is less than three. Item width (900px)
Flex-wrap has properties like wrap (wrap) nowrap (not wrap)
After the set up
flex-wrap: wrap;
Copy the code
Flex-flow (a combination of flex-direction and flex-wrap)
Flex-flow takes two arguments: flex-direction and flex-wrap
For example,
flex-flow: column wrap-reverse;
Copy the code
Illustration-content: Defines how items are sequenced on the main axis
The property-content properties are
- The flex – start left alignment
- The flex – end right alignment
- Center in the middle
- The space-between ends are aligned
- The space-around gap is twice as large as the gap at both ends
Here, change the width of the three items to make it more intuitive to see the variability-content property
.father .item:nth-child(1) {
width: 100px;
background-color: red;
}
.father .item:nth-child(2) {
width: 200px;
background-color: green;
}
.father .item:nth-child(3) {
width: 100px;
background-color: blue;
}
Copy the code
Change the.father property to justify-content to space-between
justify-content:space-between;
Copy the code
Align-items: Defines the alignment of items on the cross axis.
Attributes are
- Flex-start: Alignment of the starting point of the cross axes.
- Flex-end: alignment of ends of crossed axes.
- Center: Alignment of the midpoint of the cross axis.
- Baseline: The baseline alignment of the first line of text of the project.
- Stretch (default) : If the height is not set or auto is set, the project will occupy the entire height of the container.
For example, set align-items to Center
When the height of the item is not set and align-items are not set (because the default is stretch)
Align-content defines the alignment of multiple axes. This property has no effect if the project has only one axis.
To work with flex-wrap: wrap uses the same settable property value as context-content
For example, align-content:flex-end; (Set the width of the item to 300px)
flex-wrap: wrap;
align-content: flex-end;
Copy the code
Project level medium method
This assumes that only one project remains
- The most simple
justify-content:center;
align-items:center;
Copy the code
justify-content:center;
flex-wrap: wrap;
align-content:center;
Copy the code
Common project attributes
Write the page briefly
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
Copy the code
The initial style
.box {
height: 800px;
width: 1000px;
border: 1px solid #000;
display: flex;
}
.box .item {
width: 200px;
height: 100px;
border: 2px solid darkgoldenrod;
background-color: darkcyan;
margin-right: 10px;
margin-bottom: 10px;
font-size: 30px;
color:black
}
Copy the code
rendering
Order defines how items are arranged the smaller the number, the further forward the order
The value of order is constant
Here, the second item has an order value of 1
.item:nth-child(2){
order: 1;
}
Copy the code
. The order in item is 2
order: 2;
Copy the code
Flex-grow defines the size of the child element with a default value of 0 to allow free space
There are only three projects to operate on
Flex-grow has a constant value meaning several times larger
I’m going to set the value here to 2
flex-grow: 2
Copy the code
Ps: the flex – turns up: 1; Will divide the remaining space equally
The default flex-shrink ratio is 1
Here we restore nine items
A constant value of 0 means no shrinking
For example,
.item:nth-child(2){
flex-shrink: 0;
}
Copy the code
Flex-basis: Defines how much space an item occupies on the main axis
What is the value of px
This reduces the project to three flex-basis Settings for the second project
.item:nth-child(2){ lex-basis: 500px; ! [](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4edd0f4023c7411a9291cfd26d8ea88b~tplv-k3u1fbpfcp-watermark.image) }Copy the code
Attribute flex
flex:flex: auto; The equivalent of
flex-grow: 1 flex-shrink: 1 flex-basis: auto
Copy the code
flex: none; The equivalent of
flex-grow: 0 flex-shrink: 0 flex-basis: auto
Copy the code
flex:1; The equivalent of
flex-grow: 1 flex-shrink: 1 flex-basis: 0%
Copy the code