首页 > web前端 > css教程 > 为什么在 Flex 项目上设置固定高度不会影响其大小?

为什么在 Flex 项目上设置固定高度不会影响其大小?

Barbara Streisand
发布: 2024-11-23 01:05:28
原创
691 人浏览过

Why Doesn't Setting a Fixed Height on a Flex Item Affect Its Size?

对于这个例子来说,处理这一行就足够了:

.flex-item {
    ... ;
    height: auto;
}
登录后复制

修改它的值:

.flex-item {
    ... ;
    height: 50px;
}
登录后复制

这个修改将根本不改变任何东西。高度仍会自动计算。

要使所有方形单元格读取如下:

这是使用 Flexbox 使所有单元格成为方形的一种可能方法。

  1. 要限制纵横比,无论是手动还是绝对值,请按照您已经做的那样设置百分比。
  2. 然后重置这些单元格上的 Flexbox 相关高度/宽度为自动。这些确保项目在更改时不会调整大小以适应容器大小。
.flex-item {
  ... ;
  height: auto;
  width: auto;
  min-width: 50px; /* minimum width of 50px; adapt to your needs */ 
}
登录后复制

以上是为什么在 Flex 项目上设置固定高度不会影响其大小?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板