Flex layout is also called elastic layout = flex layout = elastic box layout
When we set the parent box to Flex, the float, clear, and vertical-align attributes of the child elements are invalidated
Flex principle
Control the placement and arrangement of child boxes by adding flex properties to the parent box
1. The flex – direction attribute
Values: the row (the default) | row – reverse | column | column – reverse
Flex layout starts with the main axis and side axis. Flex-direction allows you to set the main axis, and the rest is the side axis
<style>
.box {
display: flex;
flex-direction: row;
width: 500px;
height: 500px;
border: 1px solid;
}
.box span {
width: 50px;
height: 50px;
margin: 10px;
}
.span1 {
background: pink;
}
.span2 {
background: greenyellow;
}
.span3 {
background: burlywood;
}
</style>
<div class="box">
<span class="span1">1</span>
<span class="span2">2</span>
<span class="span3">3</span>
</div>
Copy the code
Parent set flex-direction: row; And then the principal axis, the horizontal axis, the subset will go left to right
<style>
.box {
display: flex;
flex-direction: row-reverse;
width: 500px;
height: 500px;
border: 1px solid;
}
.box span {
width: 50px;
height: 50px;
margin: 10px;
}
.span1 {
background: pink;
}
.span2 {
background: greenyellow;
}
.span3 {
background: burlywood;
}
</style>
<div class="box">
<span class="span1">1</span>
<span class="span2">2</span>
<span class="span3">3</span>
</div>
Copy the code
Parent set flex-direction to row-reverse; And then the principal axis, the horizontal axis, the subset will go from right to left
justify-content
Context-content sets the arrangement of child elements on the main axis
attribute | instructions |
---|---|
flex-start | The default is to start from scratch, such as left to right if the main axis is X-axis |
flex-end | I’m going to start at the tail |
center | Center the axis horizontally if the axis is X-axis |
space-around | Bisect the rest of the space a little bit between the two sides |
space-between | Edge each side and then divide the rest of the space |
Let’s take a look at each one |
Context-content: flex-start aligns ab initio along the colorimetric axis. In many cases, the colorimetric axis is not set to us and is equivalent to flex-direction:row
<style>
.box {
width: 500px;
height: 500px;
border: 1px solid;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.box span {
width: 100px;
height: 100px;
}
.box span:nth-child(1) {
background: blanchedalmond;
}
.box span:nth-child(2) {
background: greenyellow;
}
.box span:nth-child(3) {
background: pink;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
Copy the code
The flex – end | arrangement from the tail
<style>
.box {
width: 500px;
height: 500px;
border: 1px solid;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.box span {
width: 100px;
height: 100px;
}
.box span:nth-child(1) {
background: blanchedalmond;
}
.box span:nth-child(2) {
background: greenyellow;
}
.box span:nth-child(3) {
background: pink;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
Copy the code
justify-content: center; | in the spindle center alignment if the spindle is x axis horizontal center
<style>
.box {
width: 500px;
height: 500px;
border: 1px solid;
display: flex;
flex-direction: row;
justify-content: center;
}
.box span {
width: 100px;
height: 100px;
}
.box span:nth-child(1) {
background: blanchedalmond;
}
.box span:nth-child(2) {
background: greenyellow;
}
.box span:nth-child(3) {
background: pink;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
Copy the code
justify-content: space-around; Bisect the rest of the space a little distance between the two sides (the distance between the two sides is half of the middle distance)
<style>
.box {
width: 500px;
height: 500px;
border: 1px solid;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.box span {
width: 100px;
height: 100px;
}
.box span:nth-child(1) {
background: blanchedalmond;
}
.box span:nth-child(2) {
background: greenyellow;
}
.box span:nth-child(3) {
background: pink;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
Copy the code
justify-content: space-between;
<style>
.box {
width: 500px;
height: 500px;
border: 1px solid;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.box span {
width: 100px;
height: 100px;
}
.box span:nth-child(1) {
background: blanchedalmond;
}
.box span:nth-child(2) {
background: greenyellow;
}
.box span:nth-child(3) {
background: pink;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
Copy the code
We set the axis to y and then justify-content: center; Look at the effect
<style>
.box {
width: 500px;
height: 500px;
border: 1px solid;
display: flex;
flex-direction: column;
justify-content: center;
}
.box span {
width: 100px;
height: 100px;
}
.box span:nth-child(1) {
background: blanchedalmond;
}
.box span:nth-child(2) {
background: greenyellow;
}
.box span:nth-child(3) {
background: pink;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
Copy the code
It was fun, wasn’t it?
2. The flex – wrap attributes
Flex-wrap sets whether or not the element is wrapped
In Flex, child elements are not wrapped by default. If they cannot be wrapped, they are shrunk and placed inside the parent element
attribute | instructions |
---|---|
nowrap | No line breaks by default |
wrap | A newline |
Let’s take a look at each one |
```
<style>
.box {
width: 300px;
height: 300px;
border: 1px solid;
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: nowrap;
}
.box span {
width: 100px;
height: 100px;
}
.box span:nth-child(1) {
background: blanchedalmond;
}
.box span:nth-child(2) {
background: greenyellow;
}
.box span:nth-child(3) {
background: pink;
}
.box span:nth-child(4) {
background: blanchedalmond;
}
.box span:nth-child(5) {
background: greenyellow;
}
.box span:nth-child(6) {
background: pink;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
```
Copy the code
<style>
.box {
width: 300px;
height: 300px;
border: 1px solid;
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
}
.box span {
width: 100px;
height: 100px;
margin-top: 0;
}
.box span:nth-child(1) {
background: blanchedalmond;
}
.box span:nth-child(2) {
background: greenyellow;
}
.box span:nth-child(3) {
background: pink;
}
.box span:nth-child(4) {
background: blanchedalmond;
}
.box span:nth-child(5) {
background: greenyellow;
}
.box span:nth-child(6) {
background: pink;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
Copy the code
Align -content: flex-start; align-content: flex-start; Ok, we’ll talk about this property later, but let’s look at the effect
<style>
.box {
width: 300px;
height: 300px;
border: 1px solid;
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
align-content: flex-start;
}
.box span {
width: 100px;
height: 100px;
margin-top: 0;
}
.box span:nth-child(1) {
background: blanchedalmond;
}
.box span:nth-child(2) {
background: greenyellow;
}
.box span:nth-child(3) {
background: pink;
}
.box span:nth-child(4) {
background: blanchedalmond;
}
.box span:nth-child(5) {
background: greenyellow;
}
.box span:nth-child(6) {
background: pink;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
Copy the code
Align-items property align-items sets the arrangement of child elements on the side axis (single line)
attribute | instructions |
---|---|
flex-start | Defaults from top to bottom |
flex-end | From the bottom up |
center | Cluster together center (vertical center) |
stretch | The tensile |
Let’s take a look at each one |
Flex-start is displayed in a single line from top to bottom
<style>
.box {
width: 500px;
height: 500px;
border: 1px solid;
display: flex;
flex-direction: row;
align-items: flex-start;
}
.box span {
width: 100px;
height: 100px;
margin-top: 0;
}
.box span:nth-child(1) {
background: blanchedalmond;
}
.box span:nth-child(2) {
background: greenyellow;
}
.box span:nth-child(3) {
background: pink;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
Copy the code
flex-end
<style>
.box {
width: 500px;
height: 500px;
border: 1px solid;
display: flex;
flex-direction: row;
align-items: flex-end;
}
.box span {
width: 100px;
height: 100px;
margin-top: 0;
}
.box span:nth-child(1) {
background: blanchedalmond;
}
.box span:nth-child(2) {
background: greenyellow;
}
.box span:nth-child(3) {
background: pink;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
Copy the code
Center The lateral axis is single-row centered
<style>
.box {
width: 500px;
height: 500px;
border: 1px solid;
display: flex;
flex-direction: row;
align-items: center;
}
.box span {
width: 100px;
height: 100px;
margin-top: 0;
}
.box span:nth-child(1) {
background: blanchedalmond;
}
.box span:nth-child(2) {
background: greenyellow;
}
.box span:nth-child(3) {
background: pink;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
Copy the code
align-items:stretch; Stretch, the subset doesn’t set the height, and then it will stretch to full
<style>
.box {
width: 500px;
height: 500px;
border: 1px solid;
display: flex;
flex-direction: row;
align-items: stretch;
}
.box span {
width: 100px;
/* height: 100px; */
margin-top: 0;
}
.box span:nth-child(1) {
background: blanchedalmond;
}
.box span:nth-child(2) {
background: greenyellow;
}
.box span:nth-child(3) {
background: pink;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
Copy the code
2. The align – content attribute
Align-content sets the arrangement of child elements on the side axis (multiple lines)
In Flex, child elements are not wrapped by default. If they cannot be wrapped, they are shrunk and placed inside the parent element
attribute | instructions |
---|---|
flex-start | By default, the alignment starts from the head of the side axis |
flex-end | The lateral axis is aligned from the tail |
center | Display in the center of the side axis |
space-around | The subterm bisects the remaining space on the lateral axis |
space-between | Edge each side and then divide the rest of the space |
stretch | Sets the height of the child element to equal the height of the parent element |
Let’s take a look at each one |
The align – items: flex – start;
<style>
.box {
width: 500px;
height: 500px;
border: 1px solid;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
}
.box span {
width: 100px;
height: 100px;
margin-top: 0;
}
.box span:nth-child(1) {
background: blanchedalmond;
}
.box span:nth-child(2) {
background: greenyellow;
}
.box span:nth-child(3) {
background: pink;
}
.box span:nth-child(4) {
background: blanchedalmond;
}
.box span:nth-child(5) {
background: greenyellow;
}
.box span:nth-child(6) {
background: pink;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
Copy the code
align-items:center
<style>
.box {
width: 500px;
height: 500px;
border: 1px solid;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
}
.box span {
width: 100px;
height: 100px;
margin-top: 0;
}
.box span:nth-child(1) {
background: blanchedalmond;
}
.box span:nth-child(2) {
background: greenyellow;
}
.box span:nth-child(3) {
background: pink;
}
.box span:nth-child(4) {
background: blanchedalmond;
}
.box span:nth-child(5) {
background: greenyellow;
}
.box span:nth-child(6) {
background: pink;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
Copy the code
align-content:flex-end;
<style>
.box {
width: 500px;
height: 500px;
border: 1px solid;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-end;
}
.box span {
width: 100px;
height: 100px;
margin-top: 0;
}
.box span:nth-child(1) {
background: blanchedalmond;
}
.box span:nth-child(2) {
background: greenyellow;
}
.box span:nth-child(3) {
background: pink;
}
.box span:nth-child(4) {
background: blanchedalmond;
}
.box span:nth-child(5) {
background: greenyellow;
}
.box span:nth-child(6) {
background: pink;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
Copy the code
6. The flex – flow properties
Flex-flow compound property, equivalent to setting both flex-direction and flex-wrap
For example: flex-flow: row wrap;
This is equivalent to flex-direction: row; flex-wrap:wrap;
Second, the project attributes
1. Order attribute: defines the order of items. The smaller the value is, the higher the order will be.
Order: an integer
2. Flex-grow property: defines the expansion ratio of the project. When there is free space, the project will be enlarged according to this value
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.
3. The Flex-shrink attribute: defines the shrink scale of a project. The default is 1, that is, if there is insufficient space, the project will shrink
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
4. The Flex-basis property defines the main size of the project before allocating extra space. Based on this property, the browser calculates whether the main axis has extra space. Its default value is Auto, the original size of the project.
You can set it to the same value as the width or height attribute (such as 350px) and the project will take up a fixed space.
5. Flex property: short for flex-grow,flex-shrink, and flex-basis. The default value is 0. The last two attributes are optional
This property has two shortcut values: auto (1 1 auto) and None (0 0 auto)
Align-self property: allows a single item to have a different alignment from other items, overwriting 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
There are six attribute values: auto | flex – start | flex – end | center | baseline | stretch
flex:1;
Flex: The flex property defines the amount of remaining space allocated to the child element
.item {
flex:<number>; // default 0
}
Copy the code
For example, implementing a Holy Grail layout in Flex
<style>
.box {
width: 100%;
height: 500px;
border: 1px solid;
display: flex;
}
.box span {
width: 100px;
/* height: 100px; */
margin-top: 0;
}
.box span:nth-child(1) {
width: 200px;
background: blanchedalmond;
}
.box span:nth-child(2) {
background: greenyellow;
flex: 1;
}
.box span:nth-child(3) {
height: 200px;
background: pink;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
Copy the code
Wechat search front-end architect Qdleader, can enter the group, and the daily update of the front-end interview question bank github.com/qdleader/qd… Come on, progress together!