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的行为。 任何关于布局或如何更好地隔离问题的帮助表示赞赏。