Questions tagged «flexbox»

要设置我在容器margin: 0 5px上.item和margin: 0 -5px容器上使用的flexbox项之间的最小距离。对我来说，这似乎是一个hack，但是我找不到更好的方法来做到这一点。 例 #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> 运行代码段隐藏结果展开摘要

776 css  flexbox 

是否有比使用方法更灵活的“联系人”右对齐方式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> …

678 html  css  flexbox 

考虑伸缩容器的主轴和横轴： 资料来源：W3C 要沿主轴对齐弹性项目，有一个属性： justify-content 要沿十字轴对齐弹性项目，需要三个属性： align-content align-items align-self 在上图中，主轴是水平的，而横轴是垂直的。这些是flex容器的默认方向。 但是，这些方向可以轻松地与flex-direction酒店互换。 /* main axis is horizontal, cross axis is vertical */ flex-direction: row; flex-direction: row-reverse; /* main axis is vertical, cross axis is horizontal */ flex-direction: column; flex-direction: column-reverse; （交叉轴始终垂直于主轴。） 在描述轴的工作方式时，我的观点是，任一方向似乎都没有什么特别之处。主轴，横轴在重要性上都相同，并且flex-direction可以轻松地来回切换。 那么，为什么十字轴具有两个附加的对齐属性？ 为什么将align-content其align-items合并为主轴的一个属性？ 为什么主轴没有justify-self属性？ 这些属性将有用的方案： 将flex项目放在flex容器的角落 #box3 { align-self: flex-end; justify-self: …

674 css  flexbox  language-lawyer  w3c 

如何使用flexbox在容器内水平和垂直居中div。在下面的示例中，我希望每个数字彼此相邻（按行），它们水平居中。 .flex-container { padding: 0; margin: 0; list-style: none; display: flex; align-items: center; justify-content: center; } row { width: 100%; } .flex-item { background: tomato; padding: 5px; width: 200px; height: 150px; margin: 10px; line-height: 150px; color: white; font-weight: bold; font-size: 3em; text-align: center; } <div class="flex-container"> <div class="row"> <span class="flex-item">1</span> …

670 html  css  flexbox 

我正在尝试在Flexbox中填充Flex项目的垂直空间。 .container { height: 200px; width: 500px; display: flex; flex-direction: row; } .flex-1 { width: 100px; background-color: blue; } .flex-2 { position: relative; flex: 1; background-color: red; } .flex-2-child { height: 100%; width: 100%; background-color: green; } <div class="container"> <div class="flex-1"></div> <div class="flex-2"> <div class="flex-2-child"></div> </div> </div> 运行代码段隐藏结果展开摘要 这是JSFiddle flex-2-child …

458 css  flexbox 

我有两个div并排。我希望它们的高度相同，如果其中之一调整大小，则保持不变。我无法弄清楚这一点。有想法吗？ 为了澄清我一个令人困惑的问题，我希望两个框的尺寸始终相同，因此如果一个框由于文本放置而增大，则另一个框应与高度匹配。 <div style="overflow: hidden"> <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px"> Some content!<br/> Some content!<br/> Some content!<br/> Some content!<br/> Some content!<br/> </div> <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px"> Some content! </div> </div> 运行代码段隐藏结果展开摘要

440 html  css  html-table  flexbox 

我想使用flexbox在a内垂直对齐某些内容，<li>但没有取得很大的成功。 我已经在网上检查过，许多教程实际上都使用了包装器div，该包装器是align-items:center从父级的flex设置获取的，但是我想知道是否有可能切掉这个额外的元素？ 我选择在这种情况下使用flexbox，因为列表项的高度是动态的%。 * { padding: 0; margin: 0; } html, body { height: 100%; } ul { height: 100%; } li { display: flex; justify-content: center; align-self: center; background: silver; width: 100%; height: 20%; } <ul> <li>This is the text</li> </ul> 运行代码段隐藏结果展开摘要

424 html  css  flexbox 

我想在容器div中对齐3个div，如下所示： [[LEFT] [CENTER] [RIGHT]] 容器div的宽度为100％（未设置宽度），调整容器大小后，居中div应该保持居中。 所以我设置： #container{width:100%;} #left{float:left;width:100px;} #right{float:right;width:100px;} #center{margin:0 auto;width:100px;} 但它变成： [[LEFT] [CENTER] ] [RIGHT] 有小费吗？

392 html  css  flexbox  alignment  css-float 

我有一个简单的flex-box布局，其中包含一个容器： .grid { display: flex; flex-flow: row wrap; justify-content: space-between; } 现在，我希望最后一行中的项目与另一行对齐。justify-content: space-between;应该使用网格，因为可以调整网格的宽度和高度。 目前看起来像 在这里，我希望右下角的项目在“中间列”中。最简单的方法是什么？这是一个显示此行为的小jsfiddle。 .exposegrid { display: flex; flex-flow: row wrap; justify-content: space-between; } .exposetab { width: 100px; height: 66px; background-color: rgba(255, 255, 255, 0.2); border: 1px solid rgba(0, 0, 0, 0.4); border-radius: 5px; box-shadow: 1px 1px 2px rgba(0, …

378 css  flexbox  grid-layout 

我有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 | ------------------- 无论文本中有多少文本，p我都希望.button始终将其始终停留在底部，而不会将其从流程中移出。我听说Flexbox可以实现这一点，但我无法使其正常工作。

374 html  css  flexbox 

尝试最多包含5个项目且只有3个项目的flexbox导航，但它并未在所有元素之间平均分配宽度。 小提琴 我为此建模的教程是http://www.sitepoint.com/response-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; } .tabs ul { margin: 0; display: flex; flex-direction: row; } .tabs ul li { flex-grow: 1; list-style: none; text-align: …

368 html  css  flexbox 

任何人都可以告诉我之间的差异align-items和align-content？

366 css  layout  flexbox  alignment 

如何将导航栏项目右对齐？ 我要登录并在右边注册。但是我尝试的所有方法似乎都无法正常工作。 到目前为止，这是我尝试过的： <div>周围<ul>带有属性：style="float: right" <div>周围<ul>带有属性：style="text-align: right" 在<li>标签上尝试了这两件事 再次尝试了所有这些事情，并!important添加到最后 改变nav-item以nav-right在<li> 添加了一个pull-sm-right类的<li> 添加了一个align-content-end类的<li> 这是我的代码： <div id="app" class="container"> <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> …

340 css  twitter-bootstrap  flexbox  bootstrap-4  navbar 

我正在尝试在ID包装器中垂直对齐元素。我将属性display:inline-flex;赋予此ID，因为ID包装器是flex容器。 但是呈现方式没有什么区别。我希望包装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> 运行代码段隐藏结果展开摘要

330 css  flexbox 

我正在尝试使用Bootstrap 4将Container放在页面的中央。到目前为止，我一直没有成功。任何帮助，将不胜感激。 我已经在Codepen.io上构建了它，以便你们可以使用它，并让我知道什么出于我的想法而有效... 显示代码段 var currentAuthor = ""; var currentQuote = ""; function randomQuote() { $.ajax({ url: "https://api.forismatic.com/api/1.0/?", dataType: "jsonp", data: "method=getQuote&format=jsonp&lang=en&jsonp=?", success: function( response ) { $("#quote-content").html('<h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"> ' + response.quoteText + ' <i class="fa fa-quote-right" aria-hidden="true"></i></h2>'); $("#quote-author").html('<p id="quote-author" class="lead"><em>' + response.quoteAuthor + '</em></p>'); currentAuthor …

322 html  css  twitter-bootstrap  flexbox  bootstrap-4