flex: 0 1 33%;
时间: 2024-04-20 08:26:42 浏览: 19
这是一个CSS属性,用于设置弹性盒子的伸缩性。具体来说,`flex: 0 1 33%`的含义如下:
- `flex-grow: 0`表示该弹性盒子不会根据可用空间进行伸展。
- `flex-shrink: 1`表示该弹性盒子可以根据可用空间进行收缩,相对于其他具有可伸缩性的弹性盒子来说,该弹性盒子将优先被收缩。
- `flex-basis: 33%`表示该弹性盒子的初始大小为父容器宽度的33%。
综合起来,`flex: 0 1 33%`的意思是,该弹性盒子在布局时不会伸展,但可以被收缩,并且初始大小为父容器宽度的33%。
相关问题
flex: 0 0 calc(33.333% - 20px);
这是一个CSS中的flexbox布局的语法,它定义了一个项目的尺寸和伸缩性。
- `flex`: 定义了项目的伸缩比例,默认值为1,表示如果有多个项目,它们将平均占据可用空间。
- `0`: 定义了项目的缩小比例,如果空间不足,项目将被缩小。在这个例子中,设置为0表示项目不会被缩小。
- `calc(33.333% - 20px)`: 定义了项目的基础尺寸,可以使用任何CSS单位。在这个例子中,项目的宽度为父容器宽度的33.333%,并减去20像素的空白间隔。
flex 布局左图右文
在使用flex布局时,可以通过将左边的图片和右边的文字放在同一个父容器内,并设置父容器的display为flex,然后使用flex属性来控制左右元素的宽度和高度。具体地,可以使用下面的代码来实现左图右文的布局:
```css
.new_item {
display: flex;
align-items: center; /* 垂直居中对齐 */
}
.img {
flex: 0 0 15%; /* 左边图片的宽度占父容器的15% */
height: 80px;
}
.caption {
flex: 1; /* 右边文字自适应宽度 */
padding: 0 30px; /* 设置文字区域的内边距 */
}
```
在上述代码中,设置了左边图片的宽度为父容器宽度的15%,右边文字区域自适应宽度。通过这种方式,可以实现左图右文的布局。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [flex 布局](https://blog.csdn.net/weixin_28782221/article/details/117976076)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [flex布局实现左边图片与右边文字同等高](https://blog.csdn.net/qq_42551474/article/details/108776407)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [css的左图右文布局且保持图片宽高比例固定放缩](https://blog.csdn.net/Hill_Kinsham/article/details/82082567)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)
![](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)