Tag: flexbox

弹性基础和宽度之间有什么区别？: 有关于这方面的问题和文章，但据我所知，没有任何结论。我能find的最好的总结是 flex-basis允许您在计算任何其他内容之前指定元素的初始/开始大小。它可以是百分比或绝对值。 …这本身并没有太多的关于柔性基础设置元素的行为。用我目前对flexbox的知识，我不明白为什么不能描述宽度。我想知道如何在实践中完全不同于宽度的 flex-basis ：如果我用flex来代替宽度（反之亦然），那么视觉上会有什么变化呢？如果我同时设置不同的值，会发生什么？如果他们有相同的价值会发生什么？是否有一些特殊的情况下使用宽度或弹性基础会有显着的差异，使用另一个？在与其他Flexbox风格（例如flex-wrap ， flex-grow和flex-shrink）结合使用时，宽度和flex基础有何不同？任何其他重大差异？编辑/澄清：这个问题已经被问到一个不同的格式什么完全弹性基础属性集？但是我觉得对flex-basis和width （或者height ）差异的更直接的比较或者总结会更好。

我如何保持两个并排高度相同的div？: 我有两个div并排。我想他们的高度是相同的，如果他们中的一个resize，保持不变。我无法弄清楚这一点。想法？为了弄清楚我这个令人困惑的问题，我希望两个盒子的大小始终相同，所以如果一个盒子因为放入文本而长大，另一个盒子的长度应该与高度相匹配。 <div style="overflow: hidden"> <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px"> Some content!<br/> Some content!<br/> Some content!<br/> Some content!<br/> Some content!<br/> </div> <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px"> Some content! </div> </div>

Flexbox：水平和垂直居中: 如何使用flexbox水平放置div，并在容器内垂直放置div。在下面的例子中，我希望每个数字在下面（在行中），这是水平居中。 .flex-container { padding: 0; margin: 0; list-style: none; display: flex; align-items: center; justify-content: center; } row { width: 100%; } .flex-item { background: tomato; padding: 5px; width: 200px; height: 150px; margin: 10px; line-height: 150px; color: white; font-weight: bold; font-size: 3em; text-align: center; } <div class="flex-container"> <div class="row"> <span class="flex-item">1</span> </div> <div class="row"> <span […]

Chrome / Safari没有填充flex父项的100％高度: 我想要一个具有特定高度的垂直菜单。每个孩子必须填写父母的高度，并有中间排列的文本。孩子的数量是随机的，所以我必须使用dynamic值。 .container包含随机数的子项（ .item ），它们必须始终填充父项的高度。为了实现我用flexbox。为了使文本链接与中间alignment，我使用display: table-cell技术。但是使用桌面显示需要使用100％的高度。我的问题是.item-inner { height: 100% }在webkit（Chrome）中不起作用。有没有解决这个问题？还是有一种不同的技术，使所有.item填充父母的高度与文本垂直alignment中间？这里的示例jsFiddle，应该在Firefox和Chrome中查看 .container { height: 20em; display: flex; flex-direction: column; border: 5px solid black } .item { flex: 1; border-bottom: 1px solid white; } .item-inner { height: 100%; width: 100%; display: table; } a { background: orange; display: table-cell; […]

Flex项目是否可以紧紧地alignment上面的项目？: 实际上，这是Pinterest的布局。但是，在线发现的解决scheme是用列包装的，这意味着容器无意中水平生长。这不是 Pinterest的布局，它不适合dynamic加载的内容。我想要做的是有一堆固定宽度和不对称高度的图像，水平放置，但在固定宽度容器的极限满足时， Flexbox能做到这一点，还是我不得不诉诸像砌体JS解决scheme？

Flexbox代码可用于除Safari之外的所有浏览器。为什么？: 带有列表标签的网格列，我需要按照每3列按正确的顺序显示，并为每个额外的HTML列表元素启用自动宽度。这是我的例子： <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> </ul> 我想要像这样转换输出： 1 4 7 10 2 5 8 11 3 6 9 12 这是我迄今为止所尝试过的，并且在其他所有浏览器上都能正常工作，但是与Safari浏览器不兼容，除非添加以下内容： display: -webkit-flex; 。 <style> ul { margin: 0; padding: 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: […]

为什么不弹性项目收缩过去的内容大小？: 我有4个flexbox列，一切正常，但是当我添加一些文本到列，并将其设置为一个大的字体大小，这是由于flexbox设置，使列比应该是更广泛。我试图使用word-break: break-word ，它帮助，但是，当我调整列的宽度非常小时，文本中的字母被分成多行（每行一个字母），但是列没有得到小于一个字母的宽度。尝试观看这个video： http : //screencast-o-matic.com/watch/cDetln1tyT （在开始，第一列是最小的，但当我调整窗口，这是最宽的列。我只是想尊重柔性设置总是..弹性尺寸1：3：4：4）我知道，设置字体大小和列填充到更小将有助于…但有没有其他解决scheme？我不能使用overflow-x: hidden 。 JSFiddle： https ：//jsfiddle.net/78h8wv4o/3/ .container { display: flex; width: 100% } .col { min-height: 200px; padding: 30px; word-break: break-word } .col1 { flex: 1; background: orange; font-size: 80px } .col2 { flex: 3; background: yellow } .col3 { flex: 4; background: skyblue } […]

在CSS Flexbox中，为什么没有“justify-items”和“justify-self”属性？: 考虑柔性容器的主轴和交叉轴：来源： W3C 要沿主轴alignment弹性项目，有一个属性： justify-content 要沿着横轴alignment弹性项目，有三个属性： align-content align-items align-self 在上图中，主轴是水平的，横轴是垂直的。这些是flex容器的默认方向。但是，这些方向可以很容易地与flex-direction特性互换。 /* main axis is horizontal, cross axis is vertical */ flex-direction: row; flex-direction: row-reverse; /* main axis is vertical, cross axis is horizontal */ flex-direction: column; flex-direction: column-reverse; （横轴始终垂直于主轴。）我在描述斧头的工作方面的重点是，在任何一个方向似乎都没有什么特别之处。主轴，横轴，重要性和flex-direction都相等，方便来回切换。那么为什么十字轴会有两个额外的alignment属性？为什么align-content和align-items合并到主轴的一个属性中？为什么主轴不能得到一个justify-self财产？这些属性将是有用的scheme：将柔性物品放置在柔性容器的拐angular处 #box3 { align-self: flex-end; justify-self: flex-end; } […]

嵌套柔性容器时正确使用柔性属性: 我在正确使用flexbox时遇到了问题，并希望得到关于嵌套父元素和子元素如何工作的一些说明。我知道孩子继承父母的柔性。但是如果你需要为孩子（孩子）弯曲一个孩子，它会被覆盖吗？什么是flexbox的正确使用？我什么时候需要申请display: flex为了孩子的（孩子），为了孩子的柔韧性，还是会覆盖孩子的父母的弹性？ .parent-container { display: flex; flex: 1 0 100%; } .child-container { flex: 1 1 50% } .baby-of-child-container { flex: 1 1 50%; } <div class='parent-container'> <div class='child-container'> <div class='baby-of-child-container'></div> <div class='baby-of-child-container'></div> </div> <div class='child-container'> <div class='baby-of-child-container'></div> <div class='baby-of-child-container'></div> </div> </div>

如何在FF 34.x中获得FF 33.x Flexbox行为？: 我们大量使用flexbox作为桌面应用程序，例如查看网络应用程序，并且一直在努力。但是使用最新的Firefox开发版（35.0a2），布局并不像预期的那样工作（它超出了视口）： http : //tinyurl.com/k6a8jde 这在Firefox 33.1中正常工作。我认为这与这里描述的flexbox更改有关： https : //developer.mozilla.org/en-US/Firefox/Releases/34/Site_Compatibility 但遗憾的是，我还不知道如何在FF 34或35.x中获得FF 33.x的行为。任何关于布局或如何更好地隔离问题的帮助表示赞赏。