Tag: flexbox

使div填充剩余*水平* flexbox中的空间

我有一个柔性箱并排2个div。 右手应该总是相同的宽度，我想要左手抓住剩余的空间。 但是，除非我专门设定宽度，否则不会。 所以目前，它被设置为96％，这看起来不错，直到你真的挤压屏幕 – 然后右手div有点饿了它所需要的空间。 我想我可以把它保留下来，但感觉不对，就像有一种说法： 正确的一个总是一样的; 你在左边 – 你得到了剩下的一切 .ar-course-nav { cursor: pointer; padding: 8px 12px 8px 12px; border-radius: 8px; } .ar-course-nav:hover { background-color: rgba(0, 0, 0, 0.1); } <br/> <br/> <div class="ar-course-nav" style="display:flex; justify-content:space-between;"> <div style="width:96%;"> <div style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;"> <strong title="Course Name Which is Really Quite Long And Does Go On […]

为什么不能<flex>集装箱？

我尝试使用display: flex和display: inline-flex来设置fieldset元素的样式。 然而，它不起作用： flexperformance得像block ，而inline-flexperformance得像inline-block 。 在Firefox和Chrome上都会发生这种情况，但奇怪的是，它可以在IE上运行。 这是一个错误？ 我无法find该fieldset应该有任何特殊的行为，无论是在HTML5或CSS灵活框布局规范。 fieldset, div { display: flex; border: 1px solid; } <fieldset> <p>foo</p> <p>bar</p> </fieldset> <div> <p>foo</p> <p>bar</p> </div>

右alignmentFlex项目？

是否有一个更灵活的方式来右alignment“联系人”比使用position: absolute ？ .main { display: flex; } .a, .b, .c { background: #efefef; border: 1px solid #999; } .b { flex: 1; text-align: center; } .c { position: absolute; right: 0; } <h2>With title</h2> <div class="main"> <div class="a"><a href="#">Home</a></div> <div class="b"><a href="#">Some title centered</a></div> <div class="c"><a href="#">Contact</a></div> </div> <h2>Without title</h2> <div class="main"> <div class="a"><a […]

CSS3 Flexbox保持图像宽高比

使用CSS弹性盒模型，如何强制图像保持其纵横比？ JS小提琴http://jsfiddle.net/xLc2Le0k/2/ 请注意，为了填充容器的宽度，图像会伸缩。 这很好，但是我们也可以让它伸展或缩小高度来保持图像比例吗？ HTML <div class="slider"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> </div> CSS .slider { display: flex; } .slider img { margin: 0 5px; }

Flexbox列子项上的高度为100％

我在Flexbox列中遇到了问题，因为flex'd元素的子元素不以百分比forms响应height 。 我只在Chrome中检查了这一点，并从我的理解是唯一的问题。 这是我的例子： HTML <div class='flexbox'> <div class='flex'> <div class='flex-child'></div> </div> <div class='static'></div> </div> CSS .flexbox{ position:absolute; background:black; width:100%; height:100%; display: flex; flex-direction:column; } .flex{ background:blue; flex:1; } .flex-child{ background:red; height:100%; width:100%; display:block; } .static{ background:green; width:100%; height:5rem; } 这是CodePen。 我想要它，红色的.flex-child填充蓝色的.flex 。 为什么不height:100%工作？

Flexbox替代IE9

我最初开发了一个使用Chrome的网站（最容易devise），但现在我正在使用IE支持模式。 这就是说，我从IE11开始，并对IE和Chrome之间的奇怪差异做了必要的修改。 但现在我正在降低IE版本。 我能够得到90％的网页正确显示与IE10的CSS。 但是现在我对这两个浏览器的大部分CSS元素，对于IE9来说大部分是不相关的。 如果可能的话，我想避免需要多个浏览器特定的样式表。 第一个问题是转换CSS的flexbox模型的IE10 +实现。 当前Flexbox容器的实现： div#navContainer{ display: flex; //Current browsers (IE11, Chrome, etc) display: -ms-flexbox; //IE10 implementation } div#TeamsSection { text-align: center; } div.NavSection { margin: 0px 7px; padding: 4px 0px 0px 0px; } div#teams { margin: 0px; select { margin: 0px; } } HTML： <div id="navContainer" class="float-left"> <div id="LogoSection" class="NavSection"> […]

根据原始大小制作flex-grow扩展项目

我有连续3个button，宽度各不相同。 我希望它们的宽度都相同，以填充行的剩余宽度，所以最宽的宽度将比其他宽度宽。 你可以在下面看到我试图用flex做的事情导致所有的button都是相同的宽度。 我知道flex-grow可以用来按比例增长每个项目，但我无法弄清楚如何让它们全部相对于原始大小增长。 你可以在第二行看到蓝色的项目比其他两个大。 我只是希望所有三个人都平等地扩大现有的规模，以填补这一问题。 谢谢 .row-flex { width: 100%; display: flex; flex-direction: row; } .button { flex: 1; display: inline-block; padding: 10px; color: #fff; text-align: center; } .button–1 { background: red } .button–2 { background: green; } .button–3 { background: blue; } <div class="row-flex"> <a href="#" class="button button–1">Single</a> <a href="#" class="button button–2">Larger title</a> […]

上次保证金/填充折叠在flexbox中

我有一个项目列表，我试图安排到一个带有flexbox的可滚动水平布局。 容器中的每个项目都有左右边距，但是最后一个项目的右边距正在折叠。 有没有办法阻止这种情况发生，还是一个很好的解决方法？ 问题的Codepen： http ://codepen.io/anon/pen/WxmdpN ul { list-style-type: none; padding: 0; margin: 0; display: flex; height: 300px; overflow: auto; width: 600px; background: orange; } ul li { background: blue; color: #fff; padding: 90px; margin: 0 30px; white-space: nowrap; flex-basis: auto; } <div class"container"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> </div>

防止弹性项目从一边到另一边呈现

我正在使用flexbox将一些项目放在一个块中，但是我希望每个项目都在自己的行中。 例如，我想要橙色方块在文本上方，但是在使用flex之后，它将它移动到文本的一边 – 有没有人知道这个方法？ .container { height: 200px; width: 200px; background: cornflowerblue; position: relative; } .inner { height: 100%; position: absolute; left: 0; width: 100%; top: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; } .square { width: 30px; height: 30px; background: tomato; display: block; } <div class="container"> […]

显示之间的区别：内联flex和显示：flex

我很难理解属性display:inline-flex; 。 display:inline-flex;什么区别display:inline-flex; 并display:flex; ？ 我想垂直alignmentID包装中的一些元素。 这就是为什么我给了属性display:inline-flex; 到这个ID; 因为ID包装是柔性容器。 但是介绍没有区别。 我期望包装器ID中的所有内容都将inline显示。 #wrapper { display: inline-flex; /*no difference to display:flex; */ } <body> <div id="wrapper"> <header>header</header> <nav>nav</nav> <aside>aside</aside> <main>main</main> <footer>footer</footer> </div> </body> JSFiddle示例 有什么不同？