** flex弹性布局**
flex弹性布局,给盒状模型提供最大的灵活性。任何一个盒装模型都可以指定为flex布局。
flex-direction属性
.z{
width: 500px;
height: 500px;
margin: auto;
border: 1px solid black;
display: flex;
flex-direction: row;
}
.z>div{
width: 100px;
height: 100px;
background-color:yellow;
border: 1px solid red;
box-sizing: border-box;
}
flex-direction:row-reverse;
flex-direction:column;
flex-direction:column-reverse;
flex-wrap属性
.z{
width: 500px;
height: 500px;
margin: auto;
border: 1px solid black;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.z>div{
width: 100px;
height: 100px;
background-color:yellow;
border: 1px solid red;
box-sizing: border-box;
}
flex-wrap:nowrap;
flex-direction:wrap-reverse;
justify-content属性
.z{
width: 500px;
height: 500px;
margin: auto;
border: 1px solid black;
display: flex;
flex-direction: row;
justify-content: center;
}
.z>div{
width: 100px;
height: 100px;
background-color:yellow;
border: 1px solid red;
box-sizing: border-box;
}
justify-content:flex-end;
justify-content:flex-start;
justify-content:space-around;
justify-content:space-between;
align-items属性
align-items:flex-end;
align-items:flex-start;
align-items:center;
.z{
width: 500px;
height: 500px;
margin: auto;
border: 1px solid black;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items:baseline;
text-align: center;
}
.z>div{
background-color:yellow;
border: 1px solid red;
box-sizing: border-box;
}
.z>div:nth-child(1){
width: 100px;
height: 100px;
font-size: 10px;
line-height: 100px;
}
.z>div:nth-child(2){
width: 150px;
height: 150px;
font-size: 20px;
line-height: 150px;
}
.z>div:nth-child(3){
width: 200px;
height: 250px;
font-size: 30px;
line-height: 250px;
}
align-content属性只对多根轴线起作用,单根不起作用。
.z{
width: 500px;
height: 500px;
margin: auto;
border: 1px solid black;
display: flex;
flex-wrap: wrap;
flex-direction:row;
align-content: flex-end;
text-align: center;
}
.z>div{
background-color:yellow;
border: 1px solid red;
box-sizing: border-box;
}
.z>div:nth-child(1){
width: 100px;
height: 100px;
font-size: 10px;
line-height: 100px;
}
.z>div:nth-child(2){
width: 150px;
height: 150px;
font-size: 20px;
line-height: 150px;
}
.z>div:nth-child(3){
width: 200px;
height: 100px;
font-size: 30px;
line-height: 100px;
}
.z>div:nth-child(4){
width: 100px;
height: 100px;
font-size: 10px;
line-height: 100px;
}
.z>div:nth-child(5){
width: 150px;
height: 150px;
font-size: 20px;
line-height: 150px;
}
.z>div:nth-child(6){
width: 200px;
height: 100px;
font-size: 30px;
line-height: 100px;
}
.z>div:nth-child(7){
width: 100px;
height: 100px;
font-size: 10px;
line-height: 100px;
}
.z>div:nth-child(8){
width: 150px;
height: 150px;
font-size: 20px;
line-height: 150px;
}
.z>div:nth-child(9){
width: 200px;
height: 100px;
font-size: 30px;
line-height: 100px;
}
</style>
align-content:flex-start;
align-content:center;
align-content:space-around;
align-content:space-between;
align-content:stretch;
flex属性-子元素按比例分配
.z{
width: 500px;
height: 500px;
margin: auto;
border: 1px solid black;
display: flex;
flex: 1;
flex-direction:row;
text-align: center;
}
.z>div{
background-color:yellow;
border: 1px solid red;
box-sizing: border-box;
}
.z>div:nth-child(1){
flex: 1;
height: 100px;
font-size: 10px;
line-height: 100px;
}
.z>div:nth-child(2){
flex: 2;
height: 150px;
font-size: 20px;
line-height: 150px;
}
.z>div:nth-child(3){
flex: 3;
height: 100px;
font-size: 30px;
line-height: 100px;
}