Tip: After the article is written, the table of contents can be automatically generated. How to generate it can refer to the help document on the right
Article Directory
foreword
Basic usage of elastic layout
Basic case of multi-axis flexible layout
提示：以下是本篇文章正文内容，下面案例可供参考
1. What is flex?
Flex is the abbreviation of Flexible Box. flex layout means elastic layout, which can provide maximum flexibility for box model
2. Use steps
1. Import library css
c's's code is as follows (example):
<style>
/* 父级是容器
display:flex
justify-content：水平对齐
align-items:一根轴线垂直对齐
align-content:多根轴线垂直对齐
flex-wrap:wrap:允许换行
*/
.wrapper{
width: 700px;
height: 700px;
border: 1px solid black;
display: flex;
/* 水平对齐方式 */
justify-content: space-around;
/* flex-wrap: wrap允许换行 */
flex-wrap: wrap;
/* 垂直对齐方式
align-items: 针对一根轴线;
align-content:针对多根轴线
flex-start:上对齐
flex-end:下对齐
center:居中对齐
space-around:每个子项目左右间距相等
space-bewteen:每两个子项目间距相等
stretch:不设置高度或值为auto，将充满容器高度
*/
/* flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 */
align-content:space-around;
}
/* 子级是项目 */
.wrapper div{
width: 200px;
height: 200px;
}
.wrapper div:nth-of-type(1){
background-color: red;
}
.wrapper div:nth-of-type(2){
background-color:green;
}
.wrapper div:nth-of-type(3){
background-color:blue;
}
.wrapper div:nth-of-type(4){
background-color: yellow;
}
.wrapper div:nth-of-type(5){
background-color:black;
}
.wrapper div:nth-of-type(6){
background-color:magenta;
}
</style>
2. Read data
The html code is as follows (example):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="wrapper">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
The data requested by the url network used here.
Summarize
