应用display:flex时图像变小

是由于flex布局的特性所导致的。在flex布局中，元素会根据容器的大小和flex属性的设置自动调整大小和位置。

当将display属性设置为flex时，容器会根据其子元素的大小和flex属性的设置来自动分配空间。默认情况下，子元素会按照其原始大小进行布局。如果子元素的大小超过了容器的大小，那么子元素会自动缩小以适应容器。

这种自动缩小的行为可以通过设置flex属性来控制。flex属性是一个数字，表示了元素在flex容器中的分配比例。默认情况下，所有子元素的flex属性值都为0，即它们不会被分配额外的空间。如果某个子元素的flex属性值大于0，那么它会按照比例分配剩余空间，从而导致其他子元素的缩小。

因此，当应用display:flex时，如果子元素的大小超过了容器的大小，那么它们会根据其flex属性的设置进行自动缩小。这种自动缩小的行为可以帮助实现响应式布局和适应不同屏幕尺寸的需求。

关于flex布局的更多信息和用法，可以参考腾讯云相关产品的介绍链接地址：腾讯云Flex布局介绍

相关·内容

flexbox指南（不支持display: flex时）

flex-direction row Displays items horizontally .item { display: inline-block; } row-reverse Displays...: Vincent Valentin flex-wrap nowrap Squishes items to stop wrapping .container { display: table; }...: table; } .item { display: table-cell; text-align: center; } align-items flex-start Vertically...aligns items to start of container .item { display: inline-block; } flex-end Vertically aligns items...; vertical-align: middle; } .item { display: inline-block; } flex items flex-grow Grows an item

5921 0

小智在这3年开发中遇到的 CSS 问题及解决方案，有大佬帮他总结好了！

对包含多个子元素使用 display: flex，如果元素过多，所有子元素会被压缩，如下所示： <...当 Flex 项目的数量是动态的时，不要使用justify-content: space-between 当将justify-content: space-between应用于flex容器时，它将分配元素并在元素之间留出相等的空间...当视口不够高时将元素固定在屏幕顶部如果将元素固定在屏幕顶部，如果视口不够高会发生什么情况?很简单:它会占用屏幕空间，因此，用户浏览网站时可用的垂直区域就会变小，这会影响用户的体验。...事例源码：https://codepen.io/shadeed/pen/oQLYmg 9.设置图像的最大宽度当添加图像时，定义max-width: 100%，这样当屏幕很小时图像就会改变大小。...字体与交互式HTML元素不兼容当为整个文档设置字体时，它们不会应用于input、button、select和textarea等元素。它们在默认情况下不会继承，因为浏览器将默认系统字体应用于它们。

3.7K1 0

一文吃透 CSS Flex 布局

任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 行内元素也可以使用 Flex 布局。....box{ display: inline-flex; } Webkit 内核的浏览器，必须加上-webkit前缀。....box{ display: -webkit-flex; /* Safari */ display: flex; } 注意，设为 Flex 布局以后，子元素的float、clear和vertical-align...即元素尺寸可以弹性增大，也可以弹性变小，具有十足的弹性，但在尺寸不足时会优先最大化内容尺寸。...，即元素尺寸可以弹性增大，也可以弹性变小，具有十足的弹性，但是在尺寸不足时会优先最小化内容尺寸。

6051 0

17个场景，带你入门CSS布局

给元素设置样式：display: inline，会将该元素变为行内元素。因此，当发现给元素设置宽高无效时，检查这元素是否是行内元素。...将元素设置为 Flex 容器，只需设置样式display: flex;或display: inline-flex;。...值大于0时，就会撑满父元素宽度的剩余部分。...，元素宽度变小可以用 Flex 布局中的 flex-shirk 实现。...*/ @media (max-width: 600px) { /* 设备宽度小于600px时，才左右下面的样式 */ .facet_sidebar { display: none;

2.6K2 0

简单的聊一聊如何用CSS制作一个专业的头部页眉（Headers）

4091 0

【demo50】导航栏最小化

-- 问题抽象：弹性盒子在盒子宽度变小时自动把汉字和多个英文单词换行 --> 首页...family=Muli&display=swap'); * { box-sizing: border-box; } body { background-color: #eafbff;...缩小后的导航栏样式 */ nav { background-color: #fff; padding: 20px; width: 80px; display: flex...0.6s linear, opacity 0.6s linear; } /* 正常情况下导航栏每一项的样式 */ nav.active ul li { opacity: 1; /* 展开时

4081 0

【CSS】1287- 一行 CSS 实现 10 种强大的布局

在这种情况下，您的是 150px，所以应该是这样： .parent { display: flex; } .child { flex: 0 1 150px; }...如果您确实希望框在换到下一行时拉伸并填充空间，请将设置为 1 ，所以应该是这样： .parent { display: flex; } .child { flex:...1 1 150px; } 现在，当您增加或减少屏幕尺寸时，这些 flex 项目会缩小和增长。...然后，应用 justify-content: space-between 将第一个（标题）和最后一个（图像块）元素锚定到 flexbox 的边缘，并且它们之间的描述性文本以相等的间距放置到每个端点。...您可以看到，当我拉伸和收缩父尺寸时，这张卡片的宽度会增加到其最大限制点并减小到其限制最小点。然后它保持在父级的中心，因为我们已经应用了其他的属性来将它居中。

4.6K2 0

【Vue3+Vite+TS】7.0 组件：通知菜单

{ display: flex; } div { margin-right: 0.1rem; } } 修改src\router...{ display: flex; } div { margin-right: 0.1rem; } } 菜单组件封装新建.../data' .bs-wrapper { .flex { display: flex; }...: pointer; //鼠标悬浮变小手 flex: 1; display: flex; align-items: center;...: pointer; //鼠标悬浮变小手 flex: 1; display: flex; align-items: center;

5064 0

防御式CSS是什么？这几点属性重点防御！

在一个包装器上添加 display: flex，让子项挨着排序。问题是，当空间不足时，那些子项默认不会被包裹成一个新的行。我们需要用 flex-wrap: wrap 来改变这一行为。....options-list { display: flex; flex-wrap: wrap; } 使用flexbox时，一般的经验法则是允许包裹，除非你想要一个滚动的包裹。....wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; } 当项目的数量少于4个时，...图片上的文字当在图片上放置文本时，必须考虑到图像无法加载的情况。文本会是什么样子。下面是一个例子：文本看起来是可读的，但当图像加载失败时，它的可读性变得很差。...考虑以下例子： .card { display: flex; } 当标题有一个很长的词时，它不会被包成一个新行。

4.4K3 0

22 个鲜为人知的 CSS 高招让你技高一筹

此属性可以一次应用于一个或多个（子）单元格。....parent { display: flex; } .child { margin: auto; } 其实，使用以下代码段可以完成相同的效果： .parent { display: flex...属性设置 flex 项之间的间隙（我们真的需要这个）： .parent { display: flex; flex-wrap: wrap; gap: 1em; } 4、inline-flex...family=Montserrat&display=swap"); body { margin: 0; height: 100vh; display: flex; flex-direction...10、drop-shadow 设置为 drop-shadow() 的 filter 属性与 box-shadow 属性不同，它在应用效果方面类似，允许你向图像本身（以 PNG 格式）添加阴影，而不是添加到其中的框

1K3 0

盘点三个JavaScript案例——实现限时秒杀、定时跳转、改变盒子大小

: flex; flex-direction: row; align-items: center; justify-content...：flex，用于盒子模型提供很大的一个灵活性。...document.getElementById('day').innerHTML = d + '天'; document.getElementById('hour').innerHTML = h + '时'...this.style.height = '250px'; this.innerHTML = '大盒子'; } else { // 点击次数是偶数，盒子变小...}; 在上面代码中，首先是使用document.getElementById()方法获取id为box，定义一个num用来存储点击的次数，为box添加点击事件并处理，如果num的值为偶数，盒子变小

4.5K2 0

CSS中鼠标滑过图片放大效果

当一张牌悬停时，其他牌不应改变大小并向外移动，以免彼此重叠。所有的牌应该保持垂直居中。听起来不错吧？现在让我们开始带大家一步步写代码。 HTML和flexible元素让我们先设置一行预览的图像。...其中包括：包含多个.item元素的.container父元素容器每个.item元素都包含一个包装在锚标记中的图像将.container转换为一个flex容器，该容器将行中的项对齐设置.item类的...{ position: relative; display: block; flex: 1 1 0px; } .item img { display: block; max-width...CSS代码如下： .container { display: flex; margin-top: 50px; } .item { position: relative; display...代码如下： .container { display: flex; margin-top: 50px; } .item { position: relative; display: block

8.3K1 0

【动画消消乐｜CSS】调皮逃跑的小方块 077

【动画消消乐】平时学习生活比较枯燥，无意之间对一些网页、应用程序的过渡/加载动画产生了浓厚的兴趣，想知道具体是如何实现的？...{ width: 650px; height: 300px; padding: 10px; position: relative; display: flex; align-items:...布局元素上下左右居中列排列（使得cube在上 shadow在下） .box { position: relative; display: flex; align-items: center;...步骤6 为shadow添加动画这个就相对比较简单了只需要阴影在x轴方向随着时间变大变小即可 .shadow { animation: shadow .5s linear infinite; } @...步骤7 cube和shadow动画同时生效时 ?

4463 0

深入了解 Flex 属性

这是不正确的，flex-grow的作用是分配可用空间。正如在公式中看到的，每 flex 项目的宽度是基于其初始宽度计算的(应用flex-grow之前的宽度)。...如果这里不这样设置，在某些旧版浏览器，图像看起来像被压缩的一样。...我们可以做的一件有趣的事情是在悬停时为flex项目设置动画。...当内容大于其包装器时 ? 不久前，我收到一个读者的问题，他的问题如下。如图所示，两个图像应保留在其包装的边界内。....wrapper { display: flex; } .wrapper img { flex: 1; } 这里，即使使用了 flex: 1，图像仍然会溢出。

1.6K3 0

前端硬核面试专题之 CSS 55 问

不依赖分辨率支持事件处理器最适合带有大型渲染区域的应用程序（比如谷歌地图）复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）不适合游戏应用 ---- px 和 em 的区别？...有损压缩会使图像数据质量下降，并且在编辑和重新保存 JPG 格式图像时，这种下降损失会累积。 JPG 不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。...PNG 用来存储灰度图像时，灰度图像的深度可多到 16 位，存储彩色图像时，彩色图像的深度可多到 48 位，并且还可存储多到 16 位的 α 通道数据。...对于需要高保真的较复杂的图像，PNG 虽然能无损压缩，但图片文件较大，不适合应用在 Web 页面上。...而宽度 100% 是相对于它的父标签来的，如果我们改变了它父标签的宽度，那 main 的宽度也就会变——比如我们把浏览器窗口缩小，那 container 的宽度就会变小，而 main 的宽度也就变小，

2K2 0

【移动端网页布局】flex 弹性布局 ④ ( 设置子元素是否换行 | flex-wrap 样式说明 | 代码示例 )

总宽度超过了 flex 容器的宽度 , 也不进行换行 ; 如果 flex 项目的总长度超出了 flex 容器的宽度 , 出现装不开的情况 , 就会自动缩小 flex 项目的宽度 , flex 项目宽度会变小..., 这就需要设置 flex-wrap 样式 ; 2、flex-wrap 样式取值说明 flex-wrap 样式取值说明 : nowrap , 默认值 , 不进行换行 , 可以不设置 ; wrap ,...flex 容器宽度为 300 像素 , flex 项目宽度为 100 像素 , 但是在此处放置 4 个 flex 项目 , 就会出现将每个 flex 项目宽度压缩 , 强行塞进 4 个元素进去 ;...弹性布局 div { /* 将展示样式设置为 flex 即可启用弹性布局 */ display:...弹性布局 div { /* 将展示样式设置为 flex 即可启用弹性布局 */ display:

1.1K2 0

flexbox布局指南

display of flex or inline-flex....: 0，其效果就是把300px都当做额外空间，并按1:1:1分配 flex-shrink 收缩因子，伸缩行装不下该行内容时依据flex-shrink与基础尺寸（见下文布局算法部分）确定各项将收缩空间的比例...，如果总尺寸没变（各项需调整差值之和为0），结束总尺寸变大了，（上一步中）所有违背min限制的项确定最终目标主尺寸总尺寸变小了，所有违背max限制的项确定最终目标主尺寸剩余可用空间为0，结束伸缩因子是...都是固定值），很容器计算基础尺寸、剩余空间及收缩比例，实际应用场景要复杂得多五.应用场景按比例布局（几行几列）对齐控制（横向、纵向居中等）自适应容器尺寸（铺满或溢出收缩）这些之前难以实现的场景...div> 关键点在于文本flex-shrink缩回来，这样在文本溢出时能够收缩回来，给icon留出足够的空间，未溢出时，收缩不影响文本宽度，右侧icon就能够紧贴着另外，第二行容器的max-width

1K4 0

Clamp()、Max() 和 Min() CSS 函数的用例

最初，它将如下图所示：当容器的宽度变小时，我们希望缩小图像的大小以适应可用空间。我们可以通过使用宽度或高度的百分比值（例如：宽度：20%）来做到这一点，但这并没有给我们太多的控制权。...考虑下图：当前进度值在它上面有一个小句柄，当值为 100% 时，我们需要宽度来尊重它。...CSS： .section { display: flex; flex-direction: column; gap: 1rem; } .section:before { content...CSS: .section { --breakpoint: 400px; display: flex; flex-wrap: wrap; } .section:before { content...有了上面的内容，当卡片占据整个视口宽度时，它的半径为零，或者在更大的屏幕上为 8px。

1.6K2 0

CSS Flex弹性布局详解! (常用的12个属性)

display: flex; 想要使用flex布局，我们必须先给外边的container容器加上一个display:flex;属性, 那么容器里面的元素才遵循flex布局: .container{...display:flex; } 12....1; } 页面: 发现container里面的三个items水平等宽分布，这就是flex布局的基本应用。...如果一个items的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不会缩小。 111.....container { display: flex; ...

11.8K4 1

【前端基础篇】CSS基础速通万字介绍（下篇）

任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局. flex 布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式....Flexbox 特别适合应用于小型布局组件，如按钮组、导航栏等。 Flex 容器和项目要使用 Flexbox 布局，首先要定义一个Flex 容器。...在 Flex 容器中，所有直接子元素都会自动成为 Flex 项目。在一个 Flexbox 布局中，您只需要对容器应用 display: flex;，即可激活 Flexbox 模式。...主要的 Flexbox 属性容器属性以下属性应用于 Flex 容器，用于控制项目如何布局： flex-direction：定义主轴的方向（项目的排列方向）。 row：从左到右排列（默认）。....container { align-items: center; } flex-wrap：控制项目是否换行。 nowrap：所有项目在一行（默认）。 wrap：项目在必要时换行。

621 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云