flexbox 相关问题

Flexbox 嵌套 div 溢出

我有一个 div，其中包含可变数量的元素，当内容溢出屏幕的剩余高度时，这些元素应该滚动，但是当内容增长到需要滚动时，...

将最小弹性框高度设置为内容的高度

当我调整窗口大小时，元素可能会突出其父元素。 有什么方法可以保证： .split-content 最小高度等于其内容 + m... 当我调整窗口大小时，<input>元素可能会突出其父级<div>。 有什么方法可以保证： .split-content最小高度等于内容+边距 .split-heading 与 .split-content 具有相同的高度 我有以下标记： .split { display: flex; align-items: center; justify-content: center; height: 100%; } .split-heading { border-radius: 8px 0 0 8px; min-width: 3em; } .split-content { flex-grow: 1; flex-direction: column; align-items: flex-start; border-radius: 0 8px 8px 0; padding: 0 2rem; background: #ecf0f1; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div style="position:absolute; top:15px; right:15px; bottom:15px; left:15px"> <div style="display:flex; flex-direction:column; height:100%; width:100%"> <div style="position:relative; flex:1; width:100%; height:100%;"> <div style="position:absolute; top:0; right:0; bottom:0; left:0"> <!-- from here onwards i can change stuff the upper part comes from the framework --> <div class="split split-container "> <div class="split split-heading bg-primary"> <h2> 1 </h2> </div> <div class="split split-content"> <h3>Heading</h3> <input type="text" class="form-control" placeholder="..." readonly="TRUE"> </div> </div> </div> </div> </div> </div> 只需使用网格而不是弹性 .split { display: grid; grid-template-columns: 3em 1fr; align-items: center; justify-content: center; height: 100%; } .split-heading { border-radius: 8px 0 0 8px; display: flex; align-items: center; justify-content: center; } .split-content { display: flex; flex-grow: 1; flex-direction: column; align-items: flex-start; border-radius: 0 8px 8px 0; padding: 0 2rem; background: #ecf0f1; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div style="position:absolute; top:15px; right:15px; bottom:15px; left:15px"> <div style="display:flex; flex-direction:column; height:100%; width:100%"> <div style="position:relative; flex:1; width:100%; height:100%;"> <div style="position:absolute; top:0; right:0; bottom:0; left:0"> <!-- from here onwards i can change stuff the upper part comes from the framework --> <div class="split split-container "> <div class="split split-heading bg-primary"> <h2> 1 </h2> </div> <div class="split split-content"> <h3>Heading</h3> <input type="text" class="form-control" placeholder="..." readonly="TRUE"> </div> </div> </div> </div> </div> </div>

我希望主体使用屏幕的最大高度

我的 HTML 有一个 header div 和一个 body div。 我希望 body div 增长到屏幕的最大高度。 如果我将高度设置为 100vh，它会起作用，但会忽略标题 div 高度。 所以滚动条...

如何将图像与不同字体的文本对齐，以便最后一个文本正确断开？

我在将文本与图标对齐时遇到问题，因为 our-numbers-value 类的字体大小比 our-numbers-text 类大，因此 div 最终会变大并且图像会对齐...

输入控件在 Firefox 中溢出 Flex 容器

我在 Firefox 上（在 Chrome 中很好）使用 Flexbox 输入组时遇到问题 - 选择输入将文本输入推出容器。 我提取了一些标记并复制了相关...

React Native 位置：“绝对”不起作用

我是react-native的新手，我是从youtube学习的，但是其中用于在屏幕顶部对齐徽标图像的代码块可以工作，但是对我来说该代码不起作用。具体时间...

真的没有办法在 Flexbox 中将文本环绕在图像周围吗？

通常，当你有一块文本时，你可以将图像向左或向右浮动以将文本包裹在其周围，但在 Flexbox 中浮动不起作用，我正在努力寻找解决方案。 Bootstrap 4 是

在弹性列中绝对定位的项目上溢出无法按预期工作

我有一个绝对定位的元素，我想水平溢出它包含的元素。这将按预期工作，直到我将其中任何包含元素的溢出属性更改为

我们怎样才能仅使用 flex 来获得这样的布局？

我想要这样的布局，我该如何编写CSS代码？ 我的 HTML（我已将 CSS 移至 HTML 的样式中）： 我想要这样的布局，我该如何编写CSS代码？ 我的 HTML（我已将 CSS 移至 HTML 中的样式中）： <div class="container" style={{ display: "flex", flexWrap: "wrap" }}> <div class="orange" style={{ flex: 1 }}> <div id="chart" /> </div> <div class="yellow" style={{ flex: 1 }}> <LineChart width={600} height={300} data={this.state.data2} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} > <XAxis dataKey="name" /> <YAxis /> <CartesianGrid strokeDasharray="3 3" /> <Tooltip /> <Legend /> <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{ r: 8 }} /> <Line type="monotone" dataKey="uv" stroke="#82ca9d" /> </LineChart> </div> </div> Flex 可以方便地正确定位 sidebar 和 content 元素并调整其大小，如下例所示。 不需要任何固定的像素宽度，也不需要对简单的块元素header和footer使用flex。 .header { background: red; } .sidebar { background: orange; } .content { background: yellow; } .footer { background: green; } .container { display: flex; } .sidebar { flex: 1; } .content { flex: 3; } <div class="header">header</div> <div class="container"> <div class="sidebar">sidebar</div> <div class="content">content</div> </div> <div class="footer">footer</div> 如果侧边栏和内容位于带有 display: flex 的容器中，您可以通过以下样式来实现此目的 .sidebar { // set width width: 200px; // for example } .content { flex: 1; } 尽管您可能会考虑使用固定侧边栏，但这就是您实现图片布局的方式。

如果使用 Flexbox，当文本块与旁边的 div 发生碰撞时，如何将其换行到下一行

我尝试创建这个，如图所示，以及它在移动设备上的外观：图片。 基本上我试图显示三个相邻的 div。图标、标题和摘要。我

如何控制 Flexbox 项目增长/收缩的顺序？

我有一个带有三个孩子的弹性容器。每个孩子都有一个最小和最大宽度，我想让它们以特定的顺序增长/收缩。因此，随着窗口宽度减小，Item1 应该缩小...

如何使用Flex-wrap将第6个盒子包裹到下一行

我的目标是我希望第一行的盒子有5行，而第6个盒子将进入下一行？你能告诉我该怎么做吗？ 。容器 { 显示：柔性； 间隙：10px； 弹性包裹：包裹； 爸...

CSS 显示之间的弹性空间不起作用

首先，我不得不承认我对 Flexbox 和 CSS 非常业余。所以，对于任何幼稚的错误，我们深表歉意。 我有以下代码： @import url('https://fonts.googleapis.com/css2?family=Roboto:w...

CSS Flexbox 和间隙属性

&... .container-7 { 显示：弯曲； 弯曲方向：列； 列间距：24px； } 盒子{ 高度：100px； flex-basis：计算（25% - 24px）； 弹性增长：1； 弯曲收缩：1 背景颜色：兰花； } 我有七个容器。给出flex basis: calc (25% - 24px)后，我在第一排有前四个容器，接下来的三个。我想要接下来的三个在第二行，但在该行的中间。我怎样才能实现这个目标？ 删除flex-direction: column;？当然这应该是flex-direction: row;。 然后用 justify-content 居中。 .container-7 { display: flex; flex-wrap: wrap; justify-content: center; /* flex-direction: column; */ gap: 24px; } .box { outline: 1px solid grey; height: 100px; flex: calc(25% - 24px) 0 0; background-color: orchid; } <div class="container-7"> <div class=" box box1"></div> <div class="box box1"></div> <div class="box box1"></div> <div class="box box1"></div> <div class="box box1"></div> <div class="box box1"></div> <div class="box box1"></div> </div>

使元素适合容器而不放大

我有一个听起来很简单的问题要解决。假设我有一个包含页眉、内容和页脚的布局。然后我在内容中有一行项目，填充所有空间。内容中的每一项...

如何设置 HTML 文本格式以使其环绕关键字

所以我有这段代码，其中有一段带有关键字和文本。 我需要制定格式，以便关键字出现在其他关键字旁边，文本从关键字结束的地方开始，然后文本也换行

带有嵌套可滚动部分的 CSS Flexbox 布局

我正在使用 CSS Flexbox 进行布局，我需要使用主容器和嵌套子容器实现特定的结构，每个容器服务于 UI 的不同部分。主要目标是拥有

3 个元素的自适应布局，无需重复 HTML 元素。有可能吗？ [重复]

如何在小屏幕上交换块2和块3？没有重复的 HTML 标签，并且块的桌面布局也没有被破坏。没有绝对的立场。 。裹 { 显示：柔性； } .col { 弯曲-

如何将导航菜单放置在背景图像下方的标题中？

牙科样本页面 示例 HTML： 牙科页面 ... 示例 HTML： <header id="banner"> <h1>Dentistry Page</h1> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="Services/services.html">Services</a></li> <li><a href="About/about.html">About</a></li> <li><a href="Contact/contact.html">Contact</a></li> </ul> </nav> </header> CSS 示例： header { background-image: url(Images/Homepage-Feature-Image-Mobile.jpg); height: 250px; background-repeat: no-repeat; background-position: center; margin: 1em; padding: 1em; grid-area: header; } nav ul { margin: 0px; padding: 0px; list-style-type: none; display: flex; justify-content: center; align-items: flex-end; } nav ul li a { display: block; border: 1px solid; border-radius: .5em; padding: .25em; margin: .5em; } 到目前为止，我在尝试了几种不同的组合后得到了上面的代码。我试图将导航菜单置于背景图像下方，但仍在标题元素内。 我尝试了几种不同的风格，但发现这最接近我正在寻找的风格。代码可能很混乱，因为这是我的第一个项目，我刚刚学习，但我似乎无法在任何地方找到答案。我希望将菜单放在背景图片下方。 如果容器内有一个元素（例如 div 或 header），并且您将背景应用于该容器，则只要该元素位于该容器中，就无法将该元素移动到背景下方。如果您想将导航栏保留在标题内，则必须在标题内创建一个专门应用背景的 div，然后该 div 之后的任何内容都将显示在下方。 <header id="banner"> <div id='background'> <h1>Dentistry Page</h1> </div> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="Services/services.html">Services</a></li> <li><a href="About/about.html">About</a></li> <li><a href="Contact/contact.html">Contact</a></li> </ul> </nav> </header> #background { background-image: url(Images/Homepage-Feature-Image-Mobile.jpg); height: 250px; background-repeat: no-repeat; background-position: center; margin: 1em; padding: 1em; grid-area: header; } nav ul { margin: 0px; padding: 0px; list-style-type: none; display: flex; justify-content: center; align-items: flex-end; } nav ul li a { display: block; border: 1px solid; border-radius: .5em; padding: .25em; margin: .5em; }

2 个弹性容器并排显示

在 .maroon 部分内，我有两个 .whitewrap 部分。我想知道为什么它不换行到另一行并并排显示它们。表格应位于文本下方，并且