程序员经验分享-hwhale

如何使用flexbox调整div的宽度以适应内容

2023-12-21

我想适应.flexrowdiv 的宽度到内容，但我无法使用 flex 设置它。

HTML

<div class="fullwidth">
  <div class="sidebar">
    <p>sidebar</p>
    <p>sidebar</p>
    <p>sidebar</p>
    <p>sidebar</p>
    <p>sidebar</p>
    <p>sidebar</p>
  </div>
  <div class="center">
    <div class="flexrow">
      <div class="card">
        <p>card</p>
      </div>
    </div>
  </div>
</div>

CSS

.center {
  display: flex;
  justify-content: center;
}

.flexrow {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flexrow .card {
  width: 300px;
  height: 60px;
  background-color: red;
  margin: 10px;
  padding: 10px;
  text-align: center;
}

我创建了一个片段here https://codepen.io/sarovin/pen/KvwypV

This is an example of what i want: example

有什么建议吗？


这里的主要问题是，当一个项目换行时，无论是否使用 Flexbox，其容器都不会将其宽度调整为新的内容宽度。

使用现有的标记，可以通过两个步骤进行简单修复来实现此目的：

  1. Add justify-content: center;给你的.flexrow rule

  2. 对于每一个可能的列，您都需要少一个ghostelement 将最后一行的元素一直推到左边。添加的元素与新元素一起.flexrow .card:empty规则会发挥魔法。

    .flexrow .card:empty {
  height: 0;
  margin: 0 10px;
  padding: 0 10px;
}

更新了代码笔 https://codepen.io/anon/pen/jLEgWL

堆栈片段

.fullwidth {
  background-color: grey;
  display: flex;
}

.sidebar {
  flex: 0 0 280px;
  margin: 10px;
  padding: 10px;
  background-color: black;
  color: white;
}

.flexrow {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}

.flexrow .card {
  width: 300px;
  height: 60px;
  background-color: red;
  margin: 10px;
  padding: 10px;
  text-align: center;
}

.flexrow .card:empty {
  height: 0;
  margin: 0 10px;
  padding: 0 10px;
}
<div class="fullwidth">
  <div class="sidebar">
    <p>sidebar</p>
    <p>sidebar</p>
    <p>sidebar</p>
    <p>sidebar</p>
    <p>sidebar</p>
    <p>sidebar</p>
  </div>
  <div class="center">
    <div class="flexrow">
      <div class="card">
        <p>card</p>
      </div>
      <div class="card">
        <p>card</p>
      </div>
      <div class="card">
        <p>card</p>
      </div>
      <div class="card">
        <p>card</p>
      </div>
      <div class="card">
        <p>card</p>
      </div>
      <div class="card">
        <p>card</p>
      </div>
      <div class="card">
        <p>card</p>
      </div>

      <!-- Ghost elements, if max columns is 4 one need 3 -->
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>

    </div>
  </div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

flexbox

如何使用flexbox调整div的宽度以适应内容 的相关文章

  • 使用 JavaScript 在 HTML 表中动态添加行并通过提交按钮获取每个文本框的文本框值

    我有一个可以动态添加行的表 当我提交保存按钮时 我想将每行中的数据获取到 php 数组 请有人帮我解决这个问题 我是java脚本的新手 对此知之甚少 谢谢你

  • 为什么 toDataURL 在移动设备上无法获取画布内容？

    我正在尝试从画布中获取图像 它可以在电脑浏览器上运行 但不能在移动设备上运行 我在 iPhone 上的 Safari 中进行了测试 这是代码 draw click function drawing css visibility visibl

  • 将 2 个 Div 垂直居中另一个 Div

    我有 2 个 div 我想将它们垂直居中在另一个 div 内 目前我有 http jsfiddle net 5vpA3 1 http jsfiddle net 5vpA3 1 现在我明白这里发生了什么 但我希望左侧 div 在该容器内垂直对

  • 如何将div对齐到页面底部，而不是屏幕底部

    我想将 div 与页面底部对齐 而不是与屏幕底部对齐 当我这样做时 contact block position absolute bottom 0 left 0 div 被放置在屏幕的底部区域 当我的页面很长时 我必须向下滚动 并且本应位

  • 单击时更改 CSS 属性

    我试图在单击另一个元素时更改一个元素的 CSS 我进行了很多搜索 但没有任何效果是完美的 目前我正在使用下面的代码 但它不起作用 谁能告诉我我错过了什么 div hello world div img src zoom png functi

  • 在 HTML 表单中使用 PUT 方法

    我可以在 HTML 表单中使用 PUT 方法将数据从表单发送到服务器吗 根据HTML标准 https www w3 org TR html5 sec forms html element attrdef form method 你可以not

  • 根据用户输入的边计算三角形面积和周长

    我正在尝试编写一个程序 根据用户的输入计算三角形的面积和周长 他们应该输入侧面 这就是我所拥有的一切 由于某种原因 我无法很好地理解而无法查找 它不起作用

  • 比例背景图像

    我想放大和缩小页面中的背景图像 我尝试过多种方法 但似乎没有一种方法能按照我想要的方式工作 我的页面的网址是http quaaoutlodge com drupal 7 14 http quaaoutlodge com drupal 7 1

  • CSS 安全区域属性在 iPhone X 上不起作用

    就我而言 我正在 iPhone X 上运行一个 Web 应用程序 我尝试在顶部添加一个填充 以使用 Webkit 的安全区域 css 属性将我的身体推到安全区域padding top constant safe area inset top

  • 禁用单一样式的 CSS 转换？

    为单个样式启用 CSS 过渡非常容易 但是是否可以为单个样式禁用它们 单一样式过渡的常用方法是 div transition opacity 0 5s 但我想做的是设置一个全局转换 然后为单个属性禁用它 也许是这样的 div transit

  • 更改链接悬停时的正文背景颜色

    当鼠标悬停在页面上时如何更改页面背景a 我正在寻找仅 css 的解决方案 我知道你可以通过 css 到达子元素 但我不知道如何 是否可以到达主体 看看这个DEMO http jsfiddle net bhavuksuthar bjsvhze

  • Windows Phone 8 中的 Webview 弹跳

    我需要知道是否有任何方法可以控制 Windows 8 中的 webview 弹跳属性 我已经尝试过 ms touch action none 它确实会停止弹跳 但会禁用应用程序中的整个滚动 我已尝试以下方法 但这些方法不起作用 backfa

  • 如何在光标下的所有元素上调用 mouseover？

    我有一个网络应用程序 每次单击时都会创建一个点 见下文 当我将鼠标悬停在一堆点上时 我希望光标下的每个点都会触发 mouseover 或 mouseenter 事件 然而 只有一个事件被触发 即堆栈 顶部 的点的事件 当鼠标移动到一堆多个点

  • 我的 iPhone 6 获取 iPhone 5 媒体查询

    我不明白这里发生了什么事 我在 CSS 媒体查询中专门针对 iphone 5 media only screen and min device width 320px and max device width 568px some div

  • 在 HTML 中移动选取框/下移文本

    我正在尝试向下移动或移动 HTML 中的文本 但我似乎无法将其移动到任何地方 我添加了一个颜色命令来更改文本的颜色 但似乎只是移动了 它一直到顶部

  • CSS：将加载指示器放置在屏幕中央

    如何将加载指示器放置在屏幕中央 目前我正在使用一个小占位符 它似乎工作得很好 但是 当我向下滚动时 加载指示器保持在该预定义位置 我怎样才能让它跟随滚动 使其始终位于顶部 busy position absolute left 50 top

  • 只需编辑 .css 即可更改

    有 4 div class myField 每一个都在另一个之下 http jsfiddle net urielz 6Mdmd http jsfiddle net urielz 6Mdmd 我想将其视图更改为两对情侣面对面 就像结果一样 h

  • 点击问题：动态生成的链接不触发点击功能

    下面是两个代码片段 由于某种原因什么也没有发生 但来自同一个 JS 文件的其他 jQuery 函数在带有 UL 的页面上执行得很好 这是在盯着我看吗 ul class paganation li 1 li li a href 2 a li

  • Web SQL 数据库 + Javascript 循环

    我正在尝试解决这个问题 但我自己似乎无法解决 我正在使用 Web SQL DB 但无法让循环正常使用它 I use for var i 0 i lt numberofArticles 1 i db transaction function

  • 如何在粘贴时获取文本区域输入字段的新值？

    我发现当我尝试从文本区域字段读取值时onpaste调用函数时 我得到字段的旧值 粘贴操作之前的值 而不是新值 粘贴操作之后的值 以下是此行为的演示 http jsfiddle net qsDnr http jsfiddle net qsDn

随机推荐

  • Zabbix JMX Tomcat监控

    我一直在尝试设置 Zabbix 来监控 2 台不同的 Amazon EC2 机器上的 2 台 tomcat 服务器 但没有成功 主机上的 Z 为绿色 但 JMX 为红色并出现这些错误 ZBX TCP READ 失败 4 系统调用中断 其他错

  • 在调整应用程序窗口大小之前，jPanel 不会刷新

    我的 jPanel 有一个问题 我有一个按钮 它从字符串输入 数学公式 中输入 PNG 图像 然后它将在 jPanel 中重新绘制旧图像 问题就来了 图像已更改 但 jPanel 不会重新绘制 直到我手动调整应用程序窗口的大小 看起来面板在

  • 一旦会话过期，Spring MVC 将用户重定向到登录页面

    我在会话中存储了一个用户 bean SessionAttributes UserBean 在我的控制器中 我的目标是在会话过期时将用户重定向到登录 错误页面 以下是我的代码片段 RequestMapping value searchOppo

  • 从 .CSV 文件中选择特定范围的列[重复]

    这个问题在这里已经有答案了 我有一个包含 78000 列的 CSV 文件 我正在尝试选择第 2 100 102 200 列和最后 300 列 其余列需要跳过 我使用 numpy loadtxt 来选择列范围 numpy loadtxt in

  • SignalR 和 .NET 客户端在 ASP.NET WebForms 页面上不起作用

    我尝试在 NET 4 下的 WebForms 应用程序中为仪表板构建通知 我已经下载了 SignalR 版本 1 2 net 客户端和服务器 并准备了一个简单的通知示例 不幸的是它不起作用 我不明白为什么 如果我输入http myserve

  • 如何使用 telnet 测试我的 LDAP 服务器 URL

    我的本地和远程都有一个 LDAP 服务器 我可以 telnet 到本地 ldap url 但无法 telnet 到远程 telnet www ilovebears com 389我得到一个空屏幕 光标闪烁 这是因为某些套接字配置还是端口不可

  • Android getIntent().getExtras() 返回 null

    我正在尝试在两个活动之间传递一个字符串 我已经在其他项目中使用相同的方法完成了此操作 但由于某种原因 当我调用intent getStringExtra String 时 我收到了NullPointerException 我还尝试通过以下方

  • 使用正则表达式验证十六进制字符串

    我正在使用正则表达式验证字符串是否为十六进制 我使用的表达是 A Fa f0 9 当我使用这个时 字符串AABB10被识别为有效的十六进制 但字符串10AABB被认定为无效 我该如何解决这个问题 您很可能需要一个 so regex a fA

  • ChartJs自定义工具提示位置

    那里 我使用 ChartJS 并自定义工具提示 但第一个和最后一个工具提示的位置有问题 看 I suppose that in order to fix the problem I need to use the https www cha

  • 有没有办法在 C++ 中延迟初始化成员变量（类）？

    我有 Java 背景 我有以下程序 include

  • 在 Java 中强制释放大缓存对象

    我使用一个大型 数百万 条目哈希图来缓存算法所需的值 键是两个对象的组合作为一个长 由于它不断增长 因为映射中的键发生变化 因此不再需要旧的键 因此能够强制擦除其中包含的所有数据并在执行期间重新开始会很好 有没有一种方法可以有效地做到这一点

  • 是否有元组的 zipWith 类似物？

    初步说明 这是SeanD 删除的问题 https stackoverflow com q 50020370 2751851 就像有一样zipWith对于列表 GHCi gt zipWith 1 2 3 4 4 6 感觉应该有一些类似于元组的

  • 如何在 lambda 中进行 sql 连接？

    有时 我会偶然发现这个问题 我使用了 lambda 连接的子集 鉴于我可以使用任何 LINQ 扩展 我应该如何实现以下连接 为了简单起见 表定义为 CREATE TABLE dbo TableA Key INT IDENTITY 1 1 N

  • 可可中的客户端到客户端消息传递？

    嗯 现在我尝试在两个客户端之间而不是客户端到服务器之间进行消息传递 因此 如果我没记错的话 我们无法单独启动服务 但如何查看是单独设置还是两者都连接到同一服务 我的启动服务的代码 void startService Start listen

  • 解析错误：语法错误，意外的 T_STRING 59 [关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 请修复这段

  • 使用 pywin32 获取 GUIThreadInfo()

    我正在尝试遵循这个答案 https stackoverflow com a 11901591 5510469我已经到了 a 应该打电话的地步 GetGUIThreadInfo 但我找不到pywin32 文档 http timgolden m

  • 读取解决方案 sln 的所有 csproj 项目的引用列表（以编程方式）

    我有解决方案 sln 其中有许多 csproj 项目 有人知道如何以编程方式读取 VS2008 的 sln 文件中所有 csproj 项目的引用列表吗 csproj 文件只是 XML 文件 为此 您可以使用 NET 框架中的 XDocume

  • setTimeout() 的 JavaScript 执行顺序

    假设我有以下代码 function testA setTimeout testB 1000 doLong function testB doSomething function doLong takes a few seconds to d

  • CMP 证书请求

    我使用下面的代码将 CMP 证书请求发送到端点 public static void main String args try System out println In final BigInteger certReqId BigInte

  • 如何使用flexbox调整div的宽度以适应内容

    我想适应 flexrowdiv 的宽度到内容 但我无法使用 flex 设置它 HTML div class fullwidth div class sidebar p sidebar p p sidebar p p sidebar p p

热门标签