Questions tagged «flexbox»

我希望将flex项居中，但是当我们有第二行时，将5（下图）置于1以下，而不位于父项的中心。 这是我所拥有的一个例子： ul { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; } li { list-style-type: none; border: 1px solid gray; margin: 15px; padding: 5px; width: 200px; } <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> 运行代码段隐藏结果展开摘要 http://jsfiddle.net/8jqbjese/2/

91 html  css  flexbox 

如您所见，list-items第一个row具有相同的height。但是第二个项目row有不同heights。我希望所有物品都穿制服height。 有什么方法可以在不提供固定高度且仅使用flexbox的情况下实现此目的？ 这是我的 code .list { display: flex; flex-wrap: wrap; max-width: 500px; } .list-item { background-color: #ccc; display: flex; padding: 0.5em; width: 25%; margin-right: 1%; margin-bottom: 20px; } .list-content { width: 100%; } <ul class="list"> <li class="list-item"> <div class="list-content"> <h2>box 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> …

91 html  css  flexbox 

我有一个带有两个flex项目的flex容器。我想在第二个上设置边距顶部，但仅在包装时设置而不是在第一条柔性线处。 如果可能，我要避免使用媒体查询。 我认为第一个要素的底边空白可能是一个解决方案。但是，当不包装元素时，它会在底部增加空间，因此是同样的问题。 这是我的代码： .container { display: flex; flex-wrap: wrap; justify-content: space-around; } .item-big { background: blue; width: 300px; } .item-small { background: red; margin-top: 30px; } <div class="container"> <div class="item-big"> FIRST BIG ELEM </div> <div class="item-small"> SECOND SMALL ELEM </div> </div> 运行代码段隐藏结果展开摘要

88 css  margin  flexbox 

昨天我在学校里有一个使用CSS 3 flexbox语句的网站。我以前从未用过。所以我用谷歌搜索了一下，发现了很多不同样式的flexbox语句。 有些人写display: box;，有些用display: flexbox;，还有一些display: flex;。 那有什么区别呢？我应该使用哪个？

83 css  flexbox 

我在容器中有两个元素，它们通过使用flex box并排放置。在第二个元素（.flexbox-2）上，我在CSS中设置它的高度。但是，第一个元素（.flexbox-1）将与的高度匹配.flexbox-2。如何停止.flexbox-1匹配的高度.flexbox-2，而只保留其自然高度？ 这是我到目前为止所拥有的（也可以作为jsFiddle使用） .container { display: -webkit-flex; -webkit-flex-direction: row; } .flexbox-1 { -webkit-flex: 1; border: solid 3px red; } .flexbox-2 { -webkit-flex: 2; border: solid 3px blue; height: 200px; margin-left: 10px; } <div class="container"> <div class="flexbox-1">.flexbox-1</div> <div class="flexbox-2">.flexbox-2</div> </div> 运行代码段隐藏结果展开摘要

81 html  css  flexbox 

我正在将必须使用的旧inline-block的网格模型更新为我创建的较新的Flexbox。除了一点点障碍之外，一切都运转良好，这已成为一个大问题： 我有一堆CSS控制的滑块；因此，有一个宽度为100％的包含包装器，而内部是另一个div：其宽度也是100％，但将其white-space设置为nowrap。使用inline-block，这意味着内部div（也设置为100％宽度）将不受父母约束的约束，并缠绕到下一行-他们将继续进行操作。这正是我想要的。但是，我根本无法使它与flexbox一起使用。供参考，这是一张图片： 作为参考，这是使用inline-block的jsFiddle：http : //jsfiddle.net/5zzvqx4b/ ...并且无法与Flexbox配合使用：http : //jsfiddle.net/5zzvqx4b/1/ 我已经试过各种与变化flex，flex-basis，flex-wrap，flex-grow，等。但对我的生活，我不能得到这个工作。 请注意，我可以通过将.boxcontainerwidth设置为来强制它以一种怪异的，不灵活的方式执行我想要的操作200%。这适用于单个示例，但是在某些情况下，我事先不知道会有多少个子框，如果可能的话，我宁愿不对每个元素采用内联样式。

79 css  flexbox 

带有列表标记的网格列，我需要每3列以正确的顺序显示，并为每个额外的HTML列表元素启用自动宽度。 这是我的示例： <style> ul { margin: 0; padding: 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; height: 150px; width:auto; } li { float: left; display: inline-block; list-style: none; position: relative; height: 50px; width: 50px; } </style> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> …

78 html  css  flexbox 

如何将flexbox的第一个孩子设置为全角，而其他所有孩子都设置为flex:1（用于分割空间）？ 像这样：

77 css  flexbox 

我一直试图显示每行三列。是否可以使用flexbox？ 我当前的CSS是这样的： .mainDiv { display: flex; margin-left: 221px; margin-top: 43px; } 此代码将所有内容放在一行中。我想添加一个约束以仅显示每行三个记录。

77 html  css  flexbox 

我已经使用css3 flexbox设计了一个100％宽度100％高度的布局，该布局可在IE11上运行（如果对IE11的仿真正确，则可能在IE10上运行）。 但是Firefox（35.0.1），overflow-y无法正常工作。如您在该Codepen中所见：http ://codepen.io/anon/pen/NPYVga Firefox无法正确渲染溢出。它显示一个滚动条 html, body { height: 100%; margin: 0; padding: 0; border: 0; } .level-0-container { height: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .level-0-row1 { border: 1px solid black; box-sizing: border-box; } .level-0-row2 …

76 css  firefox  overflow  flexbox 

我猜这是一个非常简单的问题，但是我无法在flex容器中让3个项目显示为2行，其中第一行显示第二行。这是flex容器的CSS。它在一行上显示3个项目，很明显:) div.intro_container { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; } 如果flex-wrap设置为wrap，则这3个项目将显示在列中。我认为需要包装设置才能在多行上显示容器项目。我已经为第一个容器项目尝试了此CSS，目的是使它占据第一行的整个内容，但是没有用 div.intro_item_1 { flex-grow: 3; } 我已经按照“ CSS技巧”中的说明进行了操作，但是我真的不确定要使用哪种命令组合。任何帮助都将非常受欢迎，因为对此我感到困惑。

76 css  flexbox 

http://jsfiddle.net/XW9Se/ 我已经设置width: 200px;在左侧，<div>但是如果使用浏览器检查器工具进行查看，则实际宽度似乎是随机的或某种程度。它根据窗口大小不断变化。 为什么宽度不生效？ 编辑：如果我删除width: 100%宽度保持固定。但是我需要这样，以便#maindiv占用剩余的宽度:(是否有任何方法可以使侧边栏@固定宽度而另一个<div>填充容器的其余宽度？width: auto;在#main上不起作用..

76 css  width  flexbox 

我有一个Flexbox布局，其中包含两个项目。其中之一使用padding-bottom： 显示代码段 #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'> …

75 css  padding  flexbox  aspect-ratio 

我有一个Flex容器justify-content: flex-start。由于弹性项目占用的空间少于容器的大小，因此最终会在右侧溢出。 除了在flex容器上设置显式宽度外，还有没有其他方法可以等效width: auto地消除溢出？

75 css  flexbox 

我正在尝试创建一个自适应的正方形网格。正方形应调整大小以适合视口的宽度。更改视口高度时，正方形不应调整大小。 我了解了如何调整每个正方形的宽度，但是当视口宽度发生变化时，我不知道如何使元素变为正方形以及如何缩放其高度。 在小提琴下面的示例中，七个正方形应始终水平放置，并且应按正方形缩放。我不在乎有多少行可见。 在这里提琴http://jsfiddle.net/gonyhvz8/11/ <body> <div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> <div class="flex-item">4</div> <div class="flex-item">5</div> <div class="flex-item">6</div> <div class="flex-item">7</div> </div> <div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> <div class="flex-item">4</div> <div class="flex-item">5</div> <div class="flex-item">6</div> <div class="flex-item">7</div> </div> <div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> <div class="flex-item">4</div> <div …

75 css  responsive-design  flexbox