flexbox 相关问题

CSS3模块提供灵活的布局，提供了广泛的对齐元素选项，同时无需浮动和表格。

flex-grow 0.1 的弹性项目应该占用所有额外空间还是仅占用 10%？

下面的第三个 Flex 项目的 Flex-Grow 为非零值，即 0.1。这可能是合理的，我还读到一个建议，它应该占用 100% 的任何额外空间，因为另一个......

css flexbox

回答 3 投票 0

使用 x 溢出使显示 Flex 增长得和她的父级一样多

我的项目中有一个表有很多列，所以我需要使用 x Overflow 来滚动其所有内容。我的问题是，在表格下方，我有一个页脚，需要与ta的宽度相同...

html css flexbox frontend

回答 1 投票 0

Flexbox 子项没有声明内边距

我只能弄清楚为什么右侧按钮没有足够的填充。 Wie möchten Sie ihre Antwort erhal... 我刚刚能弄清楚为什么右侧按钮没有足够的填充。 <div class="col-span-2 flex gap-0.5 items-center justify-between"> <p>Wie möchten Sie ihre Antwort erhalten?</p> <div class="grid grid-cols-2 gap-1.5"> <div class="whitespace-nowrap rounded bg-black px-4 py-3 text-center leading-none text-white" > E-Mail </div> <div class="whitespace-nowrap rounded border px-4 py-3 text-center leading-none" > Telefon </div> </div> </div> 您可以考虑将 flex-basis: 0; flex-grow: 1 应用于 <p> 元素。这意味着按钮的网格容器将在其宽度上“优先”。这允许其按钮保持其自然宽度。然后，任何剩余的父级水平空间将由 <p> 元素填充： <script src="https://cdn.tailwindcss.com/3.4.1"></script> <div class="w-full flex gap-0.5 items-center justify-between p-10"> <p class="basis-0 grow">Wie möchten Sie ihre Antwort erhalten?</p> <div class="grid grid-cols-2 gap-1.5"> <div class="whitespace-nowrap rounded bg-black px-4 py-3 text-center leading-none text-white"> E-Mail </div> <div class="whitespace-nowrap rounded border px-4 py-3 text-center leading-none"> Telefon </div> </div> </div> <div class="max-w-md w-full flex gap-0.5 items-center justify-between p-10"> <p class="basis-0 grow">Wie möchten Sie ihre Antwort erhalten?</p> <div class="grid grid-cols-2 gap-1.5"> <div class="whitespace-nowrap rounded bg-black px-4 py-3 text-center leading-none text-white"> E-Mail </div> <div class="whitespace-nowrap rounded border px-4 py-3 text-center leading-none"> Telefon </div> </div> </div> 填充没问题，但是 width (47.8) 的值是固定的，并且 2 个按钮上的 2 的值相同你可以这样做： <div class="whitespace-nowrap rounded border px-4 py-3 text-center leading-none" style="width: fit-content;" > Telefon </div>

html css flexbox tailwind-css

回答 2 投票 0

填充 Flexbox 图片库中的空白空间

我有这个使用 Flexbox 的 HTML/CSS 画廊。 @import“https://unpkg.com/open-props”； @import“https://unpkg.com/open-props/normalize.min.css”；：根 { --放大镜：6个； --间隙：1vmin； --

html css flexbox

回答 1 投票 0

如何使用“flex-flow：列换行”？

短版当使用flex-flow:columnwrap和display:inline-flex时，它不会像inline-block那样shrinkwrap：（功能（） { var 升序 = true; 设置间隔（函数（）{ 变量...

css flexbox

回答 5 投票 0

如何在小视图中创建等高行和堆叠列？

我想创建具有两列和一些行的网格，使得两行具有相同的高度（最大高度）。但就我而言，正在创建不等高度的行。例如，column1: row1 h...

javascript html css flexbox grid-layout

回答 1 投票 0

它可以Flexbox吗？聊天窗口，底部有输入，聊天向上滚动

看起来Flexbox应该可以，但我不明白。 http://codepen.io/MichaelJCole/pen/NGBVGe 目标：文本区域（用于输入消息）始终位于底部。 ...

css flexbox

回答 3 投票 0

在 Flex div 中填充推动项目？

所以我有一个导航栏，在这个导航栏中我有徽标、选项和按钮。每当我对按钮应用填充时，它会将其他所有内容推到左侧吗？任何建议，因为我从来没有......

html css flexbox padding

回答 1 投票 0

将物品均匀地排列在容器中，同时记住它们的原始位置

我想用html和css让它看起来像标题。要求如下：有一个父元素、一些子元素和一些孙元素。子元素...

html css flexbox

回答 1 投票 0

带有文本的元素如何缩小到最小尺寸

您将看到一个包含 3 个弹性项目的弹性容器。如何让中间框根据文本所需的宽度缩小到最小尺寸？我想在左边添加两个装饰破折号...

html css flexbox

回答 1 投票 0

Flex 换行 CSS 问题

我有一个 HTML 结构，可以在一行中显示主要和次要信息。到目前为止，要求是连续显示 3 个元素，效果非常好。但在给定的场景中...

css flexbox

回答 3 投票 0

由于其中有图像，列不会随着 Flexbox 中的窗口大小进行调整

我正在尝试构建一个分为两列的登陆页面（当前未完成）。每列包含图像和文本。当窗口全尺寸时，它显示得非常好，但任何...

html css reactjs flexbox

回答 2 投票 0

如何使用flex-wrap将元素左右对齐

我有一个水族容器，里面有 6 个 div。当 div 对于当前屏幕来说太大时，我使用 flex-wrap 来包裹它们，但是我希望顶行的第一个 div 与 ...

html css flexbox responsive-design

回答 1 投票 0

如何在列中分解 html 列表，并遵循列方向的字母顺序？

如果我有这样的列表怎么办： a b c d e f &... 如果我有这样的列表怎么办： <ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> <li>g</li> <li>h</li> <li>i</li> </ul> 并且想要这样的渲染： a | e | i b | f | c | g | d | h | 我的意思是，分成几列但尊重“垂直”字母顺序？此外，柱子的“高度”应与可用空间一样高。所以没有像上面那样固定 4 行。也没有固定高度的容器。可能吗？我知道我可以使用 Flexbox 来做到这一点，但要固定容器的高度。我也查看了网格规格，但不确定是否有可能。有什么想法吗？尝试这样的 CSS 网格： ul { margin: 0; padding: 0; list-style:none; height: 100vh; display: grid; grid-template-rows: repeat(auto-fit, 1.2em); /* define the heoght of one row here */ grid-auto-flow: column; font-size: 50px; } body { margin: 0; } <ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> <li>g</li> <li>h</li> <li>i</li> </ul> 您还可以将 column-count 与 column-fill: auto 一起使用。这样就可以达到不填写的效果了。 ul.example { column-count: 3; column-rule: 1px solid #dadbe1; column-gap: 3.7rem; column-fill: auto; /*balance*/ column-rule-color: #eaeaf1; column-width: auto; display: inline-block; height: 100vh; /*auto*/ margin: 0; padding: 0; width: 100%; } ul.example li { list-style: none; display: block; position: relative; break-inside: avoid; height: 25vh; } <ul class="example"> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> <li>g</li> <li>h</li> <li>i</li> </ul> 我希望列表项向下传播（而不是向右）。这对我有用： <style> .example { columns: 3; -webkit-columns: 3; -moz-columns: 3; } </style> <ul class="example"> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> <li>g</li> <li>h</li> <li>i</li> </ul>

css flexbox multiple-columns css-grid css-multicolumn-layout

回答 3 投票 0

如何在顺风CSS中将“增长”尺寸设置为最大宽度？

我有一个基于弹性框的布局。用于放置动态内容的元素的大小由grow 类设置。现在我的内容是一张大桌子。我想让它可滚动（地平线...

css flexbox tailwind-css

回答 1 投票 0

flexbox 中的图像标签导致溢出

我正在使用顺风，并尝试在固定高度的容器内创建一个四分之一的弹性盒。弹性盒不应溢出该固定高度。在我添加 img 元素之前它工作得很好。

css svg flexbox tailwind-css scaling

回答 1 投票 0

当物品包裹时，Flex 容器会拉伸至全宽

我希望弹性容器在项目包装时能够扩展到最大的项目。对于下面的容器，它应该与标记为 1 的项目一样膨胀，并且侧面不留间隙。 #妈妈...