问题标签 [flexboxgrid]

我想用 angular 4 构建一个响应式应用程序。我正在检查一些响应式平台，当然主要选项之一是angular flex-layout。

我用 angular flex-layout 制作了一些测试页面，我看到它不使用 css 媒体查询，所有的监听和响应都是通过 typescript 实现的。

这个事实会导致移动设备/低资源设备的性能问题吗？还有更多的响应框架，例如仅基于 css 的flexbox-grid。从性能的角度来看，使用基于 css 的平台而不是 angular flex-layout 不是更好吗？

我正在使用 Flexbox 网格 css 库 - flexboxgrid.com 并进行三列布局。在这三列布局中，我将在每一列中进行嵌套行。

我想实现嵌套行的高度也与所有其他列相同。

这是我目前正在实现的目标：

当前成就我希望第 4 部分与第 2 部分完全一致。

我还做了一个JSFiddle来展示我目前正在实现的目标。

HTML：

关于如何实现这一目标的任何解决方案？

非常感谢任何可以提供帮助的人。

我正在尝试使用 Flexbox 进行网格化，它运行良好，除非我尝试在以下情况下并排创建 2 列：

• 1 列中有一个图像（裁剪以填充该列）
• 1 列中有多行（图像和文本的组合）
• 两列高度相同

我在下面包含了 2 张图片，希望能说明我正在尝试做的事情。具有讽刺意味的是，具有行跨度的元素可以解决问题，但我想要 flexbox 提供的响应能力。

希望附上的图片能说明问题。任何帮助表示赞赏！

示例图片：1 个项目旁边的 3 个堆叠项目

示例图片：2 个堆叠在 1 个项目旁边的项目

我正在使用 Bootstrap，它在我的网站上加载：https ://www.larsbot.com/但该行的高度没有按预期增长。到目前为止，我的代码的更简洁版本如下：

在 Flexboxgrid 框架中我看到了一个margin关于类-1rem的。.row在小视口中，这会创建容器的小水平滚动。

既然我在其他框架上看到了这种负边距，那么它的目的是什么？内列具有相同数量的填充，相反。

图中红线为.container，虚线为.row。顺便说一句，边距仅在右侧可见。

Right away, I have to apologize for not knowing how to correctly phrase my question. Hopefully my point comes across in this description.

I have a full page landing graphic on a website that I'm working with. What I want to learn to do is to make a part of the graphic change when you mouse over it.

HTML

CSS

Thank you.

IMAGE-I would like to change each hexagon on mouse-over.

So I thought that maybe SVG animation could work for this. But I am not sure. I would like to add a mouse-over to each colored hexagon.

我正在使用 Flexbox，我正在尝试创建这样的东西：

我希望三个“父”框在行内垂直对齐。每个盒子都有不同的高度。

在片段中（Codepen在这种情况下更好，因为堆栈中有字符限制）我试图复制第一个框作为开始，这些框浮动到顶部。它们不是垂直对齐的：

当我尝试display: flex; align-items: center;在 CSS 中添加 for 时，它会与嵌套的 div 混淆：

我对 Flexbox 不是很熟悉，而且我在网上看到过很多没有帮助的不同版本。

我有这个组件：

我想要的是用style={styles.footer}（粘滞页脚）定位最新视图。我试图设置position: "absolute, bottom:0"，但没有工作。父容器 ( ScrollView) 有height:"100%"和position:"relative"，如果这对 React Native 来说很重要。

我正在尝试使用 flexbox 将 3 个元素定位在特定位置，同时水平和垂直居中。

像这样：

这就是我到目前为止所拥有的，我在这里做错了什么？

看看这个小提琴：https ://jsfiddle.net/u21uqs7q/

现在这个 HTML 是这样的错误

但我想要的是让Lorem ipsum文本溢出：滚动保持COL2的高度等于COL1像这样

如果Lorem Ipsum文本太短而不会溢出，那么它就会像这样克服自己

将广告保持在底部，因为Lorem Ipsum可以达到的最大高度。

在没有JS的情况下使用Bootstrap或CSS是否可行？

PS COL1没有/不能有Fixed-Height。

我目前正在使用 flex 和 flex-direction 行来处理具有固定宽度的项目行，这会导致溢出和水平滚动条，这就是我正在寻找的。

但是，我需要这些行中的第一列是全角的，而其余项目则随着水平滚动而流动。这就是为什么我不能使用包装。

这是页面：http ://dkrasniy.com/open-enroll/scrollable.html

注意：全角标题只能在移动视口上。

在“日历年免赔额”下，有“个人”和“家庭”行标题。这些是在移动设备上需要全宽的那些。

谢谢