文章目录
1. flex布局流式布局自动换行2. flex布局流式布局自动换行3. flex横向滚动4. flex 等分5. flex百分比布局6. flex圣杯布局
1. flex布局流式布局自动换行
.box {
margin: 20px auto auto 100px;
width: 300px;
max-height: 600px;
overflow-x: hidden;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
background: #ccc;
}
.box .item {
width: 90px;
height: 90px;
background: orange;
margin-right: 15px;
margin-bottom: 15px;
}
.box .item:nth-of-type(3n) {
margin-right: 0px;
}
2. flex布局流式布局自动换行
.box5 {
margin: 20px auto auto 100px;
display: flex;
width: 300px;
height: 200px;
background-color: skyblue;
flex-wrap: wrap;
align-content: flex-start;
.item {
background-color: orangered;
border: 2px solid skyblue;
flex: 0 1 33.33%;
height: 50px;
box-sizing: border-box;
}
}
3. flex横向滚动
.box1 {
margin: 20px auto auto 100px;
width: 300px;
height: 120px;
overflow-x: auto;
overflow-y: hidden;
display: flex;
flex-wrap: nowrap;
background: #ccc;
}
.box1 .item1 {
width: 90px;
height: 90px;
background: orange;
margin-right: 15px;
flex-shrink: 0;
}
.box1 .item1:last-of-type {
margin-right: 0px;
}
4. flex 等分
.box2 {
margin: 20px auto auto 100px;
width: 300px;
display: flex;
background: #ccc;
}
.box2 div {
flex: 1;
background-color: palevioletred;
margin: 10px 10px 0px 0px;
height: 100px;
}
.box2 .item1:last-child {
margin: 10px 0px 0px 0px;
}
5. flex百分比布局
.box3 {
margin: 20px auto auto 100px;
width: 300px;
height: 60px;
display: flex;
background: #ccc;
}
.box3 .item1 {
flex: 0 1 70%;
background-color: violet;
}
.box3 .item2 {
flex: 0 1 30%;
background-color: yellowgreen;
}
6. flex圣杯布局
.box4 {
margin: 20px auto auto 100px;
width: 300px;
height: 300px;
background: #ccc;
display: flex;
flex-direction: column;
.header,
.footer {
height: 50px;
background-color: bisque;
}
.main {
flex: 1;
display: flex;
}
.left,
.right {
flex-basis: 50px;
background-color: antiquewhite;
}
.center {
flex: 1;
}
}
推荐链接
发表评论