程序设计 flexbox

5

Flexbox和Internet Explorer 11（在<html>中显示：flex？）

我正计划摆脱“浮夸”的布局，而将CSS flexbox用于将来的项目。我很高兴看到当前版本中的所有主要浏览器似乎都（以一种或另一种方式）支持flexbox。我前往“ Solved by Flexbox”看一些例子。然而，“置顶页脚”的例子似乎并没有在Internet Explorer 11.我的工作起到了一下周围，并把它加了工作display:flex的<html>和width:100%在<body> 所以我的第一个问题是：有人可以向我解释这种逻辑吗？我只是摆弄它，它起作用了，但是我不太明白为什么它那样起作用... 然后是“媒体对象”示例，该示例适用于所有浏览器，但Internet Explorer除外（您猜对了）。我也随便摆弄，但没有成功。因此，我的第二个问题是：是否有“干净的”可能性让Internet Explorer中的“媒体对象”示例正常工作？

117 html css flexbox cross-browser

10

Flexbox无法在IE中垂直居中

我有一个简单的网页，其中一些Lipsum内容位于页面的中心。该页面在Chrome和Firefox中运行良好。如果我减小窗口的大小，则内容将填充窗口直到不能填充为止，然后添加滚动条并在屏幕外向底部填充内容。但是，该页面不在IE11中居中。我可以通过弯曲主体来使页面在IE中居中，但是如果这样做，则内容开始从屏幕上移到顶部，并切断内容的顶部。以下是两种情况。请参阅相关的小提琴。如果问题不明显，请减小结果窗口的大小，以强制其生成滚动条。注意：此应用程序仅针对Firefox，Chrome和IE（IE11）的最新版本，它们都支持Flexbox的候选推荐标准，因此（理论上）功能兼容性不应该成为问题。编辑：使用全屏API全屏显示外部div时，所有浏览器均使用原始CSS正确居中。但是，离开全屏模式后，IE会恢复为水平居中和垂直顶部对齐。编辑：IE11使用非供应商特定的Flexbox实现。柔性箱（“ Flexbox”）布局更新在Chrome / FF中正确居中和调整大小，在IE11中不居中但正确调整大小小提琴：http : //jsfiddle.net/Dragonseer/3D6vw/ html, body { height: 100%; width: 100%; } body { margin: 0; } .outer { min-width: 100%; min-height: 100%; display: flex; align-items: center; justify-content: center; } .inner { width: 80%; } 正确地在所有位置居中，缩小时切掉顶部小提琴：http : //jsfiddle.net/Dragonseer/5CxAy/ html, body …

115 internet-explorer css flexbox internet-explorer-11

8

更改高度时保持图像宽高比

使用CSS flex box模型，如何强制图像保持其纵横比？ JS小提琴：http：//jsfiddle.net/xLc2Le0k/2/ 请注意，图像会拉伸或收缩以填充容器的宽度。很好，但是我们还可以拉伸或缩小高度以保持图像比例吗？的HTML <div class="slider"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> </div> 的CSS .slider { display: flex; } .slider img { margin: 0 5px; }

114 html css flexbox

2

使弹性项目正确浮动

我有一个 <div class="parent"> <div class="child" style="float:right"> Ignore parent? </div> <div> another child </div> </div> 父母有 .parent { display: flex; } 对于我的第一个孩子，我想简单地将项目浮动到右侧。我的其他div都遵循父级设置的flex规则。这有可能吗？如果没有，我该如何做float: rightunder flex？

114 html css flexbox

5

我的位置：使用flexbox时，粘性元素不粘性

我对此稍作停留，以为我会分享这个position: sticky+ flexbox陷阱：在将视图切换到Flex Box容器之前，我的粘性div工作正常，并且当将div包裹在flexbox父级中时，div突然变得不粘性。 .flexbox-wrapper { display: flex; height: 600px; } .regular { background-color: blue; } .sticky { position: -webkit-sticky; position: sticky; top: 0; background-color: red; } <div class="flexbox-wrapper"> <div class="regular"> This is the regular box </div> <div class="sticky"> This is the sticky box </div> </div> 运行代码段隐藏结果展开摘要 JSFiddle显示问题

105 css flexbox css-position sticky

2

将最后一个伸缩项目放置在容器的末尾

这个问题涉及具有完全css3支持（包括flexbox）的浏览器。我有一个Flex容器，里面有一些物品。他们都被认为可以灵活启动，但是我希望最后一个 .end项目可以被灵活终止。有没有一种好的方法，而无需修改HTML且不求助于绝对定位？ .container { display: flex; flex-direction: column; outline: 1px solid green; min-height: 400px; width: 100px; justify-content: flex-start; } p { height: 50px; background-color: blue; margin: 5px; } <div class="container"> <p></p> <p></p> <p></p> <p class="end"></p> </div> 运行代码段隐藏结果展开摘要

105 css flexbox

3

如何使Flexbox布局占用100％的垂直空间？

如何告诉Flexbox布局行占用浏览器窗口中的剩余垂直空间？我有一个3行的flexbox布局。前两行是固定高度，但第三行是动态高度，我希望它可以增长到浏览器的整个高度。我在第3行中有另一个flexbox，它创建了一组列。为了适当地调整这些列中的元素，我需要它们了解浏览器的整个高度-例如背景颜色和底部的项目对齐。主要布局最终将类似于以下内容： .vwrapper { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; //height: 1000px; } .vwrapper #row1 { background-color: red; } .vwrapper #row2 { background-color: blue; } .vwrapper #row3 { background-color: green; flex 1 1 auto; display: flex; } .vwrapper #row3 #col1 { background-color: yellow; …

102 html css flexbox

3

如何在全高度应用程序中组合flexbox和垂直滚动？

我想通过Flexbox使用全高应用。我display: box;在此链接中找到了使用旧的flexbox布局模块（和其他东西）所需的内容：CSS3 Flexbox全高应用程序和溢出对于仅支持旧版flexbox CSS属性的浏览器，这是正确的解决方案。如果我想尝试使用较新的flexbox属性，我将尝试在列为hack的同一链接中使用第二种解决方案：使用带有的容器height: 0px;。它使显示垂直滚动。我不太喜欢它，因为它引入了其他问题，并且它是解决方法，而不是解决方案。 html, body { height: 100%; } #container { display: flex; flex-direction: column; height: 100%; } #container article { flex: 1 1 auto; overflow-y: scroll; } #container header { background-color: gray; } #container footer { background-color: gray; } <section id="container" > <header id="header" …

101 html css flexbox

1

防止弹性物品拉伸

样品： div { display: flex; height: 200px; background: tan; } span { background: red; } <div> <span>This is some text.</span> </div> 运行代码段Hide results展开摘要我有两个问题，请：为什么基本上会发生这种情况span？什么是正确的方法，以防止其拉伸而不影响flex容器中的其他flex项目？

100 html css flexbox

8

在CSS FlexBox布局中自动调整图像大小并保持宽高比？

我使用了如下所示的CSS flex box布局：如果屏幕变小，它将变为：问题在于，无法调整图像的大小，从而保持原始图像的宽高比。如果屏幕变小，是否可以使用纯CSS和弹性框布局来调整图像大小？这是我的html： <div class="content"> <div class="row"> <div class="cell"> <img src="http://i.imgur.com/OUla6mK.jpg"/> </div> <div class="cell"> <img src="http://i.imgur.com/M16WzMd.jpg"/> </div> </div> </div> 我的CSS： .content { background-color: yellow; } .row { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; flex-direction: row; -webkit-box-pack: …

98 html css flexbox

2

CSS网格布局中的等高行

我认为使用Flexbox无法实现这一点，因为每一行只能是适合其元素的最小高度，但是可以使用更新的CSS Grid来实现吗？明确地说，我希望网格中所有行的所有元素的高度相等，而不仅仅是每行的高度都相等。基本上，最高的“单元格”应规定所有单元格的高度，而不仅仅是其行中的单元格。

98 css flexbox grid-layout css-grid

6

将内容居中放在Bootstrap 4的列中

我需要帮助解决问题，我需要将内容放在bootstrap4列的中心，请在下面找到我的代码 <div class="container"> <div class="row justify-content-center"> <div class="col-3"> <div class="nauk-info-connections"> </div> </div> </div>

95 twitter-bootstrap flexbox bootstrap-4

4

“位置：绝对”是否与Flexbox冲突？

我想div在屏幕顶部放置一根棍子，而不会影响其他元素，其子元素位于中间。 .parent { display: flex; justify-content: center; position: absolute; } <div class="parent"> <div class="child">text</div> </div> 运行代码段隐藏结果展开摘要当我添加该position: absolute行时，justify-content: center将变得无效。它们是否相互冲突，解决方案是什么？编辑谢谢大家，这是父母宽度的问题。但是我在React Native中，所以我不能设置width: 100%。尝试过flex: 1和align-self: stretch，都无法正常工作。我最终使用Dimensions来获取窗口的整个宽度，并且可以正常工作。编辑从较新版本的React Native（我使用0.49）开始，它接受width: 100%。

93 css react-native flexbox

7

React Native绝对定位水平中心

似乎position:absolute在使用中某个元素无法使用justifyContent或居中alignItems。有一种解决方法可以使用，marginLeft但即使使用尺寸来检测设备的高度和宽度，也无法在所有设备上显示相同的结果。 bottom: { position: 'absolute', justifyContent: 'center', alignItems: 'center', top: height*0.93, marginLeft: width*0.18, }, bottomNav: { flexDirection: 'row', },

92 position react-native flexbox absolute

3

Flex / Grid布局不适用于按钮或字段集元素

我正在尝试将<button>-tag的内部元素与flexbox的居中对齐justify-content: center。但是Safari不会将它们居中。我可以将相同的样式应用于任何其他标签，并且可以按预期工作（请参见<p>-tag）。仅按钮左对齐。尝试使用Firefox或Chrome，您会发现其中的区别。有什么我必须覆盖的用户代理样式？或对此问题有其他解决方案？ div { display: flex; flex-direction: column; width: 100%; } button, p { display: flex; flex-direction: row; justify-content: center; } <div> <button> <span>Test</span> <span>Test</span> </button> <p> <span>Test</span> <span>Test</span> </p> </div> 运行代码段隐藏结果展开摘要和jsfiddle：http： //jsfiddle.net/z3sfwtn2/2/

91 html css safari flexbox css-grid

Questions tagged «flexbox»