Questions tagged «flexbox»

我想使用具有一些相同宽度的项目的flexbox。我注意到，flexbox将空间均匀分布，而不是空间本身。 例如： .header { display: flex; } .item { flex-grow: 1; text-align: center; border: 1px solid black; } <div class="header"> <div class="item">asdfasdfasdfasdfasdfasdf</div> <div class="item">z</div> </div> 运行代码段Hide results展开摘要 第一项比第二项大很多。如果我有3个项目，4个项目或n个项目，则我希望它们全部显示在同一行上，每个项目具有相等的空间。 有任何想法吗？ http://codepen.io/anon/pen/gbJBqM

184 css  flexbox 

考虑以下代码段： .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 …

175 css  internet-explorer  flexbox  internet-explorer-11 

我正在处理嵌套的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-Tricks的准则，但是没有运气。 这个JSFiddle显示了我到目前为止所拥有的。 预期结果 （我想要的）： 实际结果 （我得到的）： 较旧的结果 （我在2015年得到的结果）： 更新 经过一番调查，这似乎是一个更大的问题。所有主要的浏览器的行为都相同，与嵌套的Flexbox设计无关。项目包装时，甚至更简单的flexbox列布局也拒绝增加列表的宽度。 这其他的jsfiddle清楚地表明了问题。在当前版本的Chrome，Firefox和IE11中，所有项目均正确包装；列表的高度在row模式下增加，但其宽度在column模式下不增加。另外，更改column模式高度时，根本没有元素的立即重排，但是处于row模式中。 …

166 html  css  flexbox 

已关闭。这个问题是基于观点的。它当前不接受答案。 想改善这个问题吗？更新问题，以便通过编辑此帖子以事实和引用的形式回答。 5年前关闭。 改善这个问题 我最近发现，Flexbox当我在寻找一种解决方案来使divs相同，取决​​于最高的解决方案。 我已经阅读了CSS-tricks.com上的以下页面，它使我确信这flexbox是一个非常强大的学习和使用模块。但是，这也让我想到了Twitter Bootstrap（和类似框架）为其网格系统提供某种相同功能（当然还有很多额外功能）的事实。 现在，问题是：优缺点是flexbox什么？Flexbox不能提供与Bootstrap这样的框架可以做到的某些功能（当然，纯粹是在谈论网格系统）吗？在网站上实施时哪个更快？ 我猜想仅用于网格系统会更聪明flexbox，但是如果您已经在使用框架，flexbox可以添加一些内容吗？ 是否有任何理由选择flexbox框架的“网格系统”？

161 html  css  twitter-bootstrap  flexbox 

想象一下以下布局，其中的点表示框之间的空间： [Left box]......[Center box]......[Right box] 当我删除右框时，我希望中心框仍位于中心，如下所示： [Left box]......[Center box]................. 如果我要删除左框，也是如此。 ................[Center box]................. 现在，当中心框中的内容变长时，它将在保持居中状态的同时占用所需的可用空间。左右框永远不会缩小，因此，当没有空间的地方overflow:hidden，text-overflow: ellipsis它将有效地破坏内容； [Left box][Center boxxxxxxxxxxxxx][Right box] 以上是我的理想情况，但我不知道如何实现此效果。因为当我创建如下的flex结构时： .parent { display : flex; // flex box justify-content : space-between; // horizontal alignment align-content : center; // vertical alignment } 如果左右框的大小完全相同，我将获得所需的效果。但是，如果两者之一的大小不同，则居中框不再真正居中。 有没有人可以帮助我？ 更新资料 一个justify-self会很好，这将是理想的： .leftBox { justify-self : flex-start; } …

161 html  css  flexbox  centering 

Flexbox在将图像拉伸到其自然高度时具有这种行为。换句话说，如果我有一个带有子图像的flexbox容器，并且我调整了该图像的宽度，那么高度根本就不会调整，并且图像会被拉伸。 div { display: flex; flex-wrap: wrap; } img{ width: 50% } <div> <img src="https://loremflickr.com/400/300" > <h4>Appify</h4> <p> some text </p> </div> 运行代码段隐藏结果展开摘要 是什么原因造成的？ 我添加了此CodePen来演示我的意思。

156 html  css  flexbox 

我有一个容器<div>用display: flex。它有一个孩子<a>。 我怎样才能使孩子显得“内联”？ 具体来说，如何使孩子的宽度由其内容决定，而不扩展到父母的宽度？ 我试过的 我将孩子设置为display: inline-flex，但仍然占用了整个宽度。我也尝试了所有其他显示属性，但没有任何效果。 例： .container { background: red; height: 200px; flex-direction: column; padding: 10px; display: flex; } a { display: inline-flex; padding: 10px 40px; background: pink; } <div class="container"> <a href="#">Test</a> </div> 运行代码段隐藏结果展开摘要 http://codepen.io/donpinkus/pen/YGRxRY

154 html  css  flexbox 

CodePen：http ://codepen.io/anon/pen/RPNpaP 。 在并排视图中，我希望红色框的宽度只有25 em-我正试图通过在此媒体查询中设置CSS来实现这一点： @media all and (min-width: 811px) {...} 至： .flexbox .red { width: 25em; } 但是，当我这样做时，就会发生这种情况： http://i.imgur.com/niFBrwt.png 知道我在做什么错吗？

149 html  css  flexbox 

我想有A B和C中间对齐。 我怎样才能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> 运行代码段隐藏结果展开摘要 …

147 html  css  flexbox 

我有一个左右Flexbox： .wrapper { display: flex; flex-direction: row; align-items: stretch; width: 100%; height: 70vh; min-height: 325px; max-height:570px; } <div class="wrapper"> <div class="left">Left</div> <div class="right">Right</div> </div> 运行代码段隐藏结果展开摘要 问题在于正确的孩子没有做出反应。具体来说，我希望它填充包装纸的高度。 如何做到这一点？

141 css  flexbox 

我需要实现相当合理的砌体布局。但是，由于多种原因，我不想使用JavaScript来实现它。 参数： 所有元素具有相同的宽度 元素具有服务器端无法计算的高度（图像加上各种文本） 如果必须，我可以使用固定数量的列 有一个简单的解决方案，可以在现代浏览器中运行，该column-count属性。 该解决方案的问题在于元素按列排序： 虽然我需要按行对元素进行排序，但至少要大致： 我尝试过的方法不起作用： 制作物品display: inline-block：浪费垂直空间。 制作物品float: left：大声笑，不。 现在，我可以更改服务器端渲染并重新排序项目，将项目数除以列数，但这很复杂，容易出错（基于浏览器决定如何将项目列表拆分为列），所以我想尽可能避免它。 是否有一些新的flexbox魔术使这成为可能？

134 html  css  flexbox  css-grid 

我们都知道，该flex属性是一个速记flex-grow，flex-shrink和flex-basis属性。其默认值为0 1 auto，表示 flex-grow: 0; flex-shrink: 1; flex-basis: auto; 但我注意到，在很多地方flex: 1都使用过。是速记1 1 auto还是1 0 auto？我不明白这是什么意思，而我在Google上一无所获。

128 css  flexbox 

使用典型的CSS，我可以左右浮动两列中的一列，并在其间留一些装订线空间。我该如何使用flexbox？ http://jsfiddle.net/1sp9jd32/ #container { width: 500px; border: solid 1px #000; display: -webkit-flex; display: -ms-flexbox; display: flex; } #a { width: 20%; border: solid 1px #000; } #b { width: 20%; border: solid 1px #000; height: 200px; } <div id="container"> <div id="a"> a </div> <div id="b"> b </div> </div> 运行代码段Hide results展开摘要

121 html  css  flexbox 

在此实时示例中可以找到以下代码 我有以下反应本机元素： 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, } = React; var SampleApp = React.createClass({ render: function() { return ( <View style={styles.container}> <View style={styles.descriptionContainerVer}> <View style={styles.descriptionContainerHor}> <Text style={styles.descriptionText} numberOfLines={5} > Here is a really long text that you can do nothing about, its gonna …

121 css  reactjs  react-native  flexbox 

我找到了这个线索- 如何在保持图像的长宽比的同时拉伸图像以填充<div>？-这不完全是我想要的东西。 我有一个具有一定大小的div，并且其中有一个图像。我想始终用图像填充div，而不管图像是横向还是纵向。图像是否被剪切也没关系（div本身已隐藏溢出）。 因此，如果图像是人像我想要的width是100%和height:auto，使其保持在比例。如果图像是风景我想要的height是100%和width to beauto`。听起来很复杂吧？ <div class="container"> <img src="some-image.jpg" alt="Could be portrait or landscape"/> </div> 因为我不知道该怎么做，所以我只是简单地创建了我的意思的图像。我什至无法恰当地描述它。 所以，我想我不是第一个问这个问题的人。但是我真的找不到解决方案。也许有一些新的CSS3方式可以做到这一点-我正在考虑使用flex-box。任何想法？也许它比我预期的要容易得多？

120 image  css  positioning  flexbox