这个问题在这里已经有了答案:Enablinghorizontalscrollinflexbox(4个答案)关闭6年前。我的parent正在使用display:flex;。它目前有四个child(卡片)，但它可能有更多。所有的child都需要大，但宽度相等。例如，每个child都需要40%宽度。如果发生这种情况，屏幕上只能容纳一定数量的child。我需要能够做到这一点，并让其他child可以通过水平滚动访问。我如何实现这一点？我尝试使用flex-wrap:no-wrap;然后增加child的宽度，但parent不允许这样做。这似乎是故意的，但我基本上想覆盖这种行为。HTMLTextCSS

对于固定高度的flex容器，我可以通过设置overflow:auto使flex元素可滚动，如下所示:page{display:flex;flex-flow:rowwrap;height:200px;}left-panel{flex:1;display:block;background:lightblue;}//main{flex:5;display:block;}header{background:turquoise;display:block}//main-content-wrapper{flex:4;display:flex;flex-direction:column}right-

我有这样的布局:和它的CSS:html,body{height:100%;}.flexbox{display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-content:stretch;align-items:flex-start;height:100%;width:100%;}.flexbox.main{order:0;flex:11auto;align-self:stretch;}.flexbox.header,.flexbox.footer{order:0;flex:01

我正在尝试制作一个可在移动设备中水平滚动的导航菜单。为此，我想使用flexbox来实现，但是当我设置移动View时，导航项的宽度会减小。我尝试使用flex-grow和flex-basis属性将它们分别设置为1和0但它没有用。在这种情况下，我为导航部分使用虚拟名称，但它们的长度可以不同。ul{display:flex;margin:0;padding:0;list-style:none;background-color:#f2f2f2;overflow-y:hidden;overflow-x:auto;}li{flex-grow:1;flex-basis:0;margin-left:10

这个问题在这里已经有了答案:Equalwidthflexitemsevenaftertheywrap(2个答案)关闭4年前。我下面代码中的flexboxes看起来很棒，但我对如何确定框宽度感到困惑。例如，如果删除中的内容或class="card_title"元素，框的大小也会发生变化。无论标题或段落的长度如何，是否可以将所有框设置为相同的宽度？codependemoimg{height:auto;max-width:100%;vertical-align:middle;}.btn{background-color:white;border:1pxsolid#cccccc;color:#

当两个元素都使用flex-grow:1时，我们如何让Flexbox停止在同级元素中均衡空间。这很难预先解释，所以这里是代码，紧接着是问题的示例屏幕截图和所需的行为。.Parent{display:flex;flex-direction:column;background-color:lightcoral;width:400px;min-height:200px;}.Parent>div{flex:1;}.child1{background-color:lightblue;}.child2{background-color:lightgreen;}Loremipsumdolorsitam

所以我有一个内部有span的div。我在div上设置display:block或display:flex，在span上设置小字体。令人惊讶的是，这在div上给出了不同的高度。请参阅示例。如果我在body或div上设置较小的字体大小，则两者的高度相等。但是，如果我像示例中那样在span上设置较小的字体大小，则div会获得不同的高度。怎么来的？我能做些什么吗？span{font-size:0.8rem;border:1pxredsolid;}div{border:1pxbluesolid;}testtext1testtext2 最佳答案

我只想让文字像这样:display:table-cell;vertical-align:middle;但是使用flex盒子div{border:1pxsolidblack;}.box{display:flex;flex-flow:columnnowrap;justify-content:center;align-content:center;align-items:stretch;height:200px;}.boxdiv{order:1;flex:01auto;align-self:auto;min-width:0;min-height:auto;}.boxdiv.C{flex:11

关闭。这个问题不符合StackOverflowguidelines.它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。关闭4年前。Improvethisquestion玩弄最新的HTML5功能感觉不错，但最终往往会很麻烦，因为标准及其浏览器特定实现不断发展。Mozilla有一个很好的资源-MDNDocCenter，在那里他们不断记录Gecko经历的所有变化。我想知道对于Safari和Chrome，WebKit是否有类似的东西？

我有两个div元素，它们都具有CSS属性display:inline-flex，因为我想将它们放在一起。起初，div的位置似乎正确。.userImg{height:3em;width:3em;background:red;display:inline-flex;}.nameOfUser{display:inline-flex;height:3em;width:10em;background:blue;}但是，一旦我在nameOfUserdiv中放置了一些文本，它似乎创建了一些奇怪的上边距，这使得两个div元素彼此未对齐..userImg{height:3em;width:3em;bac