Table of contents
Introduction
What is Flex Layout
Flex is the abbreviation of Flexible Box, also known as flexible box layout.
Flex layout consists of:
- flex-container(
flex container) - flex-item(
flex items) - Spindle (
main axis) - cross axis (
cross axis)
The role of flex layout
Before the flex layout appeared, the way of web page layout was standard flow, floating, positioning, etc. It is relatively troublesome to solve more complex problems.
Whereas flexthe layout can:
- Automatic scaling
- Design flexible and responsive layout structures more easily
- Precise and flexible control over the layout of block-level boxes
- Available on both PC and mobile
Flex container (parent element) properties
Define the flex container first before using flex layout.
display:flex;
After defining the Flex container, you can use the corresponding properties to change the layout of the sub-elements, so that the sub-elements can be automatically squeezed or stretched.
Corresponding properties:
1. justify-content 主轴元素对齐方式
2. align-items 交叉轴元素对齐方式
3. flex-direction 设置主轴方向
4. flex-wrap 主轴一行满了换行
5. align-content 交叉轴行对齐方式
6. flex-flow 同时设置 flex-direction和 flex-wrap属性
1. justify-content
The properties of the container justify-contentcan set the alignment of the child elements in the main axis direction . (Remember to define the container first display:flex;)
justify-content: center;//居中对齐
justify-content: space-between;//间距在子元素之间
justify-content: space-evenly;//主轴方向所有地方的间距都相等
justify-content: space-around;//间距加在子元素的两侧（中间大的是两个子元素的加在一起）
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>主轴对齐方式</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
/* justify-content: center; */
/* justify-content: space-between; */
/* justify-content: space-evenly; */
justify-content: space-around;
height: 200px;
margin: auto;
border: 1px solid #000;
}
.box div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
2. align-items
The properties of the container align-itemscan set the alignment of the child elements in the direction of the cross axis .
From this we can set the container properties andjustify-content to be centered, so that the elements can be perfectly centered.align-items
align-items: center;//居中
align-items: stretch;//拉伸,默认值(现有状态,这里测试去掉子级的高度)
align-items: flex-start;//将子元素在容器顶部对齐
align-items: flex-end;//将子元素在容器底部对齐
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>交叉轴对齐方式</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
display: flex;
/* 居中 */
/* align-items: center; */
/* 拉伸,默认值(现有状态,测试的时候去掉子级的高度) */
/* align-items: stretch; */
/* align-items: flex-start; */
align-items: flex-end;
height: 300px;
margin: auto;
border: 1px solid #000;
}
.father div {
/* 如果不设置宽，由内容撑开 */
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
3. flex-direction
The properties of the container flex-directioncan change the direction of the main axis of the flex layout. The flex main axis direction defaults to the horizontal right direction. If you modify the main axis direction, the cross axis direction will change accordingly.
flex-direction: column;//主轴方向为垂直方向（从上到下）
flex-direction: column-reverse;//主轴方向为垂直方向（从下到上）
flex-direction: row;//主轴方向为水平方向（从左到右）
flex-direction: row-reverse;//主轴方向为水平方向（从右到左）
To achieve vertical centering after modifying the axis direction:
display:flex;
flex-direction: column;
justify-content: center;
4. flex-wrap
After the container is defined flex, if too many child elements exceed the width of the main axis, the child elements in the container will be automatically stretched.
like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性盒子换行</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
height: 500px;
border: 1px solid #000;
}
.box div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<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>
</body>
</html>
Solution: flex-wrapThe properties of the container allow child elements that exceed the main axis direction of the container to be displayed in a new line.
flex-wrap: nowrap;//默认值，不换行
flex-wrap: wrap;//换行，从上到下
flex-wrap: wrap-reverse;//换行，从下到上
5. align-content
The properties of the container align-contentcan adjust the alignment of the sub-element rows ( you need to set the line break first ).
align-content: center;//居中对齐
align-content: space-around;//间距加在子元素的两侧（中间大的是两个子元素的加在一起）
align-content: space-between;//间距在子元素之间
The properties of the first three are the same as the main axis alignment, so I won’t repeat them here.
align-content: stretch;拉伸,默认值(现有状态,这里测试去掉子级的高度)
6.flex-flow
flex-flowThe property flex-directionis flex-wrapa shorthand property for setting both the and properties.
flex-flow: row wrap;
Flex Item (Child Element) Properties
We can set the corresponding properties to make the direct child elements of the flex container become elastic (flex) items. ( Define the flex container first before using the flex layout. )
Corresponding properties:
1. flex-grow
2. flex-shrink
3. flex-basis
4. flex
5. align-self
6. order
1. flex-grow
Use flex-growattributes to define the zoom ratio of the child elements inside the flexbox (how the child elements allocate the remaining space of the parent element when the sum of the width of all child elements is smaller than the width of the parent element).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
display:flex;
width:200px;
height:150px;
}
.box1{
/* 没有设置宽度 */
background:red;
flex-grow: 1;
}
.box2{
background:blue;
flex-grow: 2;
}
.box3{
background:orange;
flex-grow: 1;
}
</style>
</head>
<body>
<div class="father">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
2. flex-shrink
Use flex-shrinkattributes to define the shrinkage ratio of the child elements inside the flexbox (how the child elements shrink their own width when the sum of all child element widths is greater than the parent element's width).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
display:flex;
width:200px;
height:150px;
}
.box1{
width: 100px;
background:red;
flex-shrink: 1;
}
.box2{
width: 100px;
background:blue;
flex-shrink: 2;
}
.box3{
width: 100px;
background:orange;
flex-shrink: 1;
}
</style>
</head>
<body>
<div class="father">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
3. flex-basis
Use flex-basisthe attribute to set the width of the child element, the default value is auto (the effect is the same width, the priority widthis higher , even if widthit will be displayed later flex-basis).
4. flex
Use the flex attribute to set the three attributes of flex-grow, flex-shrink, and flex-basis at the same time. The flex attribute is a composite attribute.
Practical applications generally use composite attributes.
grammar:
flex: grow shrink basis;//顺序不能改变,默认值为0 1 auto;
5. align-self
Use align-selfattributes to set the alignment of child element items.
Note: align-selfThe property overrides the alignment set by the container's align-itemsproperty .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
display:flex;
width:200px;
height:150px;
align-items: center;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 50px;
background:red;
align-self: flex-start;
}
.box2{
width: 100px;
height: 50px;
background:blue;
}
.box3{
width: 100px;
height: 50px;
background:orange;
}
</style>
</head>
<body>
<div class="father">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</body>
</html>
6. order
Use orderattributes to define the sort order of child elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
display:flex;
width:200px;
height:150px;
}
.box1{
width: 100px;
background:red;
order: 2;
}
.box2{
width: 100px;
background:blue;
order: 1;
}
.box3{
width: 100px;
background:orange;
order: 3;
}
</style>
</head>
<body>
<div class="father">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</body>
</html>
