flex布局练习题
时间: 2023-06-30 13:27:30 浏览: 44
好的,以下是一个简单的flex布局练习题:
HTML结构:
```
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>
```
CSS样式:
```
.container {
display: flex;
flex-direction: column;
height: 300px;
justify-content: space-between;
}
.item1 {
background-color: red;
height: 50px;
}
.item2 {
background-color: blue;
height: 100px;
}
.item3 {
background-color: green;
height: 150px;
}
```
以上代码实现了一个垂直方向的flex布局,容器高度为300px,三个子元素分别为50px、100px、150px高度,并且它们的间距平均分布在容器中。你可以尝试修改以上代码,实现其他不同的布局效果。
相关问题
flex 布局练习题
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;
}
```
主流布局 flex布局
Flex布局(也称为弹性布局)是种主流的CSS布局方式,它可以方便地实现页面元素的自适应和排列。Flex布局通过定义容器和子元素的属性来实现灵活的布局效果。
在Flex布局中,有两个重要的概念:容器和子元素。容器是指应用Flex布局的父元素,而子元素则是容器内部的直接子元素。
以下是Flex布局的一些主要特点和属性:
1. 容器属性:
- display: flex;:将容器设置为Flex布局。
- flex-direction:指定主轴的方向,可以是row(水平方向)、column(垂直方向)、row-reverse(水平反向)或column-reverse(垂直反向)。
- justify-content:定义了子元素在主轴上的对齐方式,可以是flex-start(起始对齐)、flex-end(末尾对齐)、center(居中对齐)、space-between(两端对齐,项目之间间隔相等)或space-around(每个项目两侧的间隔相等)。
- align-items:定义了子元素在交叉轴上的对齐方式,可以是flex-start(起始对齐)、flex-end(末尾对齐)、center(居中对齐)、baseline(基线对齐)或stretch(拉伸对齐)。
- flex-wrap:定义了子元素是否换行,可以是nowrap(不换行)、wrap(换行)或wrap-reverse(反向换行)。
2. 子元素属性:
- flex:指定子元素的伸缩比例,用于控制子元素在容器中的占比。
- align-self:定义了单个子元素在交叉轴上的对齐方式,可以覆盖容器的align-items属性。
以上是Flex布局的一些基本概念和属性,通过灵活地使用这些属性,可以实现各种不同的布局效果。