Tag: flexbox

Flexbox不给与元素相同的宽度

尝试flexbox导航,最多有5个项目,只有3,但它没有在所有元素之间平分宽度。 小提琴 我正在build模的教程是http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/ 上海社会科学院 * { font-size:16px; } .tabs { max-width: 1010px; width:100%; height: 5rem; border-bottom:solid 1px grey; margin:0 0 0 6.5rem; display: table; table-layout:fixed; ul { margin:0; display: flex; flex-direction: row; li { flex-grow:1; list-style:none; text-align:center; font-size:1.313rem; background: blue; color: white; height: inherit; left:auto; vertical-align:top; text-align:left; padding:20px 20px 20px 70px; border-top-left-radius: 20px; border:solid 1px […]

用flexbox将元素与底部alignment

我和一些孩子有一个div <div class="content"> <h1>heading 1</h1> <h2>heading 2</h2> <p>Some more or less text</p> <a href="/" class="button">Click me</a> </div> 我想要以下布局: ——————- |heading 1 | |heading 2 | |paragraph text | |can have many | |rows | | | | | | | |link-button | ——————- 不pipe多less文本在p我想要坚持.button始终在底部,而不是从stream出。 我听说用Flexbox可以实现这个function,但是我无法使用它。

Flexbox与Twitter Bootstrap(或类似的框架)

我最近发现Flexbox时,我正在寻找一个解决scheme,使Flexbox相同,取决​​于最高的一个。 我已阅读CSS-tricks.com上的以下页面 ,并确信flexbox是一个非常强大的模块,可供学习和使用。 但是,这也让我想到了Twitter Bootstrap(以及类似的框架)在网格系统中提供了相同的function(当然还有很多额外的function)。 现在的问题是: flexbox有什么优点和缺点? 有什么人不能用Flexbox做什么,可以用像Bootstrap这样的框架来做(当然纯粹是谈论网格系统)? 在网站上实施哪个更快? 我猜只是为了网格系统,纯粹使用flexbox更聪明,但是如果你已经使用了框架, flexbox可以添加? 在框架上selectflexbox的“网格系统”是否有任何理由?

Flexbox – 两个固定宽度的柱子,一个灵活

我试图设置一个flexbox有三列,其中左列和右列有一个固定的宽度,中间列弯曲以填充可用空间。 尽pipe为立柱设置了尺寸,但随着窗口缩小,它们似乎仍然缩小。 任何人都知道如何做到这一点? 我需要做的另一件事就是根据用户交互来隐藏右列,在这种情况下,左列仍然保持固定的宽度,但中间的列将填充剩余的空间。 #container { display: flex; justify-content: space-around; align-items: stretch; max-width: 1200px; } .column.left { width: 230px; } .column.right { width: 230px; border-left: 1px solid #eee; } .column.center { border-left: 1px solid #eee; } <div id="container"> <div class="column left"> <p>Anxiety was a blog series that ran in the New York Times Opinion section […]

更好地设置Flexbox项目之间的距离

若要设置最小距离之间的flexbox项目我使用margin: 0 5px上的.item和margin: 0 -5px上的容器。 对我来说,这似乎是一个黑客,但我找不到更好的方法来做到这一点。 例 #box { display: flex; width: 100px; margin: 0 -5px; } .item { background: gray; width: 50px; height: 50px; margin: 0 5px; } <div id='box'> <div class='item'></div> <div class='item'></div> <div class='item'></div> <div class='item'></div> </div>

可滚动的div粘到底部,当外部div变化的大小

这里是一个示例聊天应用程序 – > 这里的想法是让.messages-container尽可能多的占用屏幕。 在.messages-container , .scroll保存消息列表,如果有更多的消息,那么屏幕的大小会滚动。 现在,考虑这种情况: 用户滚动到会话的底部 .text-inputdynamic变大 现在,不是用户保持滚动到对话底部,文本input增加,他们不再看到底部。 一种方法来解决它,如果我们正在使用的反应,计算文本input的高度,如果有任何改变,让.messages容器知道 componentDidUpdate() { window.setTimeout(_ => { const newHeight = this.calcHeight(); if (newHeight !== this._oldHeight) { this.props.onResize(); } this._oldHeight = newHeight; }); } 但是,这会导致可见的性能问题,并且像这样传递消息很可悲。 有没有更好的办法? 我可以用这样的方式使用css来expression:.text-input-increase时,我想实质上shift up所有的.messages-container

你怎么能保持中心框在柔性盒布局的中心?

想象下面的布局,点代表框之间的空间: [Left box]……[Center box]……[Right box] 当我删除正确的盒子,我喜欢中心框仍然在中心,就像这样: [Left box]……[Center box]…………….. 如果我删除左边的框,也是一样的。 …………….[Center box]…………….. 现在,当中心框内的内容变长时,它将占用尽可能多的可用空间,同时保持居中。 左右框永远不会缩小,因此当没有空间的时候, overflow:hidden和text-overflow: ellipsis将会有效地打破内容; [Left box][Center boxxxxxxxxxxxxx][Right box] 以上都是我理想的情况,但是我不知道如何做到这一点。 因为当我创build一个像这样的柔性结构: .parent { display : flex; // flex box justify-content : space-between; // horizontal alignment align-content : center; // vertical alignment } 如果左侧和右侧的盒子尺寸完全相同,我会得到所需的效果。 然而,当两者中的一个来自不同的大小时,居中的盒子不再是真正的居中。 有没有人可以帮助我? 更新 justify-self会很好,这将是理想的: .leftBox { justify-self : flex-start; } .rightBox […]

填充底部/顶部在flexbox布局

我有一个包含两个项目的flexbox布局 。 其中之一使用填充底部 : #flexBox { border: 1px solid red; width: 50%; margin: 0 auto; padding: 1em; display: flex; flex-direction: column; } #text { border: 1px solid green; padding: .5em; } #padding { margin: 1em 0; border: 1px solid blue; padding-bottom: 56.25%; /* intrinsic aspect ratio */ height: 0; } <div id='flexBox'> <div id='padding'></div> <div […]

使用flexbox(或其他CSS)创build砌体网格

我想在CSS中实现一个网格效果,所有的元素都具有相同的宽度但不是高度。 我希望下面的元素永远在底部的50px处,而不pipe下一个是什么。 我尝试了花车,但那个错误。 所以我尝试使用Flex,但它仍然没有做我想要的。 .container display: flex flex-wrap wrap align-content flex-start align-items flex-start 我想要什么: 我拥有的:

将flexbox儿童设置为具有不同的高度以使用可用空间

使用双柱式柔性箱布局,不同大小的孩子如何填充所有可用的空间,而不是所有的儿童都拥有最高的儿童身高? 我在jsbin上设置了一个演示这个问题的演示。 我希望所有的孩子都是他们包装内容的大小。 #container { width: 800px; display: flex; flex-wrap: wrap; } .cell { width: 300px; flex; 1 auto; } <div id="container"> <div class="cell"> Cells with arbitrarily long content.</div> <div class="cell"> </div> <div class="cell"> </div> <div class="cell"> </div> <div class="cell"> </div> </div> </body> </html>