Tag: flexbox

使用flex order属性重新安排桌面和移动视图的项目

我有一个容器内的3个div。 没有嵌套的div。 我正在使用flex和order属性。 在移动设备上， order属性可以。 但在更大的屏幕上，它失败了。 我没有使用div 2和3的容器div，以便在移动设备上将它们命名为2,1,3。 HTML文件 <div class="container"> <div class="orange">1</div> <div class="blue">2</div> <div class="green">3</div> </div> CSS文件 /*************** MOBILE *************/ .container { display: flex; flex-wrap: wrap; } div.blue { order:1; width: 100%; } div.orange { order:2; width: 100%; } div.green { order:3; width: 100%; } /***************************/ @media screen and (min-width:1200px) { .container { […]

只有CSS的砌体布局，但水平排列元素

我需要实现一个相当普通的砌体布局。 但是，由于一些原因，我不想使用JavaScript来做到这一点。 参数： 所有的元素都有相同的宽度 元素的高度不能计算在服务器端（一个图像加上不同数量的文本） 如果必须的话，我可以生活在固定数量的专栏中 有一个简单的解决scheme，可以在现代浏览器中使用column-count属性。 该解决scheme的问题是元素按列sorting： 虽然我需要sorting的元素，至less大约： 我尝试过的方法不起作用： 制作项目display: inline-block ： 浪费垂直空间。 制作项目float: left ： 大声笑，没有。 现在，我可以更改服务器端渲染，并重新排列项数除以列数的项目，但这是复杂的，容易出错（基于浏览器如何决定将项目列表拆分成列），所以我想如果可能的话避免它。 有没有一些新的灵活的魔术，使这成为可能？

删除多行弹性项目之间的空间（空白）时，它们包装

我正在尝试在一个设定高度的容器中放置一些物品。 如果没有剩余的空间，物品将会彼此相邻。 这是这个想法： 我正在尝试使用flexbox来实现这一点，一个具有设置高度的容器，方向被设置为column并且flex-wrap被wrap ： 问题是各栏之间有很大的差距。 我尝试设置justify-content和align-items到flex-start ，但这可能是默认值。 有什么办法可以解决这个问题吗？ 这里是代码： * { box-sizing: border-box; } body { font-family: sans-serif; } .container { display: flex; flex-wrap: wrap; height: 300px; flex-direction: column; background-color: #ccc; } .items { width: 100px; height: 100px; margin: 10px; background-color: tomato; color: white; font-size: 60px; font-weight: bold; text-align: center; padding: 15px; } <div […]

一个Flex项目设置了兄弟姐妹的身高限制

我有两个兄弟元素，每个都包含dynamic内容。 <div class="flex"> <div class="sibling-1"></div> <div class="sibling-2"></div> </div> 在某些情况下， sibling-1将有更多的内容，然后sibling-2 ，反之亦然。 我希望第二个元素sibling-2的高度总是等于第一个sibling-1的高度。 如果sibling-2的高度大于sibling-1的高度，则会溢出flex div，从而可以滚动。 有什么办法可以用Flexbox来完成这个任务吗？

柔性容器中的文本不包装在IE11中

考虑下面的代码片段： .parent { display: flex; flex-direction: column; width: 400px; border: 1px solid red; align-items: center; } .child { border: 1px solid blue; } <div class="parent"> <div class="child"> Lorem Ipsum is simply dummy text of the printing and typesetting industry </div> <div class="child"> Lorem Ipsum is simply dummy text of the printing and typesetting industry </div> […]

弹性框：将最后一行alignment到网格

我有一个简单的弹性框布局，像一个容器： .grid { display: flex; flex-flow: row wrap; justify-content: space-between; } 现在我想把最后一行中的项目与其他项目alignment。 justify-content: space-between; 应该使用，因为网格的宽度和高度可以调整。 目前看起来像 在这里，我想让右下方的项目位于“中间栏”中。 什么是最简单的方法来完成呢？ 这是一个显示这种行为的小jsfiddle 。

绝对定位的Flex项目不会从Firefox和IE11的正常stream程中移除

我们有两个div的内容和第三个div是绝对位置的背景。 容器是一个flexbox。 所有在Chrome和Safari中运行正常，但Firefox和IE11计算绝对定位的div，并且在div之间分配空间，就像有3个div一样。 我做了一个jsfiddle的例子。 有没有办法解决这个错误？ https://jsfiddle.net/s18do03e/2/ div.container { display: flex; flex-direction: row; width: 100%; height: 300px; justify-content: space-between; width: 100%; outline: 1px solid; } div.c1 { background: #aaeecc; width: 100px; position: relative; z-index: 50; top: 20px; display: flex; } div.c2 { background: #cceeaa; width: 200px; position: relative; z-index: 50; top: 20px; display: flex; } div.bg […]

垂直居中div内的两个元素

我正在尝试垂直居中两个<p>元素。 我在phrogz.net上跟着教程，但是仍然把元素放在div之下，在div之下，顶部alignment。 我会尝试一些其他的东西，但这里的大部分问题都只是指向那个教程。 这个片段是针对网页顶部的横幅。 .banner { width: 980px; height: 69px; background-image: url(..http://img.dovov.comnav-bg.jpg); background-repeat: no-repeat; /* color: #ffffff; */ } .bannerleft { float: left; width: 420px; text-align: right; height: 652px; line-height: 52px; font-size: 28px; padding-right: 5px; } .bannerright { float: right; width: 555px; text-align: left; position: relative; } .bannerrightinner { position: absolute; top: 50%; height: 52px; […]

中心和底部alignment弹性项目

我有一个flex容器（蓝色方块）具有以下属性： display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; 因此，它的孩子（淡蓝色的方块）按照您在下面看到的方式排列。 但是，我想从正常stream程中添加另一个孩子（绿色方块），并将其定位在父母的相对位置。 要定位，如下所示，我最好写一些像bottom: 20px; 和margin: auto; 。 我试图玩z-index无济于事。 我应该如何处理这个？ 我应该诉诸创造另一个父母元素？

flex-wrap如何与align-self，align-items和align-content一起工作？

align-self 在以下代码中， align-self与flex-wrap: nowrap 。 flex-container { display: flex; flex-wrap: nowrap; align-content: flex-start; width: 250px; height: 250px; background-color: silver; } flex-item { flex: 0 0 50px; height: 50px; margin: 5px; background-color: lightgreen; } flex-item:last-child { align-self: flex-end; background-color: crimson; } <flex-container> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> </flex-container> 但是当容器切换到flex-wrap: wrap ， align-self属性失败。 flex-container { display: […]