flex 结合 width: fit-content 使用

于 2024-07-25 17:58:25 发布
阅读量155 收藏
点赞数 5
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59972038/article/details/140696296
版权

目标效果：A区内容根据内容大小适配，B区占据剩下页面宽度大小。

css代码：

首先A和B需要一个div包裹着，并设置display为flex；

.A {

        width:fit-content;

        ...剩余样式

}        

.B {

        flex:1;

        ...剩余样式

}

这样不用固定A区的内容，而是根据内容大小来，把剩余的宽大大小都留给B区啦~

℡608
关注
  • 5
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【前端】CSS宽度适应内容；width: fit-content；
JackCao_Grass的博客
03-14 340
* 宽度适应内容 */
CSS3的 fit-content实现水平居中
09-24
`fit-content`是CSS3中为`width`、`min-width`以及`max-width`等宽度相关的属性新增的一个值。它的主要功能是根据内容的大小来定义元素的宽度，而不是固定一个预设的宽度。这种特性使得元素能够自适应其内部内容，...
width:fit-content
song854601134的博客
03-23 2034
width： fit-content 给一个固定宽度的div里面输入一厂串连续的英文字母，如果输入的足够多，文字会溢出来，就像这样： 给外层标签添加 width:fit-content取代直接设置宽度。 width:fit-content 可以实现 文字较少时居中显示，文字多时，末尾的一行左对齐显示 <div class="c"> <div class="fit"> 国家路过看看两个拉过来g案件共计拉工具栏绿咖喱鸡格拉阿纲解决了阿钢筋 &
css3的fit-content属性，fit-content
imkaifan的博客
12-13 497
css3的fit-content属性，fit-content
自适应的世界：带你了解CSS3中的四大元素尺寸属性值：fit-content / fill-available / max-content / min-content.
DearXie的博客
12-09 1903
CSS3中用于自适应的四大属性值 在学习这四种用于自适应的属性值前，我们得先对 元素尺寸 这个概念有个清晰的了解： 一、元素尺寸 从元素的嵌套角度看，元素尺寸可分为两种： - 1.外部元素尺寸：由元素的父元素决定的尺寸值 - 2.内部元素尺寸：由元素的内部子元素决定的尺寸值 今天我将要介绍的四种属性值中fill-available则属于外部尺寸，而其他三个属性值都属于内部尺寸，至于为什么各自归属...
css中关于fit-content尺寸的属性
读心悦
09-05 7887
css体系中的尺寸，明显的表现就是元素的width和height了，另外就是因为display:inline-block、float:left和position:absolute的设置，导致元素尺寸收缩，比如position:absolute的设置。
CSS3四个自适应关键字——fill-available、max-content、min-content、fit-content
literarygirl的博客
06-30 731
前面的话 一般地，有两种自适应：撑满空闲空间与收缩到内容尺寸。CSS3将这两种情况分别定义为’fill-availabel’和’fit-content’。除此之外 ，还新增了更细粒度的’min-content’和’max-content’。这四个关键字可用于设置宽高属性。本文将详细介绍CSS3中的这四个自适应关键字 [注意]IE浏览器不支持，webkit内核浏览器需添加-webkit-前缀 　　 fill-available 　　 width:fill-available表示撑满可用空间 举例来说，页面中一
当div没有设置宽度，使用width的fit-content和margin:auto实现元素的水平居中
u011927449的博客
07-17 734
当我们做水平居中的时候，会有许多方法，margin:0 auto,或者test-align:center,以及flex布局。当元素的width不固定的时候，我们如何实现水平居中呢，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ul{ margi
display: inline-block 和 flex冲突解决办法
qq_33256701的博客
12-20 5066
在做H5的横向滑动时需要设置子元素为行内元素，同时又需要用flex 来做垂直居中显示，发现display有个inline-flex属性 .x-scroll { overflow: scroll; white-space: nowrap; .item { display: inline-flex;//将inline-block改为这个 } &::-webkit-scrollbar { display: none; } } ...
flex布局部分属性补充
Jsy_997的博客
04-13 590
flex布局的flex-grow、flex-shrink、flex-basis、align-content以及order属性。
flex布局代码及语法讲解
12-20
Flex布局，全称为“Flexible Box”，也被称为弹性盒布局，是CSS3中一种强大的布局模型，旨在提供一种更加灵活、可扩展的盒模型布局方式，适用于各种屏幕尺寸和设备类型，包括桌面、平板电脑和移动设备。在网页设计中...
responsive-design-patterns:响应式设计模式
06-30
我们可以通过设置`max-width: 100%`来确保图像不会超过其容器的宽度，或者使用`object-fit`属性来控制图像在容器内的填充方式。 ```css img { max-width: 100%; height: auto; } .figure { width: 100%; ...
photo-portfolio:响应式网页设计
03-22
2. **图片响应性**：使用`<img>`标签的`srcset`和`sizes`属性，或者CSS的`object-fit`属性，可以使图片在不同设备上自动调整大小，保持视觉效果的完整性。 3. **导航栏**：响应式导航通常会根据屏幕大小进行折叠或...
CSS-Tips---Tricks:CSS提示与技巧
03-16
例如，`@media screen and (max-width: 600px) {...}` 可以针对小屏幕设备设置样式。 4. **Flexbox**：Flexbox（弹性盒布局）提供了一种更为灵活的布局方式，可以轻松实现对齐、顺序调整和自适应大小的子元素。`...
基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）
柯晓楠
07-24 2654
大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示，团队可以快速理解复杂的数据模式，发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的大数据可视化平台模板。
黑马JavaWeb企业级开发（知识清单）01——前端介绍，HTML实现标题：排版
apple_68589597的博客
07-21 1030
本篇文章是2023年最新黑马JavaWeb企业级开发（知识清单）01：前端介绍、html实现标题格式内容的总结，帮助需要学习Web开发的朋友温故而知新。
[HTML]一文掌握
CSDN20221005的博客
07-21 850
场景：在网页的底部导航中通常会用到。语法：dl>dt>dd特点：dd前会默认显示缩进效果注意：dl中只允许包含dt/dd标签dt/dd中可以包含任意内容。
基于 HTML+ECharts 实现的数据可视化大屏案例（含源码）
最新发布
柯晓楠
07-24 432
数据可视化已成为企业决策和业务分析的重要工具。通过直观、动态的图表展示，数据可视化大屏能够帮助用户快速理解复杂的数据关系，发现潜在的业务趋势。本文将介绍如何利用 HTML 和 ECharts 实现一个功能丰富的数据可视化大屏案例。
img { width: 300px; height: 300px; object-fit: cover; display: flex; justify-content: center; align-items: center;}无效，不能让img居中
06-09
如果`img`元素无法居中，您可以尝试使用以下代码将其居中： ```css .container { display: flex; justify-content: center; align-items: center; height: 100vh; } .container img { max-width: 100%; max-height: 100%; object-fit: contain; } ``` 这里我们使用了一个包含`img`元素的容器，将其设置为`display: flex; justify-content: center; align-items: center;`，并将其高度设置为`100vh`，以使其居中于视口。然后，我们将`img`元素的`max-width`和`max-height`属性设置为`100%`，以确保它在保持纵横比的同时填充其容器。最后，我们将`object-fit`属性设置为`contain`，以便图像适应容器。 您可以根据需要调整容器和图像的大小和样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值