display: flex
时间: 2024-05-28 08:08:08 浏览: 13
display:flex是CSS3引入的一种布局方式,它可以让元素在一个容器中按照一定的规则排列,具有灵活性和自适应性。其中flex容器和flex项目是该布局方式的两个重要概念,下面将会详细介绍。
1. flex容器
当一个元素设置了display:flex或display:inline-flex时,该元素就成为了flex容器,它的直接子元素会成为该容器的flex项目,下面是一个例子[^1]:
```html
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
```
```css
.container {
display: flex;
}
```
在上面的例子中,div.container元素被设置为flex容器,其中的div.item元素则成为了该容器的flex项目。接下来,我们将会详细介绍如何使用flex布局来排列这些flex项目。
2. flex项目
flex项目是指直接放在flex容器内的子元素,下面是一些常用的flex项目属性[^2]:
- flex-grow:指定项目的放大比例,默认为0,即不放大;
- flex-shrink:指定项目的缩小比例,默认为1,即缩小;
- flex-basis:指定项目的初始大小,默认为auto;
- flex:是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto;
- align-self:指定单个项目在交叉轴上的对齐方式。
下面是一个例子[^3],其中flex-direction指定了主轴的方向为水平方向,justify-content指定了项目在主轴上的对齐方式为居中,align-items指定了项目在交叉轴上的对齐方式为居中,flex-wrap属性则指定了多余的flex项目是否换行显示:
```css
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.item {
flex: 1 1 200px;
}
```
在上面的例子中,div.container元素被设置为flex容器,其下的div.item则被设置为flex项目。flex-direction属性指定了主轴的方向为水平方向,justify-content属性指定了项目在主轴上的对齐方式为居中,align-items属性指定了项目在交叉轴上的对齐方式为居中,flex-wrap属性则指定了多余的flex项目是否换行显示。在flex项目的属性中,flex属性指定了flex-grow, flex-shrink 和 flex-basis三个属性值,这里的意义是flex-grow:1; flex-shrink:1; flex-basis:200px;。其中flex-grow:1表示当容器空间有剩余时,该项目会自动放大,flex-shrink:1表示当容器空间不足时,该项目会自动缩小,flex-basis:200px则指定了该项目的初始大小为200px。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)