flexbox 相关问题

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

仅使用flexbox在同级剩余空间中放置一个div

我目前正在尝试仅使用 CSS 和 Flexbox 来使 div 适合空白空间, 但我找不到让它发挥作用的方法。 我无法更改 HTML 布局,也无法使用绝对定位...

回答 2 投票 0

如何让父母与孩子之间或每个孩子之间的差距相同?

我想创建一个Flexbox组件,每个子组件之间的间距以及父子组件之间的间距都相同。它类似于“空间均匀”,但我不想使用 sta...

回答 1 投票 0

如何将时间线居中,块位于中间?

我设法用块制作了时间线的模型。它看起来还不错。您可以运行代码片段来查看或查看此图像: 。列表 { 显示:柔性; 弹性方向:列; } ...

回答 2 投票 0

弹性顺序直到父元素之外

我想使用弹性顺序直到父元素之外 ... 我想使用弹性顺序直到父元素之外 <div class="flex-wrap"> <div class="flex-container"> <div class="first"></div> <div class="second"></div> </div> <div class="third"> <img> </div> </div> 在这种情况下,我在 flex-wrap 类中应用了 css,如下所示。 display: flex; flex-direction: column; 现在显示为, 首先 第二个 第三 我怎样才能订购, 首先 第三 第二个 ? 我尝试了 CSS 中的订单值,以多种方式...... 但没有成功。 使用 display:contents “打开”内部包装器,然后使用 order 重新排列整个包装器中的元素。 .flex-container { display: contents; } .flex-wrap { display: flex; flex-direction: column; } .second { order: 1; } <div class="flex-wrap"> <div class="flex-container"> <div class="first">First</div> <div class="second">Second</div> </div> <div class="third"> Third </div> </div>

回答 1 投票 0

CSS 保持所有 Flexbox 子元素大小相同

我的代码显示在这个JSFiddle中: #容器 { 对齐内容:弹性开始; 背景颜色:红色; 显示:柔性; flex-flow:行换行; 高度:200px; 调整内容:空格-

回答 7 投票 0

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

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

回答 3 投票 0

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

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

回答 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>

回答 2 投票 0

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

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

回答 1 投票 0

如何使用“flex-flow:列换行”?

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

回答 5 投票 0

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

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

回答 1 投票 0

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

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

回答 3 投票 0

在 Flex div 中填充推动项目?

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

Flex 换行 CSS 问题

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

回答 3 投票 0

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

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

回答 2 投票 0

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

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

回答 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>

回答 3 投票 0

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

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

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.