flex 布局练习题
时间: 2023-11-03 15:59:55 浏览: 69
flex布局是一种常用的网页布局方式,使用它可以很方便地实现各种灵活的布局效果。以下是一些flex布局的练习题案例:
1. 使用flex布局实现一个上下结构的容器,容器高度为100vw(视口宽度),背景颜色为skyblue。容器内有两个子元素,第一个子元素高度为父容器的一半,第二个子元素高度为父容器的一半。
CSS代码如下:
```
.container {
height: 100vw;
width: 100vw;
background-color: skyblue;
display: flex;
flex-direction: column;
}
.item {
flex: 1;
}
```
2. 使用flex布局实现一个三列布局,容器高度为100vh(视口高度),背景颜色为skyblue。容器内有三个子元素,头部、主体和底部,分别占据不同的高度比例。
CSS代码如下:
```
.container {
height: 100vh;
background-color: skyblue;
display: flex;
flex-direction: column;
}
.head {
background-color: blue;
flex-grow: 2;
}
.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;
}
```