CSS3模块提供灵活的布局，提供了广泛的对齐元素选项，同时无需浮动和表格。
Flexbox - 对齐内容：居中和对齐项目：居中不起作用？
我有一个非常基本的 Flex 设置，并且无论出于何种原因，有问题的 div 不会在其父标签内垂直居中。您可以在下面看到单独的测试用例。 .相似度排名表{
如何使 div 位于水平对齐（居中）元素的右侧。在 Tailwind 或 CSS 中
如何使其准确：- 上面有一个 div 在中心对齐，然后另一个 div 在它旁边。 div 的宽度随着动画和按钮的变化而变化。 <question vote="1"> <p>如何使其准确：- <a href="https://i.sstatic.net/Jf1l6Ew2.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvSmYxbDZFdzIucG5n" alt="enter image description here"/></a></p> <p>在上面有一个div在中心对齐，然后另一个div在它旁边。 div 的宽度随着动画和按钮的变化而变化。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="false"> <div> <pre><code><script src="https://cdn.tailwindcss.com/3.4.3"></script> <div class="flex justify-center"> <!-- This is unneeded extra placeholder --> <div class=" bg-blue-300 grow"></div> <!-- center content whose width is not determined --> <div class="py-10 bg-yellow-300">Center Me</div> <!-- right content whose width is not determined --> <div class=" bg-blue-300 grow"> <div>Needs to be in right of center</div> <div>TEXT TEXT TEXT</div> </div> </div></code></pre> </div> </div> <p></p> </question> <answer tick="false" vote="0"> <p>在 <pre><code>absolute</code></pre> 容器内使用 <pre><code>relative</code></pre> 的最佳方式是使用它，因为您有将元素推入其中的内容，或者您可以使用网格代替 <pre><code>flex</code></pre> 来按内容</p> <p>使用flex的解决方案： </p><div data-babel="false" data-lang="js" data-hide="false" data-console="false"> <div> <pre><code> <script src="https://cdn.tailwindcss.com/3.4.3"></script> <div class="flex justify-between relative"> <!-- This is unneeded extra placeholder --> <div class="bg-blue-300 grow"></div> <!-- center content whose width is not determined --> <div class="py-10 bg-yellow-300">Center Me</div> <div class="bg-blue-300 grow"></div> <!-- right content whose width is not determined --> <div class="bg-blue-300 absolute right-0 h-full"> <div>Needs to be in right of center</div> <div>TEXT TEXT TEXT</div> </div> </div></code></pre> </div> </div> <p></p> <p>使用网格</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="false"> <div> <pre><code> <script src="https://cdn.tailwindcss.com/3.4.3"></script> <div class="grid grid-cols-3"> <!-- This is unneeded extra placeholder --> <div class="bg-blue-300"></div> <!-- center content whose width is not determined --> <div class="py-10 bg-yellow-300">Center Me</div> <!-- right content whose width is not determined --> <div class="bg-blue-300"> <div>Needs to be in right of center</div> <div>TEXT TEXT TEXT</div> </div> </div></code></pre> </div> </div> <p></p> <p>最终取决于你如何处理这个问题</p> </answer> </body></html>
您好，您能帮我在代码中设置列吗？我有这个代码： 侧边菜单&l... 您好，您能帮我在代码中设置列吗？我有这个代码： <div class="container-fluid h-100"> <div class="row h-100"> <div class="flex-column h-100">side menu</div> <div class="???"> <div>1 piece</div> <div>2 pieces piece</div> <div>1 piece</div> <div/> <div/> <div/> 这是我的实际结果，其中我画出了如何分割其余空间。带菜单的蓝色栏应该固定，实际做什么。柱子比例1:2:1可调。 代替 row，您可以使用 d-flex 作为 row 罐 wrap - 内容可以放在侧边栏下方。 对于内容，如果你必须保留 html 结构，你可以使用这个： <div class="d-flex w-100"> <div class="col-3">1 piece</div> <div class="col-6">2 pieces piece</div> <div class="col-3">1 piece</div> </div> 请参阅下面的演示 - 添加边框以供说明： html,body { height: 100%; } div { border: 1px solid; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid h-100"> <div class="d-flex h-100"> <div class="flex-column h-100">side menu</div> <div class="d-flex w-100"> <div class="col-3">1 piece</div> <div class="col-6">2 pieces piece</div> <div class="col-3">1 piece</div> </div> </div> </div> 您可以通过 col 类使用以下解决方案： body { height:100vh; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid h-100"> <div class="row h-100"> <div class="flex-column h-100">side</div> <div class="col">1 piece</div> <div class="col-6">2 pieces piece</div> <div class="col">1 piece</div> </div> </div> 使用 w-* 类和 bootstrap flexbox 的另一种解决方案： body { height:100vh; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid h-100"> <div class="row h-100 d-flex flex-nowrap align-items-stretch"> <div class="flex-column h-100">side</div> <div class="w-25">1 piece</div> <div class="w-50">2 pieces piece</div> <div class="w-25">1 piece</div> </div> </div> 使用 Bootstrap v4 Flexbox： <div class="d-flex flex-row h-100"> <div class="d-flex justify-content-start">side menu</div> <div class="d-flex flex-row w-100"> <div class="w-25">1 piece</div> <div class="w-50">2 pieces piece</div> <div class="w-25">1 piece</div> </div> </div> 看来你可以在没有flex-column的情况下实现这一点。 列的比例由 flex-grow-1 类决定，具体取决于可用/需要的空间量。 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div style="height: 175px;"> <div class="d-flex flex-grow-1 border border-primary m-1 h-100"> <div class="d-flex flex-grow-1 border border-secondary m-1"> <div class="border border-success m-1"> <!-- seems to work even without flex-column :D --> <div class="border border-warning m-1">1 piece</div> <div class="border border-info m-1">1 piece</div> <div class="border border-dark m-1">1 piece</div> </div> <!-- with flex-wrap they will go under eachother if there is not enough space --> <div class="d-flex flex-wrap flex-grow-1 border border-danger m-1"> <div class="flex-grow-1 border border-warning m-1">1 piece</div> <div class="flex-grow-1 border border-info m-1">2 pieces piece</div> <div class="flex-grow-1 border border-dark m-1">1 piece</div> <div/> <div/> <div/> <div>
对于contex，我使用HTML和CSS（通过CDN连接的链接/脚本标签使用Bootstrap 5）来创建前端响应式静态网站。 我的问题是，当切换器展开时，它......
我想使用 Tailwind CSS 创建大小相同的图像轮播。我想要 5 个彼此相邻的图像，以便观看者能够左右滚动以查看图像。当...
我想创建一个聊天窗口，如果内容溢出，它会垂直滚动。 我有一个包含 3 个项目的 Flexbox。标题、.chat 聊天框和输入。 .chat 聊天框有 Flex: 1;而我
我正在构建一个需要渲染的图像滑块，如以下屏幕截图所示： 我设法用以下代码实现了这个设计： 。滑块 { 显示：柔性； } .滑块....
我有两个关于 Flexbox 的问题...... 我想要导航栏中的 ul 项目之间有空间，现在它们粘在一起......我怎样才能在链接之间获得一些空间。我可以在每个上使用 padding-right...
我正在尝试按特定顺序订购 2 个不同视图的项目。我正在为此使用 Vuetify。 首先我们有一个移动视图，这非常简单。我正在以移动优先的方式开发我的网络应用程序
我是 Tailwind CSS 的新手，一直在尝试使用 Tailwind 文档中的可用代码示例制作一个简单的投资组合页面。 当容器类用 ... 包装页面上的所有内容时
我一直在尝试很多配置来让这 3 张卡片在使用 Flexbox 时并排显示。我已经调整了宽度和列/行。我哪里出错了？ Flexbox 是最好的方法吗...
如何制作一个弹性盒，可以均匀地间隔项目，同时还允许部分填充行？空间均匀和弹性启动的混合
* 弹性盒子的东西 */ 显示：柔性； /* 这使得它从左到右填充，在右侧留下空白*/ /* justify-content：flex-start； */ /* 这使得它全部填满......
这有点难以解释，但请考虑一个带有菜单的 Flex 标题，然后右侧是固定宽度的其他内容。随着窗口尺寸宽度的缩小，菜单的空间也随之减少。
Flexbox 中活动项目的背景颜色仅影响文本，所需的行为是整个空间周围
创建一个.navbar类的div并通过display: flex实现它之后；对于我所在的每个页面，我希望导航栏中的活动页面的整个背景具有不同的背景...
子 Flexbox 元素的高度不断增长，大于父 Flexbox 容器的高度
我有一个水平 Flexbox 容器，它有 2 个子垂直 Flexbox 容器，如下所示： 我有一个水平 Flexbox 容器，它有 2 个子垂直 Flexbox 容器，如下所示： <div style="display: flex;"> <div style="display: flex; flex-direction: column; flex-grow: 1; overflow-y: auto; min-height: 0;"> <div style="height: 500px; background-color: red;"> Large element with dynamic height. Scrollbar should appear when height is more than blue box. </div> </div> <div style="display: flex; flex-direction: column;"> <div style="width: 200px; height: 200px; background-color: blue;"> Small element with fixed height </div> </div> </div> 关于宽度： 第一个子项（左边的）我想水平增长，以便它填充大部分宽度，而第二个子项我想缩小以适合其内容。因此，我给第一个孩子打了flex-grow: 1;。 关于高度：我希望父级的高度与第二个子级的内容紧密配合，因为第二个子级中的项目将是固定高度。第一个子项将是一个具有动态行数的表，因此我希望第一个子项的高度不大于其父级的高度，如果第一个子项的高度太大，那么我会得到一个滚动条。因此，我放置了一个min-height: 0; overflow-y: auto; 问题：随着第一个孩子变大，我永远不会出现滚动条（即使第一个孩子的高度大于第二个孩子的高度）。不管怎样，父母的身高始终是孩子身高中较大的一个。 可能不是最完美的解决方案，但它可能会起作用：第一个子级的内容可以包装在额外的绝对定位的可滚动容器中。 必须将其拉伸以完全适合第一个孩子（左边的孩子）。 .flexbox { display: flex; } .first-child { flex-grow: 1; position: relative; } .second-child { display: flex; flex-direction: column; } .content-wrap { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow-y: auto; } .content { height: 500px; background-color: red; } .second-content { width: 200px; height: 200px; background-color: blue; } <div class="flexbox"> <div class="first-child"> <div class="content-wrap"> <div class="content"> Large element with dynamic height. Scrollbar should appear when height is more than blue box. </div> </div> </div> <div class="second-child"> <div class="second-content"> Small element with fixed height </div> </div> </div>
问题在于，当屏幕尺寸减小且三个无序列表对齐时（一个用于工作经验，一个用于教育）。教育背景与工作经验不符...
Bootstrap 5 justify-content 无法正常工作并且无法垂直居中内容
我有以下代码，我使用 bootstrap 5： ...
“flex: 1”如何作用于列 Flex 容器中的 <img/> 标签？
一段时间以来，我一直在努力调整图像的高度，以匹配具有列方向的弹性容器中的剩余高度。在主容器中，我有一个 一段时间以来，我一直在努力调整图像的高度，以匹配具有列方向的弹性容器中的剩余高度。在主容器中，我有一个 <div> 标签，它也是一个弹性容器并包含多个元素（在实际情况下，其确切高度可能是动态的）。主容器还包含一个 <img> 标签。我希望 <img> 标签将其高度和宽度调整到主容器中的剩余区域。 我以为我通过在 <img> 标签中添加“flex: 1”来解决问题，但是当我进入 Chrome 浏览器的开发工具时，图像超出了主容器的固定高度。更改宽度也会影响图像的显示。 （我也在Edge上签到过） 我想看到什么（忽略拉伸图像）： 访问开发工具时呈现的内容。 这里是演示：https://stackblitz.com/edit/stackblitz-starters-6dckyr?description=HTML/CSS/JS%20Starter&file=script.js,index.html,styles.css&terminalHeight=10&title=Static%20Starter 我读到了几个关于处理<img>高度的问题，例如： flex-grow 不适用于图像 （似乎有些东西发生了变化，因为在全屏模式下 - 该问题的示例也不起作用） 在这种情况下，添加“max-height: 100%”将是对齐图像的宽度/高度以填充空白空间的解决方案。但就我而言，这不是我想要的，因为添加这个 css prop 也会导致图像溢出（因为高度 100% 是主容器的高度）。 我可以用背景图像做一个<div>，但现在在这上面花2-3个小时是荣誉问题（我想知道只是因为好奇）。 您是否尝试过在红色 div 上设置 flex: 1 并在图像上设置 flex: 3 ？
我需要一个垂直居中的盒子，里面有内容，然后在下面有一个可选的第二个盒子。当显示第二个框时，第一个框的位置不应改变 - 澄清一下，...