CSS height 及 flex布局一则

已于 2022-08-09 16:56:21 修改
阅读量3.4k 收藏
点赞数
分类专栏： CSS 文章标签： css 前端 css3
于 2022-08-04 17:47:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37107268/article/details/126163322
版权

CSS

目录

一、目标效果及当前效果

当前效果（如下图1）：
图1
目标效果（如下图2）：
图2
即容器高度随高度最大的子元素高度而变化； 子元素高度由内容撑开； 同级的子元素与最大高度子元素高度保持一致。

二、代码实现

最终实现代码如下：

父元素设置：  display: flex;
每个子元素设置：  height: auto;

在此过程中的问题在于子元素设置 height: 100%;的时候依然与图1效果相同，于是打开MDN查看下height属性，

auto 由浏览器为元素计算并选择一个高度。,<percentage> 将高

最低0.47元/天 解锁文章
S_BOOKSDN
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
flexbox布局-根据图片确定元素高度（类似瀑布流布局）
WINNIE小菜芽
06-14 740
首先确定一下需求：多个元素，每个元素里有图片和一些文字等。每一行的图片区域高度根据最高图片决定，不够高的图片垂直居中 可以看下图中第一行图片较高，第二行图片较矮 以上可通过多嵌套两层display：flex实现 先上代码结构 <ul class="parent"> <li> <div class="img"> <img src="./image/cat1.jpg" alt=""> </div>
stl——vector
todaycode
10-24 824
引用数组 C++中vector的实现在<vector>头文件中，在代码开头引用这个头文件。 #include <vector> 构造⼀个动态数组 C++ 中直接构造⼀个 vector 的语句为： vector<type> vec; //type可以是int char string ... 初始化 方式1：定义具有6个整数元素的向量，每个元素初值任意. vector<int> a(6); 方式2：定义具有6个整数元素的向量，每个元素初值为1
float布局设置同一行行高一样_前端基础面试：常见的布局方式有哪些？解释不同解决方案的优缺点...
weixin_36480303的博客
11-30 235
居中布局水平居中子元素于父元素水平居中，子元素与父元素宽度均可变。inline-block + text-align优点兼容性佳(甚至可以兼容 IE 6 和 IE 7)table + margindisplay: table 在表现上类似 block 元素，但是宽度为内容宽。优点无需设置父元素样式 (支持 IE 8 及其以上版本)absolute + transform优点绝对定位脱离文档流，不会...
自适应高度（height: auto和flex: 1）过渡动画方案
betterAndBetter_的博客
04-08 275
【代码】自适应高度（height: auto和flex: 1）过渡动画方案。
flex+js实现内部盒子高度跟随其中最大的高度
HYeeee的博客
01-10 1478
每个框框的高度都跟随内部最高的那个框框
CSS 弹性布局（flex）的height计算
我有一个魔盒的博客
11-08 2814
弹性布局父元素的height=所有子元素的元素高度，而子元素又能继承父元素高度（height:100%）。
display: flex； flex-wrap: wrap； 设置高度 子集会跟着高度变高
qq_27806371的博客
07-07 516
display: flex; flex-wrap: wrap; 设置高度 子集会跟着高度变高
css：flex布局中子元素高度height没有达到100%
彭世瑜的博客
12-06 927
css中使用flex布局中子元素高度height没有达到100%希望实现两个盒子左右分布，内容垂直居中对齐。可以看到，左边的盒子高度并没有撑满。去除，单独设置子元素的对齐样式。
详解CSS中的flex容器与flex属性
09-24
在CSS布局中，Flexbox（ Flexible Box，弹性盒布局）是一种强大的工具，它极大地简化了网页元素的对齐和布局。本文将详细讲解CSS中的flex容器与flex属性，这些都是CSS入门学习的基础。 **1. Flex容器** Flex容器是...
CSS两列布局实现方式总结
09-24
在网页设计中，CSS两列布局是常见的网页结构，它通常包括一个固定宽度的侧边栏（sidebar）和一个自适应宽度的主内容区域（main）。这篇文章主要总结了两种常用的CSS布局方法：absolute + margin和float + margin，来...
CSS3 Flexbox中flex-shrink属性的用法示例介绍
09-25
在CSS3的Flexbox布局模型中，`flex-shrink`属性是一个非常重要的概念，它用于控制flex items（弹性元素）在空间不足时的收缩行为。当flex container（弹性容器）的总宽度不足以容纳所有flex items时，`flex-shrink`...
HTML+CSS实现单列布局水平居中布局
09-27
在网页设计中，布局是至关重要的，而单列布局水平居中则是常见且实用的一种布局方式。本文将详细探讨如何使用HTML和CSS实现这一布局，以及它的优缺点和实际应用。 1. **父元素text-align:center; 子元素：inline-...
DIV+CSS图标文字列表布局样式代码
06-11
在这个名为"DIV+CSS图标文字列表布局样式代码"的资源中，我们可以看到一个适用于网页图文列表的布局方案。 首先，`index.html`是网页的主文件，它包含了页面的基本结构和内容。在这个例子中，`index.html`很可能...
1、CSS height 属性，2、Flex 布局教程：实例篇，3、CSS 链接，4、CSS display 属性，5、表格，
qq_15007601的博客
09-05 141
  2、Flex 布局教程：实例篇 http://www.ruanyifeng.com/blog/2015/07/flex-examples.html CSS 语法 justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit; 属性值 值 描述 测试 f...
display: flex 在同一行的表示
weixin_40945354的博客
05-18 545
.item { border-bottom: 1px solid #EAEAEA; height: 108.69565217391305rpx; display: flex; align-items: center; }
弹性布局，让所有子元素高度一致
weixin_47517731的博客
04-25 1239
给子元素高度设置为给父元素弹性设为。
html 同一行 左右对齐,html – Flexbox – 在同一行左右对齐
weixin_28894087的博客
06-09 383
情况：我有一个简单的导航栏,我正在FlexBox中建立.我想把一个项目放在左边,让别人把它挂在右边.例：ListItem1ListItem2ListItem3ListItem4问题通常答案只涉及浮动项目左右,但据称在FlexBox中使用浮动是不好的.我正在考虑使用合理内容,并使用flex-start和flex-end,但是这并没有太好的工作.我尝试应用flex-start到第一个项目,然后flex...
css flex布局，自适应高度
yezi_12345的博客
11-09 1558
css flex布局，自适应高度
flex布局
MelodyFreedom的博客
05-16 268
flex布局就是弹性布局 flex布局父项常见属性，以下六个 1，flex-direction:设置主轴方向（row,row-reverse,column,column-reverse） 2.justify-content:设置主轴上的子元素排列方式(flex-start,flex-end,center,space-around,space-between),先确定主轴方向，然后再设置个属性。 3.flex-wrap：设置了元素是否换行（默认不换行，如果装不开，就会缩小子元素的大小）（wrap，no
flex布局下高度自适应
最新发布
06-27
在Flex布局中，实现元素的高度自适应通常利用CSS的`flex`属性，特别是`flex-grow`, `flex-shrink`, 和 `flex-basis`。以下是关键点： 1. `flex-direction`: 决定主轴的方向，如果设置为`column`，则高度会自适应。 2. `flex-grow`: 定义了项目在剩余空间中的扩展比例，默认为0。如果所有项目都设置了`flex-grow: 1`，它们将等比地分配剩余空间。 3. `flex-shrink`: 定义了项目在空间不足时的压缩比例，默认为1。这有助于避免某些元素因为其他元素高度增加而被挤出视口。 4. `flex-basis`: 基础大小，定义了元素在未拉伸或压缩之前的初始大小，可以是固定的像素值、百分比或auto（默认）。 5. `min-height` 和 `max-height`: 可以用来设置最小和最大高度限制，这样即使使用flex，元素也不会超出范围。 示例代码： ```css .container { display: flex; flex-direction: column; /* 或者 row, 根据需求选择 */ flex-wrap: wrap; /* 如果有多行 */ } .item { flex: 1; /* 默认不设置基础大小，按比例扩展 */ min-height: 0; /* 允许高度自适应 */ max-height: 100vh; /* 设置一个可视区域的限制 */ } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值