纯 CSS 砌体布局
..
flexbox相关内容
您如何允许用户手动调整 <div>垂直元素?
我在另一个 div 中有 2 个 div 元素，它们每个都显示为一个块.所以 div1 就在 div2 的上方. 我想添加一个用户可以单击并拖动的“栏"，最终会调整 div2 的大小，并且 div1 将由数量相同. div1 和 div2 的父级有样式:display:flex;flex-direction:column; 和 div1 有 flex-grow:1 所以它会自动调整大小
..
CSS:扩展 <div>从右到左显示文字
我想设置一个固定的
，包含一个图标，当鼠标悬停在上面时会从右向左展开(
展开，而不是图标)，在图标左侧显示一段文字.图标的位置保持不变.这是一个草图来帮助说明我想做的事情: 在悬停时更改
的大小没有问题，我只需添加一个宽度更大的类(包括为展开动画制作的过渡).但我在元素的定位上挣扎.我将图标和文本(在 内)放在单独的
中，并尝试使用 f
..
当窗口变小时，Flex 项目不会缩小
我正在尝试在 CSS flexbox 中放置两个相邻的绘图.我希望它们在调整窗口大小时调整大小.当窗口变大时，它按预期工作，但当窗口变小时，绘图不会缩小. var trace1 = {};var trace2 = {};var plotdiv1 = document.getElementById("plotdiv1");var plotdiv2 = document.getElementBy
..
嵌套弹性盒子
我发现 flex box 真的很有用，自从我发现它后，我很想在任何地方使用它. 问题 嵌套弹性盒子是个好习惯吗?有很多，尤其是嵌套的，对性能有影响吗? 解决方案 简而言之，是的，您会看到性能下降约 10 倍，但我们仍在讨论毫秒数. 所以我会谨慎使用它们，因为可以将渲染速度从 10 毫秒更改为 100 毫秒，其中很多本质上会大大增加渲染时间. 此外，它们与浏览器具有可
..
CSS Flexbox 浮动元素
我正在尝试使用 flex 在“图形"元素的右侧浮动两个元素，但它最终仅浮动 div1 在图形的右侧，并且 div2 被移动到下面，如果我使 div1 和 div2 足够窄，它们浮动在图的右侧. 这是 CSS: .container {显示:弯曲；弹性包装:换行；对齐项目:弹性开始；} 期望的结果: 实际结果: 解决方案 它是如何工作的? 首先，您创建一个 flex-c
..
img 设置 flex-grow 填充 flex 容器剩余空间，导致 flex 内部溢出 flex 容器
以下是我的代码，“text1"；溢出 flex 容器，我希望 flex 容器中的 img + text 和 img 填充 flex 容器休息 解决方案 /* CSS */.C {宽度:100px；高度:100px；边框:5px 纯浅蓝色；位置:相对；文本对齐:居中；
..
使用 flexbox 具有相同高度元素的多线网格
我正在尝试创建一个包含多行和多列的网格.我希望它们都使用 flexbox 具有相同的高度，但我唯一能得到的是在一行上具有相同大小的列. 这是我正在尝试做的一个示例:http://jsbin.com/maxavahesa/1/edit?html,css,output 在这个例子中，我希望我的所有 具有相同的高度，这意味着最大项目的高度(在我的例子中，这将是最后一个 ).是否可以
..
如何使用 vue 创建动态网格?
使用 Vue 动态创建网格的最佳方法是什么? 我正在考虑使用 v-for 循环在页面上为 X 个“模块"生成卡片，但希望将它们排列成 3 行. 例如 卡片 |卡 |卡片卡 |卡 |卡片 解决方案 你可以使用 CSS 网格布局，请务必检查浏览器支持.p> 我们需要使用 display: grid 使容器成为网格容器，并使用 grid-template-columns. 您
..
在嵌套的 flexbox 内滚动
我正在开发一个 React 应用程序，该应用程序有一个模式，其中包含一些偶尔需要滚动的选项卡式内容.但是，问题是我无法获得正确的滚动内容. 模态分为三个主要部分: 页眉 应该始终在模态框的顶部可见 内容 应该填充 Header 和 Footer 之间的空间，但绝不要从视图中强制任何一个 页脚 在内容 下方应始终可见这可能意味着在模式的底部(如果 Content 填充
..
ionic 2 使用 ion-grid 垂直对齐
我在 Ionic 2 的屏幕中有 2 个按钮，我想在屏幕中间将它们对齐(一个在另一个之上，但在一起)(水平和垂直对齐). 我想使用 ion-grid，没有填充、边距、浮点数或百分比. 所以我有这个 按钮 1按钮 2
..
Zebra 使用包装项目对 flexbox 表进行条带化
我正在寻找最简单的方法来对以下响应式 flexbox 表上的行进行斑马条纹处理. 换句话说，本例中的第 2 行和第 4 行，但没有限制，我不知道会有多少行，因为这是用于 CMS 系统中的可重用组件. HTML 不能更改，但行数和列数会经常更改.我很高兴对列而不是行设置限制. 有没有办法在纯 CSS 中做到这一点? .Rtable {显示:弯曲；弹性包装:换行；}.Rtabl
..
行 flexbox 内的嵌套列 flexbox 带包装
我在这里有一个带有嵌套 flex 框的页面:http://jsfiddle.net/fr0/6dqLh30d/
1
2
3
..
如何使用 flexbox 实现复杂的响应式 HTML 布局?
我研究了 Flexbox 以实现如下图所示的响应式布局.不幸的是，我仍然没有弄清楚如何实现如图 1 所示的桌面布局，该布局在小于 414 像素的视口上将自身重新排列为图 2. 图 1(桌面视口) 图 2(移动视口) (缩放版) 点击此处查看原始尺寸的图像 到目前为止我的代码: .flexbox {显示:-webkit-box；显示:-ms-flexbox；显示:
..
响应式设计:将任何屏幕尺寸的全屏方块集中
问题很简单: 我的页面的主要部分是一个正方形，应该以所有屏幕尺寸和方向显示在屏幕中央 正方形应该有效地使用屏幕，并且在不需要滚动的情况下尽可能大 没有滚动条、没有固定大小、没有溢出隐藏、没有 Javascript. 鼓励使用 Flexbox. 这是页面在横向或纵向浏览器中的外观: 这里以 CodePen 作为起点.
正方形 解决
..
如何在较小的屏幕上更改 div 的顺序?
当屏幕尺寸小于 480 像素时，我需要重新排列 div. 我不想使用 position: absolute 因为绿色区域的高度可能会因文本数量而异. 我需要小屏幕的顺序是红色、绿色、红色、绿色、红色、绿色(每个红色都在紧邻的绿色之上，宽度为 100%). 有什么想法吗?非常感谢 *, html, body {边距:0；填充:0；}.容器 {宽度:100%；显示:内联块；bo
..
flex-wrap 在 Safari 中无法按预期工作
http://www.shopifyexperte.de/ 的主页上有两个 flex-box 模块，一个在“Kundenstimmen"和“Neueste Beiträge..."下的一个.内盒应该在低于 220 像素时包裹，并且不会超过 30% 的宽度.这适用于最新的 Chrome、FF 和 Opera(都在 Mac 上)，但在 Safari 8.0.5 (Mac) 和任何 iOS 浏览器中，即
..
如何垂直居中 flexbox 项目的内容
我试图在使用 justify-content:stretch; 时将 flexbox 项目的内容居中 看来使用 display:table-cell;vertical-align 的老技巧:middle; 在这种情况下不起作用.有什么作用? .flex-container {显示:弹性；对齐项目:居中；对齐内容:拉伸；}.flex-item {对齐自我:伸展；}
..
火狐、Flexbox 和溢出
在上次 firefox-update 之后，一些 css3 代码被破坏了... 示例 (jsfiddle). 在铬中: 在 Firefox 34 中: 是bug吗?还是正常上班?我需要更改什么才能修复它?为什么 #flex 不能正确调整大小? HTML:
123
..
空白:nowrap 打破了 flexbox 布局
我使用 Flexbox 为应用程序创建了响应式布局.布局要求左侧有一个可折叠的菜单，中间有一个标题和正文的块，右侧有一个可切换的帮助窗格(还有更多内容，但这是基本结构). 左侧菜单有两种状态:180 像素宽或 80 像素宽.帮助窗格要么隐藏，要么占用 180 像素.中间的盒子占据了其余的空间.Flexbox 就像一个魅力. 当我使用 white-space: nowrap 制作滚动 d
..