Tag: flexbox

CSS / JS / Jquery – 用于响应屏幕尺寸的Flex项目: 我的导航中有一个包含3个项目的站点，我希望保留在一行中。第一个是主菜单，它有主站点链接，应位于导航栏的左侧。第二个是联系信息，应该在导航栏中居中。第三个是auth菜单，它有登录/帐户链接等，应该在导航栏的右侧。 #nav{ height:50px; width:100%; position:relative; display:flex; } ul{ display:inline-block; height:50px; line-height:50px; list-style:none; } li{ display:inline-block; } #main_menu{ flex:3; text-align:left; } #header_numbers{ flex:4; text-align:center; } #auth_menu{ flex:3; text-align:right; } menu item 1 menu item 2 menu item 3 menu item 1 menu item 2 menu item 1 menu item 2 menu item 3 […]

CSS flex最后一个不完整的行项占用完整行项的宽度: 我正在创建一个flexbox; 容器具有max-width ，例如max-width = 500px ，子项目每个都具有min-width: 130px和flex-grow: 1以填充整个行空间。这是小提琴： https ： //jsfiddle.net/7wroxkhj/6/ 我想要实现的是，对于最后一行项目采用相同宽度的前面项目。即：项目＃7和项目＃8具有从1到6的相同宽度的项目。我怎样才能做到这一点？更新：欢迎JS解决方案！

在窗口resize时保持原始高度比的Flexbox行: 我的项目的主要目标是拥有可resize的flexbox div视图。我为#v1和#v2可resize的列。我也有可以resize的行，句柄是蓝色部分。现在我正在努力使窗户高度变化时行的高度保持高度比。我的方法有什么问题/为什么它没有按预期工作？ inheritance人我正在努力工作。我的方法：使用jQuery $(window).onResize() 。测量最后记录的高度与当前新高度之间的差异并计算差异。将此差异传递给名为resizeRows的函数，该函数将计算的差值作为参数。然后resizeRows将差异拆分并将其添加到3行中。逻辑可以在发布的JS代码的底部找到。问题：奇怪的行为。行似乎不保持其原始高度比。 HTML R-Theta Cartesian Longitudinal Console JS var mouseStartPosition = {}; var v1StartWidth, v2StartWidth, r1StartHeight, r2StartHeight, r3StartHeight; var views_cntnr = document.getElementById(‘views-cntnr’); var views_cntnr_height = views_cntnr.offsetHeight; // rows var r1 = document.getElementById(‘r1’); var r2 = document.getElementById(‘r2’); var r3 = document.getElementById(‘r3’); […]

使用jquery为多个浏览器设置flexbox显示？: 有点麻烦。我需要从display：none切换到显示：flex，display：flex-box和display：-ms-flexbox但它似乎打破了我的代码..这是我到目前为止所拥有的： $(elem).css({‘display’: ‘flex’, ‘display’: ‘-webkit-flex’, ‘display’:’-ms-flexbox’}); 虽然这有效： $(elem).css({‘display’: ‘flex’}) 我需要另外两个用于safari和IE10。有没有办法写这个，以免它破坏我的代码？ Jquery似乎对这种语法感到困惑。

为什么Chrome无法正确处理jQuery添加的flexbox项目？: 我正在研究一些基本的flexbox代码，当我注意到当我添加flex项目并且容器的方向设置为column或column-reverse时，Chrome显示奇怪的行为。这是一个简单的flexbox示例，其中的方向正确，方向设置为列并包装： #flexbox_container { border: 8px solid #ccc; padding: 10px; height: 200px; display: flex; flex-direction:column; flex-wrap: wrap; } .flex_item { background: #eee; margin: 4px; padding: 10px; } Item Item Item Item Item Item Item 正如所料，当列数过大而不适合容器时，会创建第二列，每个项具有相等的宽度。现在这是问题的一个例子。如果我们从一列的儿童弹性项开始，并使用jQuery继续添加更多，而不是像上面那样均匀划分，第一列占据整个宽度，新项目向侧面推出： $(‘button’).click(function() { $(‘#flexbox_container’).append(‘Item’); }) #flexbox_container { border: 8px solid #ccc; padding: 10px; height: 200px; display: flex; flex-direction: column; […]

HTML5 / CSS对齐列表项目取决于其他列的相互高度: 我得到以下用例：你可以看到三个相同的盒子：每个盒子都有一个大的矩形框，它有一个图片和可变的内容，因此具有可变的高度。其余部分由一个列表组成，它是垂直对齐的底部，因此它们应该达到相同的高度。我的目标是在每个框中“同步” 的高度。因此，在这样的标签中输入多少文本并不重要，设计应该自动处理分词并将内容对齐，就像它是一行一样。换句话说，就像Abhitalks所说，我想根据相互高度将列表项与其他内容列中的同行对齐。现在，我使用display flex来将列表垂直对齐到元素的底部。你可以在这里找到我用过的解决方案：浮动div的垂直对齐但是现在我遇到了问题，如果列表中没有相同的内容（每个列表项目超过两行，整个事情就会转移到顶部。但是，在某种程度上可以使用flexbox模拟行行为，但实际上是否具有列结构？我需要一个列结构，所以我可以轻松获得响应式布局。希望你了解我的问题提前致谢！更新：这是小提琴： http ： //jsfiddle.net/a1yr4u84/3/ 你可以看到，我在li的内容中做了一些内容，以使内容适合。 one two one two three one 但是，我无法控制李的文本数量。而且我不希望用户使用进行攻击，但让设计处理内容，所以我希望列中的列表行为像一行

在flexbox中过渡flex-grow的项目: 是否可以在flexbox中转换项目？单击时，我希望所有项目都折叠，但单击的项目除外。单击的那个应该使用容器中的所有可用空间。 // only works once! $(“.item”).click(function() { $(“.item”).not(this).each(function() { $(this).addClass(“collapse”); }); }); html, body { width: 100%; height: 100%; margin: 0; padding: 0; border: 0; overflow: hidden; } .container { flex-grow: 1; flex-shrink: 0; flex-basis: auto; display: flex; flex-direction: column; height: 100%; } .item { flex-grow: 1; flex-shrink: 1; flex-basis: auto; transition: all […]

如何检测CSS flex wrap事件: 我有灵活的容器里面有物品。如何检测flex wrap事件？我想将一些新的css应用于已经包装的元素。我想通过纯css检测包装事件是不可能的。但它将是非常强大的function！当元素换行到新行/行时，我可以尝试通过媒体查询“捕获”此断点事件。但这是一种可怕的方法。我可以尝试通过脚本检测它，但它也不是很好。我很惊讶，但简单的$（“＃element”）。resize（）不能检测flex容器的高度或宽度变化，以便将适当的css应用于子元素。大声笑。我发现只有这个jquery代码的例子才能使jquery事件监听位置发生变化但仍然非常糟糕。

使用flexbox的谷歌浏览器视口锚定扩展方向: Google Chrome中存在一个问题，即当元素放置在Flexbox容器内时，元素在相对于视口的不同方向上展开/折叠，其中相邻的 flex项目具有space-between center对齐内容。这在Firefox，IE11，Edge或Safari中不是问题，因为元素总是向下扩展。我很好奇： Chrome的行为是否符合某些规范？如果是这样，哪一个？如果没有，那么为什么在Chrome中完成？（恕我直言，点击触发器随机消失，这是一个可怕的用户体验。）某些人可以修改或禁用Chrome的行为吗？例如。通过CSS或元标记？更新1：如果可能的话，我已经向铬虫追踪者提交了问题＃739860，寻求Chromium开发者的见解/解释。以下是插入的两个示例。可以在此笔中找到描述该问题的完整测试套件： https ：//codepen.io/jameswilson/full/xrpRPg/我已选择在此示例中使用slideToggle，以便展开/折叠动画是动画的并且可见眼。详细信息标记也会出现相同的行为，但目前还没有跨浏览器支持，并且展开/折叠过于繁琐。例1：Chrome在合理的Flexbox之间的空间展开/折叠行为 $(‘button’).click(function() { $(this).next().slideToggle(); }) body { margin: 30px; font-family: sans-serif; } aside, aside div, summary, main, button, details p, button + p { background: rgba(0,0,0,.09); border: none; padding: 20px; margin: 0; } .flexcontainer { display: […]

检测浏览器中的flex-wrap支持: 我正在开发一个项目，其中我有一个响应网格，我已经使用flex wrap属性实现了。由于我支持IE9和更低版本的Firefox，版本28及更低版本，我如何通过javascript找到对它的支持。目前我只能通过条件语句识别IE9浏览器，但现在有人如何通过javascript检测Firefox旧版本。