Date: 2020-10-11
Author: 19th WY
Tags: CSS flexible box, flexible container style, flexible element style
1. Elastic box and elastic elements
- flex (flexible box, telescopic box)
- It is a layout method in CSS, which is used to replace floating to complete the layout of the page
- Flex can make the element elastic, so that the element can change with the size of the page
- Flexible container
- To use a flex box, you must first set an element as a flex container
- We use the display to set the elastic container
-display: flex to set the block-level elastic container
-display: inline-flex to set the inline flex container
- Elastic element
- The child elements of the flex container are flex elements (flex items)
- Elastic elements can set up elastic containers at the same time
<style>
ul{
width:500px;
border:10px red solid;
/*将ul设置为弹性容器*/
display:flex;
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
Second, the properties of flexible containers
- flex-direction specifies the arrangement of flexible elements in the container
- Optional values:
- row default value, the elastic elements are arranged horizontally in the container (left to right)
-the main axis is from left to right - row-reverse elastic elements are arranged horizontally in the container (right to left)
-the main axis is from right to left - column The elastic elements are arranged vertically (from top to bottom)
-the main axis is from top to bottom - column-reverse The elastic elements are arranged vertically (from bottom to top)
-the main axis is from bottom to top
- row default value, the elastic elements are arranged horizontally in the container (left to right)
- Main axis:
The arrangement direction of the elastic elements is called the main axis
ul{
width:500px;
border:10px red solid;
/*将ul设置为弹性容器*/
display:flex;
flex-direction: row;
}
Third, the properties of elastic elements
- Properties of elastic elements:
- flex-grow specifies the stretch coefficient of the elastic element
-when the parent element has extra space, the child element stretches
-the remaining space of the parent element will be distributed in proportion - flex-shrink specifies the shrinkage coefficient of the elastic element
-when the space in the parent element is not enough to accommodate all the child elements, the child elements are shrunk
- flex-grow specifies the stretch coefficient of the elastic element
li{
width:100px;
height:100px;
background-color: #bfa;
font-size: 50px;
text-align: center;
line-height:100px;
/*flex-grow: 1;*/
flex-shrink:0;
}
li:nth-child(1){
flex-grow: 0;
}
li:nth-child(2){
background-color:pink;
flex-grow: 2;
}
li:nth-child(3){
background-color: orange;
flex-grow: 3;
}
Fourth, the style of the flexible container
1、flex-wrap
- flex-wrap:
- Set whether the elastic element will automatically wrap in the elastic container
- Optional values:
- nowrap default value, elements will not wrap automatically
- The wrap element automatically wraps along the minor axis
- wrap-reverse elements wrap in the opposite direction along the main axis
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin:0;
padding:0;
list-style:none;
}
ul{
width:500px;
border:10px red solid;
/*设置ul为弹性容器*/
display:flex;
flex-wrap:wrap-reverse;
}
li{
width:200px;
height:100px;
background-color: #bfa;
font-size: 50px;
text-align: center;
line-height:100px;
flex-shrink:0;
}
/*li:nth-child(1){
}*/
li:nth-child(2){
background-color:pink;
}
li:nth-child(3){
background-color: orange;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
- flex-flow:
- Shorthand attributes for wrap and direction
ul{
width:500px;
border:10px red solid;
/*设置ul为弹性容器*/
display:flex;
flex-flow:row wrap;
}
2、justify-content
justify-content：
- How to allocate empty space on the main axis (how to arrange the elements on the main axis)
- Optional values:
- flex-start elements are arranged along the starting edge of the main axis
- flex-end elements are arranged along the end of the main axis
- center elements are arranged in the center
- space-between white space is equally distributed among elements
- space-around white space is distributed to both sides of the element
- space-evenly space is distributed to one side of the element
ul{
width:500px;
border:10px red solid;
/*设置ul为弹性容器*/
display:flex;
justify-content:space-around;
}
3、align-items
- align-items:
- How the elements are aligned on the axis
- Relationship between elements:
- Optional value:
- stretch the default value, set the length of the element to the same value
- The flex-start element will not stretch and will be aligned along the secondary axis
- flex-end aligned along the end of the minor axis
- center aligned
- baseline alignment
4、align-content:
- align-content:
the distribution of the empty space on the secondary axis
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin:0;
padding:0;
list-style:none;
}
ul{
width:600px;
height:800px;
border:10px red solid;
/*设置ul为弹性容器*/
display:flex;
align-items:center;
align-content: space-between;
}
li{
width:200px;
background-color: #bfa;
font-size: 50px;
text-align: center;
line-height:100px;
flex-shrink:0;
}
li:nth-child(1){
/*align-self:用来覆盖当前弹性元素上的align-items*/
align-self:stretch;
}
li:nth-child(2){
background-color:pink;
}
li:nth-child(3){
background-color: orange;
}
li:nth-child(4){
background-color: yellow;
}
li:nth-child(5){
background-color: green;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>
2
<div>2</div>
</li>
<li>
3
<div>3</div>
<div>3</div>
</li>
<li>1</li>
<li>
2
<div>2</div>
</li>
</ul>
</body>
</html>
align-self: used to cover the align-items on the current elastic element
Five, the style of elastic elements
1. Elastic growth reduction factor
- Elastic growth coefficient
flex-grow: 1;
- Reduction factor of elastic elements
- The calculation method of the reduction factor is more complicated
- The reduction is calculated based on the reduction factor and element size
flex-shrink:1;
2. Basic length of elements
- flex-basis specifies the basic length of the element on the main axis
- If the main axis is horizontal, the value specifies the width of the element
- If the main axis is vertical, the value specifies the height of the element
- The default value is auto, which means the height or width of the reference element itself
- If a specific value is passed, the value shall prevail
flex-basis:auto;
3. flex sets all three styles of elastic elements
- flex growth and reduction basis
- initial “flex:0 1 auto”
- car “flex: 1 1 car”
- none "flex:0 0 auto" flexible elements are not flexible
4、order
- order determines the order of the elastic elements
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin:0;
padding:0;
list-style:none;
}
ul{
width:900px;
border:10px red solid;
/*设置弹性盒*/
display:flex;
}
li{
width:200px;
height:100px;
background-color: #bfa;
font-size: 50px;
text-align: center;
line-height:100px;
flex-shrink:1;
flex:0 0 auto;
}
li:nth-child(1){
/*order 决定弹性元素的排列顺序*/
order:2;
}
li:nth-child(2){
background-color:pink;
order:3;
/*flex-grow: 2;*/
}
li:nth-child(3){
background-color: orange;
order:1;
/*flex-grow: 3;*/
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
Replace withflex:auto;
