Tag: flexbox

CSS将一个项目与flexboxalignment

https://jsfiddle.net/vhem8scs/ 是否有可能有两个项目左alignment，一个项目与flexbox正确alignment？ 链接显示更清楚。 最后一个例子是我想要实现的。 在flexbox中，我有一个代码块。 用float我有四块代码。 这是我喜欢flexbox的原因之一。 HTML <div class="wrap"> <div>One</div> <div>Two</div> <div>Three</div> </div> <!– DESIRED RESULT –> <div class="result"> <div>One</div> <div>Two</div> <div>Three</div> </div> CSS .wrap { display: flex; background: #ccc; width: 100%; justify-content: space-between; } .result { background: #ccc; margin-top: 20px; } .result:after { content: ''; display: table; clear: both; } .result div { […]

flexbox将列左右alignment

学习如何使用flexbox，通过使用典型的css，我可以将两列中的一列左移，而另一列右移一列之间的空格。 我将如何做到这一点与flexbox？ http://jsfiddle.net/1sp9jd32/ #container { width: 500px; border: solid 1px #000; display: -webkit-flex; display: -ms-flexbox; display: flex; } #a { width: 20%; border: solid 1px #000; } #b { width: 20%; border: solid 1px #000; height: 200px; } <div id="container"> <div id="a"> a </div> <div id="b"> b </div> </div>

在什么情况下Flex-shrink应用于柔性元素，它是如何工作的？

我已经玩过这个漂亮的CSS Flex的演示页面 ，我理解了大部分的概念，但是我无法看到flex-shrink在工作中。 无论我在那里应用什么设置，我都看不到页面上的差异。 从规格 ： <“柔性成长”> 此组件设置“flex-grow”longhand，并指定flex增长因子，该因子决定了在分配正空闲空间时flex项目相对于flex容器中其余Flex项目将增长的程度。 省略时，设为“1”。 <“柔性缩水”> 此组件设置“flex-shrink”longhand并指定柔性收缩因子，该因子决定在分配负空闲空间时，Flex项目相对于Flex容器中其余Flex项目收缩的程度。 省略时，设为“1”。 柔性收缩因子在分配负空间时乘以柔性基础。 在什么情况下应用flex-shrink （即负空间分布时）？ 我已经尝试过在flexbox元素上设置宽度的自定义页面，并且在里面的元素的宽度（min-）使溢出，但它似乎不是描述的情况。 它已经被支持了吗？ 作为解决scheme，链接的演示中的一组选项或者JSFiddle-like现场演示将非常感谢。

什么是弹性基础属性设置？

将max-width或width设置为弹性项目而不是flex-basis有什么区别？ 它是flex-grow/shrink属性的“突破点”吗？ 而当我设置flex-wrap: wrap行浏览器如何决定在哪一点下移项目到新行？ 是根据它们的宽度还是“弹性基础”？ 例如： http : //jsfiddle.net/wP5UP/最后两个框有相同的flex-basis: 200px ，但是当窗口在300px和400px之间时， 只有其中一个向下移动。 为什么？

如何使用CSS flexbox设置固定宽度的列

CodePen： http ://codepen.io/anon/pen/RPNpaP。 我想要红色框只有25 em宽，当它在并排视图 – 我试图通过设置CSS内部的 @media all and (min-width: 811px) {…} 至 .flexbox .red { width: 25em; } 但是当我这样做时，会发生这种情况： View post on imgur.com 任何想法我做错了什么？ 非常感谢。

弹性基础flexbox中的100％：Firefox的全高，而不是Chrome

我想要一列任意数量的div，每个div的宽度为100％，高度为100％，因此最初可以看到一列，而其他列则向下溢出。 我已经设置的div有flex: 0 0 100%; ，在父div的内部display: flex和flex-direction: column来实现这一点。 父div本身具有未知高度，所以它也是display: flex的子display: flex和flex-direction: column ，设置为flex: 1 0 0以获取其容器中的剩余空间。 在Firefox的输出是我想要的： 但是，不是在Chrome中： 如何在Chrome中实现Firefox的风格，没有Javascript？ 您可以在http://plnkr.co/edit/WnAcmwAPnFaAhqqtwhLL?p=preview以及带有flex-direction: row的相应版本中看到这一点，该flex-direction: row可以在Firefox和Chrome中始终如一地运行。 作为参考，完整的CSS .wrapper { display: flex; flex-direction: column; height: 150px; width: 200px; border: 4px solid green; margin-bottom: 20px; } .column-parent { flex: 1 0 0; display: flex; flex-direction: column; border: 2px solid blue; } […]

为什么Flex项目的宽度和高度会影响Flex项目的渲染方式？

Flexbox中具有max-height样式的图像呈现不同的呈现方式，具体取决于是否设置了height和width属性。 具有设置为图像的真实宽度/高度的属性的属性将保留其宽高比，但没有属性的属性会尊重max-height并显示压扁。 .flex-parent { display: flex; max-height: 10vh; } <div class="flex-parent"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg"> <img width="320" height="240" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg"> </div> 这就是Chrome 58中出现的情况（在Firefox 54中也是如此）。 为什么他们呈现不同？ pipe理这种行为的规则是什么？ 我的（显然是不正确的）理解是，高度和宽度属性覆盖图像加载时发现的内在高度和宽度，如果高度和宽度属性等于图像的尺寸，则一旦图像渲染应该没有区别已加载。 上下文正在制作一个响应式图像的页面，其中每个图像 可以有独特的原始尺寸 在加载时不会导致回stream，即在初始渲染时保留正确的空间（因此使用高度和宽度属性） 可以一次适合所有的屏幕（因此我搞乱在CSS中） 青蛙图片来自https://en.wikipedia.org/wiki/File:Red_eyed_tree_frog_edit2.jpg

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

我使用了如下所示的CSS弹性框布局： 如果屏幕变小，则变成： 问题在于图像不能保持原始图像的纵横比。 如果屏幕变小，是否可以使用纯CSS和popup框布局来调整图像大小？ 这是我的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: center; -moz-box-pack: center; box-pack: center; justify-content: center; […]

我怎样才能让我的柔性版式占据100％的垂直空间？

我怎样才能告诉flexbox布局行消耗浏览器窗口中剩余的垂直空间？ 我有一个3行的flexbox布局。 前两行是固定的高度，但第三个是dynamic的，我希望它增长到浏览器的整个高度。 我有第3行中的另一个flexbox创build一组列。 为了正确调整这些列中的元素，我需要他们理解浏览器的全部高度 – 例如底色的背景颜色和项目alignment。 主要的布局最终会像这样： .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; […]

为什么flexbox拉伸我的形象？

Flexbox具有将图像拉伸到自然高度的行为。 在其他（更具体）的话，如果我有一个带有子图像的flexbox容器，并调整该图像的宽度，高度根本不调整，图像被拉伸。 <div> <img src="https://loremflickr.com/400/300" > <h4>Appify</h4> <p> some text </p> </div> 和这个样式表 div { display: flex; flex-wrap: wrap; } img{ width: 50% } 我加了这个codepen来说明我的意思。 这是什么原因？