flexbox 相关问题

我有一个使用 Flexbox 来居中其项目的 div。在这个 div 中我有 3 个元素，其中之一是图像。我有一个 div 使用 flexbox 将其项目居中。在这个div里面我有3个元素，其中一个是图像。 <div id="flex-container"> <div id="container1"></div> <img src="#" alt=""> <div id="container2"></div> </div> #container1和#container2有自己的高度，img应该使用#flex-container内部的剩余高度。此代码片段适用于 Firefox，但不适用于 Chrome。 (jsfiddle) #flex-container{ height: 300px; width: 500px; display: flex; display: -webkit-flex; flex-flow: column nowrap; -webkit-flex-flow: column nowrap; justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; border: 5px solid black; } #container1, #container2{ height: 100px; width: 300px; background: orange; flex: 1 0 auto; -webkit-flex: 1 0 auto; } <div id="flex-container"> <div id="container1">300x100 px</div> <img src="http://i.imgur.com/RRUe0Mo.png" alt=""> <div id="container2">300x100 px</div> </div> Chrome 需要为 Flexbox 添加 -webkit- 前缀，但问题似乎不是这个。会发生什么？是浏览器错误还是我忘记了什么？您需要克服两个问题： Firefox 自己解决了这两个问题，但 Chrome 需要帮助。问题#1 第一个问题是弹性项目默认不能小于其内容。弹性项目的初始设置是 min-height: auto。因此，具有替换元素的 Flex 项目（例如图像）将默认为图像的固有大小。该项目无法变小，除非您覆盖初始设置（使用 min-height: 0）。 #flex-container { height: 300px; width: 500px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; border: 5px solid black; } #container1, #container2 { height: 100px; width: 300px; background: orange; flex: 1 0 auto; } img { min-height: 0; } /* NEW */ <div id="flex-container"> <div id="container1">300x100 px</div> <img src="http://i.imgur.com/RRUe0Mo.png" alt=""> <div id="container2">300x100 px</div> </div> 可以在这里找到此问题的完整解释：为什么弹性项目不会缩小到超过内容大小？问题#2 然后你遇到了第二个问题：保持纵横比。这是柔性容器中的常见问题。一种选择是定义图像的高度： #flex-container { height: 300px; width: 500px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; border: 5px solid black; } #container1, #container2 { height: 100px; width: 300px; background: orange; flex: 1 0 auto; } img { min-height: 0; height: 100px; } /* NEW */ <div id="flex-container"> <div id="container1">300x100 px</div> <img src="http://i.imgur.com/RRUe0Mo.png" alt=""> <div id="container2">300x100 px</div> </div> 感谢评论中的@alexandr，这对我来说是完美的解决方案： object-fit: contain; // done on the image resizes the height 我只是把它放在这里，因为这是一个正确的答案，可能会作为评论而被错过。

css google-chrome flexbox responsive-images

回答 2 投票 0

如何在html中平均分割图像？

对于我的代码，我似乎无法让弹性框平等地分割屏幕，以便在右侧有 2 个水平图像和 1 个完整图像。图片是我的布局示例

html css flexbox

回答 1 投票 0

将 div 拉伸到 Flexbox 中父级 div 的完整高度[重复]

如何使用 Flexbox 将 .body div（黄色背景）拉伸到父 div .con 的完整高度？ HTML： ... 如何使用 Flexbox 将 .body div（黄色背景）拉伸到父 div .con 的完整高度？ HTML： <div class="flex-container"> <div class="con con-1"> <div class="head"> Lorem ipsum dolar sit amit, de decto. </div> <div class="body"> Lorem ipsum dolar sit amit, de decto. </div> </div> <div class="con con-2"> <div class="head"> Lorem ipsum dolar sit amit, de decto. </div> <div class="body"> Lorem ipsum dolar sit amit, de decto. Lorem ipsum dolar sit amit, de decto. Lorem ipsum dolar sit amit, de decto. </div> </div> <div class="con con-3"> <div class="head"> Lorem ipsum dolar sit amit, de decto. </div> <div class="body"> Lorem ipsum dolar sit amit, de decto. Lorem ipsum dolar sit amit, de decto. Lorem ipsum dolar sit amit, de decto. Lorem ipsum dolar sit amit, de decto. Lorem ipsum dolar sit amit, de decto. </div> </div> </div> CSS： .flex-container { display: flex; gap: 10px; flex-direction: row; justify-content: flex-start; } .con { width: 33%; border: 1px solid #000; } .head { background: #eee; padding: 15px; } .body { background: yellow; padding: 15px; } JSFiddle 链接我尝试了一切，浏览器搜索等，我希望它能在这里得到解决，而且我认为这对社区来说是一个有价值的问题您需要 .con 元素也为 display: flex，这样您就可以让它们的子元素填充该空间。例如 .flex-container { display: flex; gap: 10px; flex-direction: row; justify-content: flex-start; } .con { width: 33%; border: 1px solid #000; display: flex; /* make it a flex box */ flex-direction: column; /* have things be verticle */ } .head { background: #eee; padding: 15px; } .body { background: yellow; padding: 15px; flex-grow: 1; /* new style to say fill the space */ }

html css flexbox

回答 1 投票 0

我们可以设计溢出滚动的样式吗？

我在我的React Web应用程序中使用overflow:auto。但滚动 ID 很宽。我可以减少div组件滚动的宽度吗？下面是代码片段 - 我在我的React Web应用程序中使用overflow:auto。但滚动 ID 很宽。我可以减少div组件滚动的宽度吗？下面是代码片段 - <div style={{display:"flex", overflow:"auto"}}> {....} </div> 如果您想通过内联样式专门控制React组件中滚动条的宽度，您可以使用Firefox的scrollbarWidth属性以及IE和Edge的MsOverflowStyle。 import React from 'react'; const MyComponent = () => { const containerStyle = { display: 'flex', overflow: 'auto', scrollbarWidth: 'thin', // For Firefox MsOverflowStyle: 'none', // For IE and Edge }; return ( <div style={containerStyle}> {/* Your content goes here */} </div> ); }; export default MyComponent; 在此示例中： scrollbarWidth: 'thin' 用于 Firefox 设置细滚动条。 MsOverflowStyle: 'none' 用于 IE 和 Edge 隐藏默认滚动条。请记住，并非所有浏览器都支持scrollbarWidth，因此此解决方案可能不适用于所有地方。另请注意，由于浏览器安全性和一致性问题，样式滚动条通常受到限制。如果对滚动条外观的精确控制至关重要，您可能需要考虑使用自定义滚动条库或提供此级别自定义的第三方组件。 React 中自定义滚动条库的建议我正在寻找为滚动条提供高级自定义选项的 React 库的建议。以下是我发现的一些选项：反应自定义滚动条 npm：反应自定义滚动条描述：该库允许您完全自定义 React 应用程序中滚动条的外观和行为。反应滚动条 npm：反应滚动条描述：React-scrollbar 是一个简单、轻量级的滚动条组件，可以自定义以适合您的设计。反应完美滚动条 npm：react-perfect-scrollbar 描述：该库为 React 提供了一个完美的滚动条组件，具有多种自定义选项。 simplebar-react npm：simplebar-react 描述：SimpleBar 是一个简单且轻量级的自定义滚动条库。它不是特定于 React 的，但有一个可用的 React 包装器。反应滚动条自定义 npm：react-scrollbars-custom 描述：该库为React提供了一个高度可定制的滚动条组件。在选择库之前，请务必检查其文档和功能，看看它们是否满足您的特定要求。每个库可能有自己的一组功能、API 和自定义选项。

css reactjs flexbox scroll overflow

回答 1 投票 0

CSS Flex 容器 - 对齐内容

我有以下html代码，我在证明内容时面临。弹性容器{ 显示：柔性； } 我有下面的html代码，我在证明内容时面临。 <style> flex-container { display: flex; } </style> <div class = "content" style="border: 2px solid;"> <flex-container> <flex-item class="flex1"> <div> <table> <tr><th>1</th><td>Left line1</td></tr> <tr><th>2</th><td>Left line2</td></tr> <tr><th>3</th><td>Left line3</td></tr> <tr><th>4</th><td>Left line4</td></tr> </table> </div> </flex-item> <flex-item class="flex2"> <div> <table> <tr><th>1</th><td>Right line1</td></tr> <tr><th>2</th><td>Right line2</td></tr> <tr><th>3</th><td>Right line3</td></tr> <tr><th>4</th><td>Right line4</td></tr> </table> </div> </flex-item> <flex-container> <table style = "border: 1px solid black;"> <th>Column1</th> <th>Column2</th> <th>Column3</th> <th>Column4</th> <th>Column5</th> <tr> <td>Data1 for Column1</td> <td>Data1 for Column2</td> <td>Data1 for Column3</td> <td>Data1 for Column4</td> <td>Data1 for Column5</td> </tr> <tr> <td>Data2 for Column1</td> <td>Data2 for Column2</td> <td>Data2 for Column3</td> <td>Data2 for Column4</td> <td>Data2 for Column5</td> </tr> </table> </flex-container> </div> 目前的结果是，预期结果，尝试使用对齐内容方法，无法使其对齐。任何建议将不胜感激 .flex1 { justify-content: flex-start; } .flex2 { justify-content: flex-end; } “flex-items”的父容器是“flex-container”，因此当您想要调整内容时，应将“justify-content:space- Between”放置到父容器而不是子容器本身。此外，对于底部容器，如果要使其扩展到视口的宽度，则应将表格的宽度设置为 100%，因为父容器具有“display:flex”样式。也许您可以将底部表格容器更改为“flex-item”以保持一致性并更轻松地管理样式。 flex-container{ display: flex; flex-wrap: wrap; justify-content: space-between; } .flex-3{ width: 100%; } .flex-3 table{ width:100%; } <div class = "content" style="border: 2px solid;"> <flex-container> <flex-item class="flex1"> <div> <table> <tr><th>1</th><td>Left line1</td></tr> <tr><th>2</th><td>Left line2</td></tr> <tr><th>3</th><td>Left line3</td></tr> <tr><th>4</th><td>Left line4</td></tr> </table> </div> </flex-item> <flex-item class="flex2"> <div> <table> <tr><th>1</th><td>Right line1</td></tr> <tr><th>2</th><td>Right line2</td></tr> <tr><th>3</th><td>Right line3</td></tr> <tr><th>4</th><td>Right line4</td></tr> </table> </div> </flex-item> <flex-container class="flex-3"> <table style = "border: 1px solid black;"> <th>Column1</th> <th>Column2</th> <th>Column3</th> <th>Column4</th> <th>Column5</th> <tr> <td>Data1 for Column1</td> <td>Data1 for Column2</td> <td>Data1 for Column3</td> <td>Data1 for Column4</td> <td>Data1 for Column5</td> </tr> <tr> <td>Data2 for Column1</td> <td>Data2 for Column2</td> <td>Data2 for Column3</td> <td>Data2 for Column4</td> <td>Data2 for Column5</td> </tr> </table> </flex-container> </flex-container> </div>

html css flexbox

回答 1 投票 0

当我们为项目设置边距或间隙时，为什么弹性项目会换行？

当我们给 Flex 容器添加间隙时，如果我们将宽度设置为 1/3，它会自动将一项向下包裹。我们知道边距不包含在宽度（框内容）中。如果我们添加 m 也会得到相同的结果...

css flexbox

回答 1 投票 0

导航栏的中心部分，将导航栏的一部分向右移动

我在我的 React 项目中创建了一个导航栏。我想将“center-nav-bar”div 居中，并将“right-nav-bar”div 置于页面右侧。我尝试过“浮动”，但...

html css reactjs flexbox

回答 1 投票 0

如何将一个弹性项目与容器顶部对齐，而其他项目则遵循 justify-content: center？ [重复]

我有一个包含两个项目的网格，第一个项目是一个弹性容器。 html: 锚定到顶部？它... 我有一个包含两个项目的网格，第一个项目是一个弹性容器。 html: <div class = "grid"> <div class="flex"> <h1>Anchor To Top?</h1> <div>item</div> <div>item</div> <div>item</div> <div>item</div> <div>item</div> </div> <div class = "other-grid-item"> Other grid item </div> </div> CSS： .grid{ display: grid; grid-template-columns: 1fr 2fr; height: 100vh; } .flex{ display: flex; flex-direction: column; justify-content: center; background-color: blue; } 您可以在此处查看示例：https://jsfiddle.net/tc9kdhb1/3/。有没有办法让 h1 保持位于 flex 容器的顶部，而其他弹性项目位于剩余空间的中心？我尝试在 position: absoltute 上使用 h1，但随后该元素不再正确适合容器。预先感谢您的帮助。如果你方便的话，你可以将其他div包裹在一个父div中并给它flex: 1。 .grid { display: grid; grid-template-columns: 1fr 2fr; height: 100vh; } .flex { display: flex; flex-direction: column; background-color: blue; } .other-grid-item { background-color: yellow; } .content { display: flex; flex-direction: column; justify-content: center; flex: 1; } <div class="grid"> <div class="flex"> <h1>Anchor To Top?</h1> <div class="content"> <div>item</div> <div>item</div> <div>item</div> <div>item</div> <div>item</div> </div> </div> <div class="other-grid-item"> Other grid item </div> </div> 您已经通过代码实现了这一目标；您只是忘记对齐文本。 .grid { display: grid; grid-template-columns: 1fr 2fr; height: 100vh; } .flex { display: flex; flex-direction: column; justify-content: center; background-color: blue; } .item { text-align: center; } <div class="grid"> <div class="flex"> <h1>Anchor To Top?</h1> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> </div> <div class="other-grid-item"> Other grid item </div> </div>

css flexbox css-grid

回答 2 投票 0

有什么方法可以用flexbox做到这一点吗？

我正在尝试做一些我认为简单的事情，但我找不到正确的解决方案。我想用 Flexbox 调整 div 中的两个子元素。第一个孩子应该在顶部，并且

css flexbox

回答 1 投票 0

使弹性项目表现得像流体文本

有没有办法制作这样的弹性项目：。容器{ 显示：柔性；弹性包裹：包裹；最大宽度：200px；背景：红色； } div:not(.container){ word-break: 断词；背景...

html css flexbox

回答 1 投票 0

当弹性项目溢出容器时更改 justify-content 值

看下面的小提琴https://jsfiddle.net/27x7rvx6 CSS（#test 是 flexbox 容器，.items 是它的子容器）：＃测试 { 显示：柔性； flex-flow：行现在包裹；调整内容：分...