flexbox 相关问题

目前，我使用 Flex 换行在移动到下一行时留出一个空格。然而，如果第一个的高度变长，则第一个柔性包装线的高度不会变长。目前，我使用 Flex 换行在移动到下一行时留出一个空格。但是，如果第一个高度变长，第一个柔性换行线的高度不会变长。 <div class="parent"> <div class="unique-wrapper"> <div class="unique_element">First</div> </div> <div class="child-wrapper"> <div class="child">Second</div> <div class="child">Third</div> <div class="child">Fourth</div> <div class="child">Fifth</div> </div> </div> div { font-family: arial, sans-serif; margin: 5px; color: white; border: 1px dotted black; } .parent { display: flex; width: 300px; } .unique_element { background-color: Crimson; padding: 10px 10px 10px 10px; } .unique-wrapper, .child-wrapper { border: none; margin: 0; } .unique-wrapper { flex: 3; } .child-wrapper { flex: 7; display: flex; flex-wrap: wrap; } .child { width: auto; background-color: Cornflowerblue; padding: 10px 10px 10px 10px; } 我的结果增加高度时随着第一个高度的增加，第二个和第三个的长度也必须增加，但在当前代码中，只有第一个更长。我搜索并发现有一种方法可以添加隐藏元素，但我无法使用 data.map 为特定元素提供类名。我该怎么办？我想要的结果我想知道需要做什么工作才能使它看起来像上图。这是因为，你的 unique_element 是 flex 的一个子元素，而 child-wrapper 是另一个。因此，如果 unique_element 的高度增加，它会考虑与 child-wrapper 的关系。为了实现您的功能，您可以将其设为 3-column grid，也可以将第一个 3 个元素放入一个子元素中，将其他 2 个元素放入下一个元素中。这取决于您的用例。

html css sass flexbox

回答 1 投票 0

如何将文本放置在同一 div 容器内的两个 div 元素下方

我试图让我的网站看起来像下面第一张图片中的设计，但我还想在第一张图片下方添加另一个文本，并如第一张图片下方的第二张图片所示添加文本

html css flexbox

回答 1 投票 0

将项目与底部对齐，同时保持弹性盒中的拉伸

我正在使用 Flexbox 构建以下卡片布局。卡片 { 弹性基础：计算（100% - 40px）；边框半径：4px； } .card__内容{ 内边距：25px； } .card__页脚{ 显示：f...

html css flexbox

回答 3 投票 0

如何在不使用position:absolute的情况下使网格项跨越两行？

我正在尝试实现一种布局，其中网格中的元素跨越两行，类似于下面所示的设计：在此设计中，“Strech over 2 rows”图块应垂直延伸穿过两个部分...

html css flexbox grid

回答 1 投票 0

bootstrap v4.5 中的 justify-content-center 类不起作用，即使我的 html 与 bootstrap 文档中的 html 完全匹配

我正在尝试为我正在为本地企业设计和编码的网站创建一个响应式联系我们部分，但是 bootstrap v4.5 中的 justify-content-center 类并未将图标居中...

css twitter-bootstrap bootstrap-4 flexbox

回答 1 投票 0

三列中的 Flexbox 项目

我有一个弹性盒容器，其中包含 5 或 6 个项目。容器的 flex-direction 将设置为 row。我想要的是像这样分发这些项目：第一个项目应该是第一个

html flexbox

回答 1 投票 0

父级上的 maxheight 会阻止子级上的 Flex Growth 工作

我有一个具有以下结构的组件：我有一个具有以下结构的组件： <View style={styles.container}> <LoyaltyCard {...cardData} onPress={onCardDetails} style={styles.card} /> <ScrollView style={styles.informationContainer}> <LoyaltyCardInformation style={styles.information} storeId={storeId} /> </ScrollView> <TextButton title={"Add Card"} onPress={onAddCard}></TextButton> </View> 相关样式： container: { minHeight: 0, maxHeight: "60%", flexDirection: "column" }, card: { zIndex: 2 }, informationContainer: { marginTop: -15, marginBottom: -15, flexGrow: 1, // height: 300, padding: 15, backgroundColor: "#f0f" }, information: { paddingTop: 15, paddingBottom: 15 } 这给了我以下结果：正如您所看到的，粉色 informationContainer 并未占据 flexGrow 属性指示的组件中的所有剩余空间。如果我检查检查员是否有足够的空间，请参阅下图：如您所见，有足够的空间。那么我该如何让粉色容器占据所有可用空间呢？您可以尝试将 flexGrow: 1 放在 container 风格上吗？

css react-native flexbox

回答 1 投票 0

如何修复嵌套网格布局？

在下面的示例中您可以看到该问题。我尝试将 grid-container (ol) 的 grid-tample-colums 属性更改为 grid-template-columns: min-content 1fr 0; 。但我被困住了。奥尔{

html css flexbox css-grid html-lists

回答 1 投票 0

导航栏的嵌套 Flexbox

我一直在努力使用 React 制作下拉导航栏，类似于下图 - 我的代码 - 导航栏.jsx 从 'react' 导入 React, { useState } 导入'./NavBar.css' 常量导航栏 = () =>...

css reactjs flexbox navbar

回答 1 投票 0

Google App Engine 使用 Flask 和 Gunicorn 的灵活 Python 环境

我曾经使用以下 app.yaml 为我的谷歌应用程序引擎 python 项目进行设置：运行时：Python 环境：弹性入口点：gunicorn -b :$PORT main:app 运行时配置： python_版本：3

python flask flexbox cloud gunicorn

回答 1 投票 0

填充滚动弹性容器的 100% 宽度

我有一个水平滚动元素（带有overflow-x:scroll），带有包含Flex项目的Flex容器。我正在尝试将背景应用于柔性容器。但正如您在示例中看到的...

html css flexbox

回答 3 投票 0

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

flexbox 相关问题

最新问题