eg:1
<div class="container">
<div class="item"> </div>
</div>
.container{
width: 300px;
height: 300px;
background-color: skyblue;
display: flex;
justify-content: center; // 横向居中
align-items: center; // 垂直居中
}
.item{
width: 100px;
height: 100px;
background-color: blue;
}
eg:2
<div class="container">
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
</div>
.container{
width: 300px;
height: 300px;
background-color: skyblue;
display: flex;
justify-content: space-around; // 两端平均分配对齐
flex-wrap: wrap; // 超出换行
align-content: space-around; // 垂直平均分配
}
.item{
width: 80px;
height: 80px;
background-color: blue;
}
eg:3
<div class="container">
<div class="item"> </div>
<div class="item"> </div>
</div>
.container{
width: 300px;
height: 300px; // 垂直是按高度对齐的
background-color: skyblue;
display: flex;
justify-content: space-between; // 两端对齐
}
.item{
width: 80px;
height: 80px;
background-color: blue;
}
.container div:nth-of-type(2){
align-self: flex-end; // 垂直两端对齐
}
eg:4
– 与上一例差不多
<div class="container">
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
</div>
.container{
width: 300px;
height: 300px;
background-color: skyblue;
display: flex;
justify-content: space-between;
}
.item{
width: 80px;
height: 80px;
background-color: blue;
}
.container div:nth-of-type(2){
align-self: center;
}
.container div:nth-of-type(3){
align-self: flex-end;
}
eg:5
<div class="container">
<div class="first">
<div class="item"> </div>
<div class="item"> </div>
</div>
<div class="second">
<div class="item"> </div>
<div class="item"> </div>
</div>
</div>
.container{
width: 300px;
height: 300px;
background-color: skyblue;
display: flex;
justify-content: space-between;
}
.item{
width: 80px;
height: 80px;
background-color: blue;
border: 1px solid green;
}
.first,.second{
display: flex;
flex-direction: column;
justify-content: space-between;
}
eg:6
<div class="container">
<div class="first">
<div class="item"> </div>
<div class="item"> </div>
</div>
<div class="second">
<div class="item"> </div>
</div>
<div class="three">
<div class="item"> </div>
<div class="item"> </div>
</div>
</div>
.container{
width: 300px;
height: 300px;
background-color: skyblue;
display: flex;
justify-content: space-between;
}
.item{
width: 80px;
height: 80px;
background-color: blue;
border: 1px solid green;
}
.first,.three{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.second{
align-self: center;
}
eg:7
<div class="container">
<div class="first">
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
</div>
<div class="second">
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
</div>
</div>
.container{
width: 300px;
height: 300px;
background-color: skyblue;
display: flex;
justify-content: space-between; // 两端对齐
}
.item{
width: 80px;
height: 80px;
background-color: blue;
border: 1px solid green;
}
.first,.second,.three{
display: flex;
flex-direction: column; // 垂直对齐
justify-content: space-between;
}
eg:8
<div class="container">
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
</div>
.container{
width:100%;
height: 100px;
background-color: skyblue;
display: flex;
justify-content: space-around;
}
.first{
width:100px; // 直接定义
background-color: red;
}
.second{
background-color: orange;
flex-grow: 1; // 占比
}
.third{
width:10%; // 百分比也可以
background-color: pink;
}
eg:9
<div class="container">
<div class="head">1</div>
<div class="body">
<div class="body-left">2.1</div>
<div class="body-center">2.2</div>
</div>
<div class="footer">3</div>
</div>
.container{
height: 100vh;
background-color: skyblue;
display: flex;
flex-direction: column;
}
.head{
background-color: blue;
flex-grow: 1; // 高度占比
}
.body{
display: flex;
flex-grow: 5;
}
.body-left{
background-color: green;
flex-grow: 1; // 横向占比
}
.body-center{
background-color: pink;
flex-grow: 5;
}
.footer{
flex-grow: 1;
background-color: orange;
}
eg:10
<div class="container">
<div class="first">
<div class="item" style="background: red;">A</div>
<div class="item" style="background: yellow;">B</div>
<div class="item" style="background: blue;">C</div>
</div>
<div class="second">
<div class="box">
<div class="item" style="background: green;">D</div>
<div class="item" style="background: pink;">E</div>
</div>
<div class="bigitem" style="background: orange;">F</div>
</div>
</div>
.container{
height: 100vw;
width: 100vw;
background-color: skyblue;
display: flex;
flex-direction: column;
}
.item{
flex: 1;
}
.first{
display: flex;
flex: 1;
}
.second{
display: flex;
flex: 2;
}
.box{
display: flex;
flex-direction: column;
flex: 1;
}
.bigitem{
flex: 2;
}