Tag: flexbox

与CSS等高的列: 我想为我的CSS表使用百分比。不幸的是，它不适合我。这个代码有什么问题？我应该使用flexbox而不是表？我想用表，因为我想要相同的高度栏。 ul { list-style: none; margin: 0; display: table; table-layout: fixed; width: 100%; } li { width: 50%; display: table-cell; } <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul>

flex属性不能在IE中工作: 我一直无法确定为什么flexbox不能在IE 11中工作。为了testing，我从CodePen获得了一个非常简单的flexbox布局，并粘贴了下面的信息。 Chrome按预期工作; IE11失败。在Chrome上运行的布局成功的图像： IE11上的布局失败的图像 body { background: #333; font-family: helvetica; font-weight: bold; font-size: 1.7rem; } ul { list-style: none; } li { background: hotpink; height: 200px; text-align: center; border: 2px solid seashell; color: seashell; margin: 10px; flex: auto; min-width: 120px; max-width: 180px; } .flex { display: flex; justify-content: flex-start; flex-wrap: wrap; } […]

Flexbox不处理button或字段集元素: 我试图用flexbox的justify-content: center标记<button> -tag的内部元素。但是Safari不会将它们居中。我可以将相同的样式应用于任何其他标签，并按预期工作（请参阅<p> -tag）。只有button是左alignment的。尝试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/

如何在Flexbox中禁用相同高度的列？: 我有三个元素，我试图在我的布局alignment。首先，我有一个div的反馈，然后一个searchinput，然后一个div元素的build议。我希望第一个和最后一个元素的宽度为20％，searchinput的宽度为60％。使用Flexbox我达到了我想要的。但是，有一个function，所有的divs最高的元素。这意味着当search结果popup时，反馈和build议元素与searchdiv一起增长，导致布局混乱。有没有一个诀窍，不发展最高元素的divs？只要使div（ #feedback和#suggestions ）有他们的内容的高度？ #container_add_movies { display: flex; } #container_add_movies #feedback { width: 20%; background-color: green; } #container_add_movies #search { width: 60%; background-color: red; } #container_add_movies #suggestions { width: 20%; background-color: yellow; } <div id='container_add_movies'> <div id='feedback'> Feedback </div> <div id='search'> Search <br>Search <br>Search <br>Search <br>Search <br>Search <br>Search […]

为什么Firefox的flex项目没有百分比填充/边距？: 我想在flexbox里有一个方形的div。所以我使用： .outer { display: flex; width: 100%; background: blue; } .inner { width: 50%; background: yellow; padding-bottom: 50%; } <div class="outer"> <div class="inner"> <a>hehe</a> </div> </div> 这在Chrome中正常工作。但在Firefox中，父母只挤到一行。我如何在Firefox中解决这个问题？我使用版本44。您也可以通过https://jsbin.com/lakoxi/edit?html,css查看代码

定位最后一行的弹性项目: 我的问题是，我想要的可变范围宽度的柔性盒，一切运作良好，但不是在最后一行。即使在行不满儿童（最后一行）的情况下，我也希望所有孩子都有同样的维度。 #products-list { position:relative; display: flex; flex-flow: row wrap; width:100%; } #products-list .product { min-width:150px; max-width:250px; margin:10px 10px 20px 10px; flex:1; } 在JSFiddle的例子中，我创build了一个dynamic的情况。我的flex div可以缩小到150px，长到250px，但所有的都必须是相同的大小（显然我想要一个CSS解决scheme，JS我知道的方式）。

居中并右alignmentflexbox元素: 我想让A B和C在中间alignment。我怎样才能让D完全走向正确的？之前：后：这样做的最佳做法是什么？ ul { padding: 0; margin: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; } li { display: flex; margin: 1px; padding: 5px; background: #aaa; } li:last-child { background: #ddd; /* magic to throw to the right*/ } <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> </ul> https://jsfiddle.net/z44p7bsx/

如何居中柔性容器，但左alignmentFlex项目: 我想弹性项目居中，但当我们有第二行，有5（从下面的图像）下1，而不居于父母。以下是我的一个例子： ul { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; } li { list-style-type: none; border: 1px solid gray; margin: 15px; padding: 5px; width: 200px; } <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> http://jsfiddle.net/8jqbjese/2/

当flexbox项目以列模式包装时，容器不会增加其宽度: 我正在嵌套的flexbox布局应该如下工作：最外层（ ul#main ）是一个水平列表，在向其中添加更多项目时，该列表必须向右扩展。如果它变得太大，应该有一个水平的滚动条。 #main { display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; /* …and more… */ } 这个列表（ ul#main > li ）的每个项目都有一个标题（ ul#main > li > h2 ）和一个内部列表（ ul#main > li > ul.tasks ）。这个内部列表是垂直的，在需要的时候应该换行。当包装到更多的列时，其宽度应该增加，以腾出更多的项目的空间。这个宽度增加也应该适用于外部列表的包含项目。 .tasks { flex-direction: column; flex-wrap: wrap; /* …and more… */ } 我的问题是，当窗口的高度变得太小时，内部列表不会换行。我已经尝试了很多篡改所有的flex属性，试图按照CSS的技巧准则，但没有运气。这JSFiddle显示了我到目前为止。预期的结果 […]

无法滚动到溢出容器的弹性项目的顶部: 所以，在尝试使用flexbox制作一个有用的模式时，我发现似乎是一个浏览器问题，并且想知道是否有一个已知的修复或解决方法 – 或者如何解决它的想法。我试图解决的事情有两个方面。首先，让模态窗口垂直居中，按预期工作。第二个是让模态窗口滚动 – 外部，所以整个模式窗口滚动，而不是它的内容（这样你就可以有下拉菜单和其他UI元素，可以扩展到模态范围之外 – 像自定义dateselect器等）但是，当将垂直居中与滚动条组合在一起时，模态的顶部可能变得无法访问，因为它开始溢出。在上面的例子中，你可以resize来强制溢出，这样做可以让你滚动到模态的底部，但不能到顶部（第一段被截断）。这里是示例代码的链接（高度简化） https://jsfiddle.net/dh9k18k0/2/ .modal-container { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.5); overflow-x: auto; } .modal-container .modal-window { display: -ms-flexbox; display: flex; flex-direction: column; align-items: center; justify-content: center; // Optional support to confirm scroll behavior makes […]