flexbox 相关问题

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

CSS Grid + Flex：信息容器不会在 img 上溢出

使用网格和弹性属性，我试图让我的信息框在我的图像上溢出一点，而不是让它就在下面。有什么建议可以使其成为可能吗？到目前为止我尝试了简单的

html css flexbox css-grid

回答 1 投票 0

React Native FlatList Item 具有动态高度和宽度

我的设计中有一个屏幕，它将包含多个图像。它看起来像画廊视图。我需要以动态宽度和高度显示每个项目。请看图片。

react-native flexbox flatlist

回答 2 投票 0

使用 CSS 网格时，图像高度在 Safari 上无法正常工作

嗨，我在尝试将图像“适合”CSS 网格容器时遇到了一些麻烦（该问题仅在使用 Safari、Firefox 和 Chrome 时发生，没问题。）问题是，img 高度

html css image flexbox grid

回答 2 投票 0

如何将 div 放置在 Flexbox 中居中的 div 旁边？

我想在窗口中央放置一个 div，然后将另一个 div 放在它旁边而不移动它。现在我的 .html 中有这个：我想在窗口中央放置一个 div，然后将另一个 div 放在它旁边而不移动它。现在我的 .html 中有这个： <div class="wrapper"> <div class="draw-area centered"></div> <div class="result centered"></div> </div> 这在我的 .css 中： .wrapper { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .centered { text-align: center; } 使用此代码，div 水平和垂直居中，但由于“结果”，类为 draw-area 的 div 并不完全位于窗口中间。有人可以帮我吗？ flexbox 是不是在这里使用了错误的工具？ CSS 网格可能是一个更好的选择。 .wrapper { display: grid; grid-template-columns: 1fr auto 1fr; } .draw-area { padding: 10px; background: lightblue; } .centered { grid-column: 2; } .result { padding: 10px; background: lightgreen; justify-self: start; } <div class="wrapper"> <div class="draw-area centered">I'm centered</div> <div class="result">Result</div> </div>

html css flexbox

回答 1 投票 0

哇，将一个 div 放置在 Flexbox 中居中的 div 旁边？

我想在窗口中央放置一个 div，然后将另一个 div 放在它旁边而不移动它。现在我的 .html 中有这个：我想在窗口中央放置一个 div，然后将另一个 div 放在它旁边而不移动它。现在我的 .html 中有这个： <div class="wrapper"> <div class="draw-area centered"></div> <div class="result centered"></div> </div> 这在我的 .css 中： .wrapper { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .centered { text-align: center; } 使用此代码，div 水平和垂直居中，但由于“结果”，div“draw-are”并不完全位于窗口中间。有人可以帮我吗？ flexbox 是不是在这里使用了错误的工具？您需要解决两件事：将包装器设置为占据视口的整个高度确保居中类处理子元素的居中和水平放置。 .wrapper { display: flex; justify-content: center; align-items: center; height: 100vh; } .centered { text-align: center; } .draw-area { width: 200px; height: 200px; background-color: lightblue; } .result { width: 200px; height: 200px; background-color: lightcoral; } <div class="wrapper"> <div class="draw-area centered"></div> <div class="result centered"></div> </div> 因此，使用此代码，由于 justify-content: center 和align-items: center，.wrapper 将使其子元素水平和垂直居中。 height: 100vh 上的 .wrapper 确保它占据视口的整个高度，确保垂直居中。

html css flexbox

回答 1 投票 0

CSS 换行问题：防止单词扩展以填充换行时的行

我正在努力解决 Flexbox 布局问题，我希望对中归类为单词对的单词进行特定的换行行为。要求是单词在屏幕上保持在一起...

html css flexbox whitespace word-wrap

回答 1 投票 0

如何使 div flex 容器内的所有图像与容器中最小图像的大小相匹配？

我有一个包含 4 个图像的 Flex 容器，其中 3 个大小相同 (200x134)。但是，有一张图像更大 (401x267)。我希望较大的图像包含自身并将其大小调整为...

html css image flexbox containers

回答 1 投票 0

如何创建一个可滚动的 HTML 表格，无需使用 JS 即可占据其容器的剩余高度

我正在尝试在 HTML 布局中创建一个可滚动表格。表格应该占据容器的剩余高度，如果内容超过了ava，只有表格应该垂直滚动...

css flexbox tailwind-css

回答 1 投票 0

当等宽容器太小而无法容纳其内容时换行

我有一个具有以下要求的行弹性盒： Flexbox 有两个子 Flex 项目弹性项目始终具有相同的宽度一旦容器变得足够小，可以容纳任何弹性物品

css flexbox overflow

回答 1 投票 0

PrimeVue 菜单栏 CSS 问题 - 右对齐，但菜单项左侧有一个动态变化的按钮

我有一个要求，我想使用 PrimeVue Menubar 组件，但进行修改以使菜单项（链接）与菜单右侧对齐，并且我需要传入一个名为 Versio 的按钮...

javascript css vue.js flexbox primevue

回答 1 投票 0

2 个 Div 垂直平均分割并使用容器的高度

如何使 2 个图像填充高度等于子高度 .photo-main 的容器的高度。 .container 元素必须保持在 .photo-main 的高度。。容器 { 迪...

css flexbox

回答 1 投票 0

我应该使用网格吗？或者对于这样的行动你有什么建议？

我不知道在这种情况下该使用什么我想要简历（img）在左边，传记（p）在中间宽，右边在同一区域有输入（电子邮件），文本区域和屁股......

html css layout flexbox grid

回答 2 投票 0

使用 Flex 时如何让 Div 在越界时滚动？

我有一个主 div，它是一个子 div，以内容 div 为中心。此内容 div 与页眉 div 和页脚 div 是同级的，它们是包装 div 的子级。内容 div 的目的是...

css flexbox scroll overflow

回答 1 投票 0

使加载旋转器居中

我想确保我的加载旋转器在使用时始终居中，在表格中，按钮中，... .th-加载器{ 。进步 { 顶部： calc(50% - (var(--loading-indicator-border)/2)); 左：计算（5...

css flexbox

回答 1 投票 0

移动版和桌面版布局不一致

我创建了我的第一个网络应用程序，但在显示它时遇到了问题。在台式电脑上一切正常，但在平板电脑和手机上我发现一切都不正常，可能是什么问题？ ...

css flexbox

回答 1 投票 0

CSS 布局：固定内容中的页眉/页脚和子页眉

我正在开发一个网络应用程序，希望有以下布局： --标题-- - 身体 - ... 我正在开发一个网络应用程序，希望有以下布局： <div class="wrapper"> --header-- <div class="header"> </div> --body-- <div class="content"> --header within body-- <div class="sub-header"> </div> ---scrollable content- <div class="scrollable-content"> </div> </div> --footer-- <div class="footer"> </div> </div> CSS： .wrapper { display: flex; flex-direction: column; height: 100vh; } .header { flex: 0 0 auto; } .content { overflow-y: scroll; flex: 0 1 auto; } 我想将滚动的剩余高度分配给“可滚动内容”div。我遇到过整个内容都是可滚动的答案，但这里的情况并非如此。任何帮助都会很棒这里我使用速记CSS属性flex来确定每个<div>的高度并设置overflow: scroll;。因此，其他元素不会在该元素溢出时滚动。 .wrapper { border: 1px red solid; height: 300px; display: flex; flex-direction: column; flex-wrap: no-wrap; } .header { border: 1px red solid; flex: 0.2; } .content { border: 1px red solid; flex: 0.6; display: flex; flex-direction: column; flex-wrap: no-wrap; } .sub-header { border: 1px red solid; flex: 0.15; } .scrollable-content { border: 1px red solid; flex: 0.85; overflow: scroll; } .footer { border: 1px red solid; flex: 0.2; } <div class="wrapper"> <div class="header"> --header-- </div> <div class="content"> <div class="sub-header"> --header within body-- </div> <div class="scrollable-content"> ---scrollable content--<br> ---scrollable content--<br> ---scrollable content--<br> ---scrollable content--<br> ---scrollable content--<br> ---scrollable content--<br> ---scrollable content--<br> ---scrollable content--<br> ---scrollable content--<br> ---scrollable content--<br> </div> </div> <div class="footer"> --footer-- </div> </div>

html css flexbox

回答 1 投票 0

如何反转 CSS 中 Flexbox 的所有元素？

我正在尝试从最后一个到第一个对弹性盒的元素进行排序。我尝试使用 flex-direction: row-reverse;但它只是反转了线条，而不是整个容器。我的代码： <

css user-interface flexbox

回答 1 投票 0

各个容器内的图像和文本正确对齐

我正在尝试将图像对齐到更靠近其右侧容器边框的位置，同时尝试将文本对齐到更靠近其自身容器边框的左侧的位置，但仍然在两个元素之间留出间距

html css flexbox

回答 1 投票 0

尝试创建基于 Flex 的页眉、内容和页脚布局

我正在尝试实现这种布局。所有三个部分都必须装订在细线内。页眉和页脚需要垂直居中。那么内容的高度应该是...