flexbox 相关问题

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

Flexbox：无法将文本区域放在新行上

我试图将预格式化的文本块浮动到页面的右侧，使文本与块的左侧对齐，以便获得包含左对齐文本的右对齐段落。 T...

html css flexbox textarea

回答 1 投票 0

防止图像强制 Flexbox 父容器内容器的高度

我有一个棘手的布局需要用图像网格来解决，第一行作为 4 个 25% 的块运行，第二行将有 3 个块，其中 2 x 25% 的块和 1 个图像占剩余的 50%温泉...

css image flexbox object-fit

回答 1 投票 0

“恢复”不尊重继承

根据 MDN 文档的恢复，它尊重继承。所以，理论上，如果我有这个 HTML：那里 <... 根据 revert 的 MDN 文档，它尊重继承。所以，理论上，如果我有这个 HTML： <div class="container"> <h1 class="header">there</h1> </div> 还有这个CSS： .container { font-weight: normal; } .header { font-weight: revert; } 文字粗细要正常。理论上，revert应该首先查看其父级（font-weight是一个继承属性）。然而，这并没有发生。为什么？考虑到我直接对元素应用“恢复”这一事实，这特别奇怪（因此关于浏览器样式覆盖元素样式的理论在这种情况下不太成立）。 Revert 将属性重置为浏览器默认值或用户定义样式的值。它不会简单地回退到级联中最近的继承值。如果您想直接继承父级的值，请使用inherit。

html css flexbox

回答 1 投票 0

如何在 Shopify Dawn 主题中使用 CSS 将标题元素保持在单水平行中？

我正在使用 Dawn 主题自定义 Shopify 商店的标题。我希望整个标题（徽标、导航菜单以及搜索、帐户和购物车等图标）保留在一条水平线上，

css flexbox responsive-design header shopify

回答 1 投票 0

Flex 方向行在 React Native 中不起作用

我不知道我的代码有什么问题，但总是在< Text >下显示< TouchableOpacity >。我尝试更改代码中的所有内容，但没有结果，也没有改变其他类似的内容

react-native flexbox row

回答 1 投票 0

CSS 网格布局无法像我的 Flexbox 布局一样正确显示行

问题：我正在尝试构建一个 CSS 网格布局，以在三行 UI 中显示图片。但是，网格布局的行为并不符合预期，并且看起来与 Flexbox 布局不同 I

css flexbox css-grid

回答 1 投票 0

将网站内容与导航栏对齐

我正在尝试使用 HTML/CSS 和 JS 设计一个作品集网站。我完成了动画、切换到导航栏以及网站的总体设计。当我想添加一些内容...

javascript html css flexbox

回答 1 投票 0

使用 Flexbox 创建响应式表格

如何创建响应式表格？我想要的表与此类似：表格必须是响应式的，所以必须改变的是列的宽度。我认为最好的解决方案是使用

css flexbox responsive

回答 3 投票 0

MUI Grid2 容器不占用剩余空间

我正在尝试创建一个 React 布局，如代码沙箱项目中所示我预计网格布局将占据该线指示的区域。我希望左侧网格的宽度恒定为 216p...

reactjs material-ui flexbox grid

回答 1 投票 0

对于非替换元素是否有类似“object-fit: contains”之类的东西？

最近，我一直在尝试创建一个纵横比为 3 / 7 的居中 div，尽可能地填充其父级，其作用类似于 object-fit: contains。不幸的是，object-fit：包含 d...

html css flexbox

回答 1 投票 0

如何让我的网格始终保持与 1:1 相同的正方形尺寸？

我只是 HTML 和 javascript 的初学者，所以我还没有完全掌握这门语言。我碰壁了，正在寻求帮助。点击查看情况问题是我...

javascript html css flexbox aspect-ratio

回答 1 投票 0

如何使用CSS使图像共同填充容器的宽度，同时保持相同的高度和长宽比？

我正在尝试创建一个布局，其中一组图像：显示在单行中。保持各自的纵横比（无失真）。所有图像的高度相同。集体菲...

html css flexbox

回答 1 投票 0

如何允许绝对定位元素溢出卡片并溢出：隐藏，同时保持卡片可收缩？

我正在开发一个布局，其中有一个屏幕高度的垂直弹性容器，其中包含动态数量的卡片。每张卡片应占据容器的整个宽度，并具有以下图像

html css layout flexbox

回答 1 投票 0

防止 Flex-wrap 3:1 案例

很抱歉我不知道如何写出正确的问题。但这是我想解决的问题：如果容器有 4 个项目，并且每个项目都有 Flex:1 --> 那么它将通过 ...

css flexbox

回答 2 投票 0

flex-wrap 没有效果，容器反而变大了

我有flex-wrap:wrap，但项目不包装，容器反而变大。我希望物品能够被包裹起来，而不是容器变得更高。这是一个例子：我有flex-wrap: wrap，但物品没有包装，容器反而变大。我希望物品能够被包裹起来，而不是容器变得更高。这是一个例子： <div style="background-color: #aaa;"> <div style="display: flex;"> <div style="display: flex; flex-wrap: wrap; flex-direction: column;"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> </div> <div style="width: 300px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> </div> </div> 我看到一个没有包装的高容器：但我想要包装而不是不必要地增大容器。这是一个草图：容器的高度应由其其他子项决定，而不是由由于某种原因拒绝换行的弹性盒子项决定。各种帖子中的各种内容，例如fit-content和height: auto都不起作用。从元素容器的样式中删除 flex-direction:column;。代码应如下所示： <div style="background-color: #aaa;"> <div style="display: flex;"> <div style="display: flex; flex-wrap: wrap;"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> </div> <div style="width: 300px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> </div> </div>

css flexbox

回答 1 投票 0

CSS：使图像填充父级但不更改父级大小

我有一个图片库，所有图像都是正方形。图像位于它们的 div 和一个大 div 中，显示屏可以弯曲以成为所有 div 的父级。我希望图像填充其父级 div，但是...

html css flexbox

回答 2 投票 0

随着容器宽度不断减小，如何始终截断 Flexbox 容器中的最后一个 Flex 项目？

我有一个例子，在弹性盒容器中有几个弹性项目。随着容器宽度的减小，我希望左侧项目不被截断，右侧项目继续截断，直到...

html css flexbox container-queries

回答 1 投票 0

阅读完此处的所有帖子后，Flex 行无法在 React Native 中工作

我不知道我的代码有什么问题，但总是在< Text >下显示< TouchableOpacity >。我尝试更改代码中的所有内容，但没有结果，也没有改变其他类似的内容