flexbox 相关问题

如何使其准确：- 上面有一个 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">  <div class=" bg-blue-300 grow"></div>  <div class="py-10 bg-yellow-300">Center Me</div>  <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">  <div class="bg-blue-300 grow"></div>  <div class="py-10 bg-yellow-300">Center Me</div> <div class="bg-blue-300 grow"></div>  <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">  <div class="bg-blue-300"></div>  <div class="py-10 bg-yellow-300">Center Me</div>  <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>

html css sass flexbox tailwind-css

回答 0 投票 0

Bootstrap 4.0 - 使用弹性列

您好，您能帮我在代码中设置列吗？我有这个代码：侧边菜单&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">  <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>  <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>

css twitter-bootstrap flexbox bootstrap-4 twitter-bootstrap-4

回答 4 投票 0

导航栏切换器在展开时不会变成“X”

对于contex，我使用HTML和CSS（通过CDN连接的链接/脚本标签使用Bootstrap 5）来创建前端响应式静态网站。我的问题是，当切换器展开时，它......

html css flexbox bootstrap-5 navbar

回答 1 投票 0

为什么Flex会导致多个图像缩小？

我想使用 Tailwind CSS 创建大小相同的图像轮播。我想要 5 个彼此相邻的图像，以便观看者能够左右滚动以查看图像。当...

html css flexbox tailwind-css

回答 1 投票 0

如何启用灵活高度的垂直滚动？

我想创建一个聊天窗口，如果内容溢出，它会垂直滚动。我有一个包含 3 个项目的 Flexbox。标题、.chat 聊天框和输入。 .chat 聊天框有 Flex: 1;而我