🗒️CSS3小问题-flex布局子元素高度设置无效
2022-12-5
| 2024-3-22
0  |  阅读时长 0 分钟
date
icon
password
description
permalink
categories
type
status
slug
summary
tags
category
updated
Mar 22, 2024 09:10 AM

前言

今天在写flex自适应布局的时候,出现了一个问题:flex布局子元素高度设置无效。
我的页面布局是这样的
 

原因

当指定view为flex布局后,给子元素定义widthheight是不起效果的。原因:定义为flex布局元素的子元素,自动获得了flex-shrink的属性,这个属性是什么意思呢?就是告诉子元素当父元素宽度不够用时,自己调整自己所占的宽度比,这个flex-shrink设置为1时,表示所有子元素大家同时缩小来适应总宽度。当flex-shrink设置为0时,表示大家都不缩小适应。

解决方法

所以,倘若给父元素设置了flex布局后.
  1. 若要其子元素的width和height有效果,必须给子元素设置`flex-shrink`为0。
  1. 将设置`flex:1 1 auto;`的元素的宽设置为`width:0;`
 
  • Css
  • CSS3小问题-子元素设置margin-top为什么影响了父元素CSS3小技巧-在div中iframe出现滚动条问题
    • Waline
    目录