flexbox

0热度

2回答

我正在尝试使用与所有列底部的链接无关的内容来获得具有相同高度列的行。这是一个JS BIN，代码如下。 <div class="container"> <h4 class="report_list__title">Activites</h4> <div class="row report_list"> <div class="col-xs-3 report_lis

0热度

1回答

使用CSS flexbox放置顶部/开始使用孤立元素的高效方法

当您使用flexbox wrap创建网格并且最后一行的元素少于之前的行时，“孤立”元素的默认行为flex: 1将水平拉伸以填充宽度 - 使元素大于先前的行。我想要相同的行为，除了我希望较大的项目出现在顶行而不是底行。我已经想出了一个解决方案（如下所示），但它不能很好地扩展，感觉像一个糟糕的黑客攻击。有没有更好的（更优雅）的方式来实现这种布局？该解决方案需要处理动态内容;即，我不会事先知道元素的数

9热度

3回答

无法摆脱X溢出（滚动条被隐藏，但我仍然可以滚动到右侧）

我忙于一个项目，我正在使用angular-flex-layout。据我了解，如果将fxLayoutWrap属性应用于容器，Flex容器应该换行到下一行。出于某种原因，我有一个非常小的x溢出。它曾经是更大的，然后我删除了一些fxLayoutGaps我有两个fxLayout行容器，使它更好。我不知道这是什么原因，因为我将fxLayoutWrap属性应用于父级（仪表板组件的第一行）行容器。任何想法我做错

0热度

2回答

将图像制作在flexbox细胞比例尺中...

将图像放入Flexbox细胞比例尺中而不定义尺寸？我在flexbox中构建了一行，它有一个图像作为顶部元素，然后是下面文本的div容器。相当标准的东西。该行正在前往一个cms，因此，这就是问题所在。客户端将能够改变图像，因此我不知道图像有多大。因此设置任何宽度或高度属性是不可能的。此外，该行被设计为适合任何屏幕，因此在更大的屏幕上，我根本不知道容器需要多宽。我在codepen上做实验，但是当

3热度

2回答

防止并排元素周围的双重边框

如果您有多个带有1px边框的容器，则彼此相邻的所有容器都会生成2px边框。所以为了摆脱这一点，你总是设置border-right: none;，然后将border-right: 1px;添加到最后一个子元素，以使所有容器在所有边都具有1px边框。但是，如果您使用flexbox flex-basis规则将容器拆分为下一行，则会破坏整个border-right想法，该行中的最后一个容器始终保留为无边

0热度

1回答

Flexbox space-bootstrap3面板体之间增加了容器边之间的额外间距

我有一个面板，面板体内有两个孩子，我想将其与面板体的两端对齐。简单的例子： <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">My Panel</h3> </div> <div class="panel-body"> <div

1热度

1回答

CSS柔性成长不上边

添加DIV工作考虑以下小提琴：https://jsfiddle.net/7naxprzd/1/ 的要求是：与头两列和内容列面应对准列的底部应该对齐在每列顶部应该有一个水平居中的箭头如果通过删除div类.arrow-wrapper消除箭头，但代码正常工作，但我需要箭头。一个解决方案可以是绝对定位箭头，但有没有办法解决这个布局问题与柔性没有绝对定位的箭头？应该适用于现代浏览器和IE11。

0热度

3回答

柔性盒和填充？

我读过这个SO pos t并实现了它的建议。下面我的代码。基本上，当我向我的flex孩子添加填充物时，它会伸展得比应该宽，两个框（金色和灰色）的宽度应该相同，但大量的填充会使金色框稍微较大，因此忽略了其50％的基础。为什么会发生这种情况，它如何解决？我期待两个盒子的宽度相同，即使是填充也是如此。 .container { display: flex; height

0热度

1回答

Flex图像和定位问题

我试图实现的是，一旦我缩小屏幕的大小并且一些元素开始移动到第二行时，将它们组织到左侧，而不是居中（基于数字该行上的元素）。此图像可能有帮助这是我的实际代码，我做错了什么？ #teamBoxesWrapper { position: relative; background-color: ; width: 1200px; height: au

-2热度

1回答

一些引导列重叠

我使用flex-column并将页面分成两个部分，这样当页面被调整大小时，右侧列可以移动到左侧部分下方。但是现在右列的图像重叠。这是我用于这两个部分的代码。 <div class="container">  <section class="flex-column col-lg-6 one">