如何垂直对齐 Bootstrap v4 模式对话框
在 Bootstrap 4 中垂直居中模式对话. 注意:添加以下要求是为了清楚地表明我正在寻找一种正确方法来垂直居中 Bootstrap 模式，涵盖所有可能的情况，在所有可能的设备上，在所有浏览器中.就我而言，我希望它用于在整个应用程序中重复使用相同模式的大型 SPA，因此我需要它在每种情况下都能正常工作. 应该: 保持模式内容可访问，在所有设备上，即使高于设备高度 适用于市场
..
flexbox相关内容
在 Safari 中的 flexbox 中拉伸图像
这只是 Safari 中的一个问题，在我看来像是一个 Safari 错误.这是一个fiddle，其中包含该问题的简化版本. 当图像位于设置了宽度且 height: auto 的嵌套 flexbox 元素中时，它会被拉伸……自动高度不起作用.是否需要添加一些额外的东西才能在 Safari 中工作? .container {显示:弹性；弹性方向:列；}.container 部分:第一个孩子
..
如何对齐单个 flexbox 项目(覆盖 justify-content)
您可以使用 align-self 覆盖弹性项目的 align-items.我正在寻找一种方法来覆盖弹性项目的 justify-content. 如果你有一个带有 justify-content:flex-end 的 flexbox 容器，但你希望第一项是 justify-content: flex-start，怎么可能能做到吗? 解决方案 好像没有justify-self，但是可以通
..
响应方格内的响应方格
我正在尝试制作一个响应式方块网格，网格中的每个方块都包含另一个响应式方块网格.想象一个数独板，它有 9 个方格，每个方格包含 9 个方格. 我从这个开始:响应方块网格并使用了 flexbox 答案，这里列出了:https://jsfiddle.net/patrickberkeley/noLm1r45/3/ 我最初认为，如果我在第一个网格中放置另一个响应式方形网格，它会起作用.但是内容
..
使用 CSS flexbox 重新排序整个页面
我需要使用 Flex 为移动设备更改整个页面的顺序.我可以在单个容器内进行此操作，但是是否可以对页面上的所有容器进行此操作?下面是一个例子: .outer {显示:弹性；弹性方向:列；}#一个 {订单:4；背景:#ccc;}#b {订单:1；背景:#aaa;}#C {订单:3；背景:#d33；}.一 {订单:2；背景:#aaa;}.二 {订单:5；背景:#aaa;}
..
如何使 CSS Sticky 与 Flex 问题一起工作
我有一个 HTML 结构，我似乎无法让 CSS 位置保持粘性. 我认为是因为它在 aside 容器内.如果我让 aside 坚持下去，它就会起作用. 我希望 .product-info div 具有粘性，并且当它碰到 div .content-other 时它会松开. 除非使用 flex，否则我可以从 aside 中移出 .personal-info 和 .product-inf
..
将一列的高度缩小到内容并将另一列的高度拉伸到相同的高度
我们有一个两列布局，一个蓝色列和一个绿色列.它应该在以下条件后表现: 两列的宽度相等. 蓝色列的高度应根据其内容高度确定，不考虑绿色列. 绿色列应始终与蓝色列具有相同的高度.所以绿色列的高度应该完全由蓝色列的高度/蓝色列的内容决定. 位于绿色列内的灰色图像应拉伸到绿色列的高度，但保留尺寸. 有没有办法使用 flexbox 或其他 CSS 技术来实现这一点? 解决
..
Flex-grow 没有按预期工作(弹性项目没有我期望的宽度)
JSFiddle 我正在尝试使用 flex CSS 属性将一组元素放入一个整洁的小盒子中. 它在 IE10 中看起来和我想要的完全一样，但 Chrome 显示它非常不同.我基本上有: 容器 选择框 (flex:5)，应该足够宽以显示 D，但不能更宽. 文本输入(flex:10)，应该占据contains宽度的一半多一点 确认按钮 (flex:6)，应该足够宽以包含其文本，但
..
如何使用 Flexbox 使用特定项目开始新行?
这是一个非常简单的练习，但我似乎找不到解决它的巧妙方法(刚开始学习 HTML 和 CSS). 我需要红色的第 5 个块(“bloque 5")位于其他四个使用 Flexbox 的下方.结果应该是: 有人可以帮我解决这个问题吗?这是我目前所拥有的: div {边距:5px；边框:1px纯粉色；填充:5px；字体系列:arial、sans-serif；字体大小:14px；}.cont
..
在 CSS Flex/Grid 中使用带有 `justify-content`、`justify-items` 或 `justify-self` 的 `baseline` 值是否有意义?
MDN align-content, justify-content 和 justify-items 将 baseline 描述为它们的可能值之一.虽然 baseline 在与 align-items 或 align-self 一起使用时有意义，但我不明白它如何与 justify-content、justify-items、justify-self 和 align-content 属性.你有什么建
..
如何仅使用 Flex 将单行上的按钮组对齐?
我试过了: 左、中、右动作按钮.父母{宽度:600px；背景颜色:黄色；}.itemleft {显示:弹性；justify-content: flex-start;}.itemcenter {显示:弹性；对齐内容:居中；}.itemright {显示:弹性；justify-content: flex-end;}.bs {背景颜色:绿色；白颜色;宽度:7
..
具有绝对定位的工具提示元素被容器裁剪并溢出:自动
我在模态中有一个工具提示. 有没有办法可以避免工具提示被带有 overflow 的容器剪掉? 我需要模态对话框来处理内容溢出，所以我无法从中删除 overflow: auto. body {边距:0；}.容器 {显示:弹性；高度:100vh；对齐项目:居中；对齐内容:居中；}.modal-dialog {显示:块；高度:50%；宽度:50%；背景:青色；边框:1px 实心；溢出:
..
Flexbox 布局在 Internet Explorer 10 中不起作用
http://jsfiddle.net/J8rL7/87/ 根据 http://caniuse.com/#feat=flexbox 它应该适用于带有供应商前缀的 IE10. 但它没有！ 更新:我刚刚检查了最新的 Firefox，它看起来完全坏了. 为什么?
..
如何在 IE11 中使 flex-end 工作
我试图让 justify-content: flex-end; 工作，用于溢出隐藏的 DIV 内容，在 IE11 中，但没有成功. 在尝试了几种组合后，我创建了一个在 Chrome 中有效但在 IE11 中无效的最小片段: .token-container {宽度:200px；空白:nowrap；溢出:隐藏；填充:5px；box-shadow: 1px 1px 2px 1px 银色插图
..
在包装上居中 flex 项目
我已经设置了一个包含两个项目的 flexbox，它们应该在普通屏幕的左侧和右侧. 如果屏幕不够大，无法将两者并排显示，则它应该环绕，但它们应该居中，而不是在左侧对齐. 我尝试了不同的解决方案(例如在子项上使用 margin: auto)，但即使在同一行中，它们也更接近中心. 这是一个简化的例子: .container {显示:弹性；align-items: flex-end
..
为什么带有内容的 ::before 伪元素在“display: flex"容器中只去掉了前导空格?
参见 jsfiddle 请注意，除了伪元素 (::before.content) 外，每个元素的前导和尾随空格都被相当一致地去除，它只修剪了前导空格.为什么是这样?我希望也删除尾随空格 .flexy {显示:inline-flex；}.noname::before {内容:“有"；} 一个女孩no name
..
CSS 换行文本在 IE 中不起作用
有些样式在 Chrome 和 Firefox 中都可以正常工作，但在 IE 中却不能. 我面临的问题基本上是应用的特定样式在 Chrome 中运行良好，但在 IE 中不起作用.文本不包含在列中. 如何重现?首先在 Chrome 或 Firefox 中查看 this fiddle，然后然后在 IE 中进行. 为了简化操作，请直接从这里尝试: .Container {显示:弹性
..
如何仅使用 CSS Flex 在一行上居中和右对齐
尝试了很多这样的变体，但无法让它工作.这是最后一次尝试: .parent {显示:弹性；//对齐内容:居中；宽度:600px；背景颜色:黄色}.C {//弹性:1 1 0;//文本对齐:结束；左边距:自动；右边距:自动；背景颜色:青色；}.e {//弹性:1 1 0;//文本对齐:结束；背景颜色:灰色；}.bs {背景颜色:绿色；白颜色;宽度:70px；} 使用 html:
..
在来自 flex 容器的文本上设置省略号
有什么方法可以使以下 HTML 行为: 文本垂直居中 文本为单行，并用 ...(省略号)截断 我可以得到 1 或 2，但不能同时得到. 请注意，HTML 无法修改，它是由第三方库生成的.我们只有改变css的能力. .target {宽度:300px；高度:50px；边框:实心 1px 红色；溢出:隐藏；空白:nowrap；文本溢出:省略号；显示:弹性；/*改为阻塞省略号*
..