flexbox相关内容

使用 CSS 在 flexbox 中创建侧边栏

在我的页面上,我想有一个标题,在此之下,我想在左侧有一个侧边栏,在右侧有一个内容页面. 侧边栏的宽度应为 X(可能为 100 像素),内容页面的宽度应为整个窗口的其余部分. 我开始创建这个,但我的侧边栏和内容页面没有全高.即使将高度设置为 100%,也不会填满页面的其余部分. 为什么我必须为侧边栏设置最小和最大宽度而不是宽度?设置 width: 100px 时,宽度返回 70px ..
发布时间:2021-12-31 13:13:25 前端开发

居中 flex 项目,行尾有一个

我正在用 flexbox 创建一个导航栏.这是我的 html: 项目 关于项目 联系我们 邮箱 还有我的css: .container {显示:弹性,对齐内容:中心} 这是目前的样子: 我希望 mailbox div 位于 flex 容器 的末尾.我希望它看起来更像这样. 我在那个 flex 项 ..
发布时间:2021-12-31 13:13:05 前端开发

空间均匀(对齐内容)不适用于 Chrome 移动设备

我对 Chrome 移动设备上 justify-content 的 space-evenly 值有问题(它在桌面和 Firefox 移动设备上运行良好). 我设法制作了一个最小的示例:示例 我有一个行方向的 flex 容器,我希望元素按使用 space-evenly 时的预期均匀间隔.它适用于桌面,但适用于 Chrome 移动设备(Android 版本 59),但是,元素在左侧对齐.下 ..
发布时间:2021-12-31 13:12:59 前端开发

弹性盒.避免孩子身高比父母长(列方向)

我正在使用 flexbox 搭建一个网站的基本 UI.与通常的电子邮件布局非常相似. 出于某种原因,列式 flexbox 容器 (.content-main, plum 颜色) 的高度比它的父级大,这是我不想要的. 我制作了一个 codepen 片段来展示这种行为. html,身体 {宽度:100%;高度:100%;背景:浅蓝色;box-sizing: 边框框;}* {box-s ..
发布时间:2021-12-31 13:12:52 前端开发

Flexbox, min-height, margin auto 和 Internet Explorer

我使用 display: flex 和 margin: auto 来获得这种布局: 这适用于所有支持 Flexbox 的浏览器,甚至 IE. 但是,如果没有一个小例外:min-height,那就太容易了. 您可以在此处找到一个简单的工作示例.在我的包装器上使用 min-height 时,最后一个元素不会被推到这个包装器的底部(仅限 IE). 我无法让它工作,你们女孩/男孩有什么 ..
发布时间:2021-12-31 13:12:42 前端开发

使用 flexbox 获取 pinterest 或 jQuery 砌体布局

想知道仅使用新的 flexbox 布局是否可以获得与 pinterest 或 jQuery masonry 相同类型的设计布局.据我所知: .flex-container {显示:-webkit-flex;显示:弹性;-webkit-flex-flow:行换行;flex-flow:行包装;}.物品 {宽度:220px;高度:250px;边距:10px 自动;填充:0;背景:#ccc;}.item ..
发布时间:2021-12-31 13:12:36 PHP

在flexbox中保持一个元素在两个不同宽度的元素之间居中

我正在制作一个音乐播放控制器,容器有 3 个部分:左、中和右.但是,由于左侧和右侧的宽度不同,中心部分不在 div 的真正中心,但我需要它.我正在使用 flexbox 的 space-between 选项来布局项目. #container {显示:弹性;对齐内容:间隔;背景颜色:浅灰色;}#容器>div {高度:100px;边框:2px 红色虚线;/*这只是为了外观*/文本对齐:居中;填充: ..
发布时间:2021-12-31 13:12:29 前端开发

Flexbox 中心和右下角的项目

我正在尝试使用 flexbox 实现以下结果: 我尝试了以下 html,但我无法让它工作. 框 A 中的一些文本 框 B 中的一些文本.... CSS: .flex-center {显示:弹性;对齐项目:居中;对齐内容:居中;对齐内容:居中 ..
发布时间:2021-12-31 13:12:19 前端开发

为什么 flexbox item 图像会根据它们的初始大小调整不同的大小?

我有四个图像:两个小,两个大(尺寸以 html 显示).它们都将 img 宽度设置为 100%,但它们的父 div 设置为特定宽度.当我调整浏览器窗口大小时,较小的图像会立即缩小,而较大的则不会. 我在 div 周围有一个红色边框,在 imgs 周围有一个绿色边框.较小图像的绿色边框先于较大图像缩小.这是为什么? http://jsfiddle.net/brcrnj80/6/ img ..
发布时间:2021-12-31 13:12:11 前端开发

flexbox 可以在多行上均匀划分项目吗?

我玩过响应式 flexbox 网格,没有媒体查询. http://jsbin.com/qurumisu/1(重新缩放窗口以查看其工作原理) 它适合每行尽可能多的 flex 项目,并均匀地拉伸它们的宽度以填充整行.但是,这对“孤立"项目没有帮助.如果第一行适合 5/6 个项目,那么第二行就只剩下一个了,这使得它比它的兄弟姐妹伸展得更宽.我更愿意通过将元素按所需的行数平均划分来避免这种行为 ..
发布时间:2021-12-31 13:12:04 前端开发

每行显示 2 个项目[反应原生]

我正在学习 react native,在所有教程中,我看到 ListView 只使用了每行 1 个项目.不过,我没有使用过 ListView.我只有 6 个项目必须显示为平面网格,每行 2 个项目并且应该是响应式的.我知道这是一个基本问题,但我也从我这边尝试过,可以在图像中看到 这是我的代码 renderDeviceEventList() {返回 _.map(this.props.dev ..
发布时间:2021-12-31 13:11:55 前端开发

在 Flexbox 中扩展 iframe

我正在尝试拉伸 iframe 的大小以填充我的网络应用程序中的剩余空间.我知道为 div 分配了最大空间(通过添加边框),但是 iframe 高度本身并没有扩展以填充整个垂直高度. 问题是 row content iframe 没有填充整个垂直空间,即使 flexbox 适当地分配了该空间. 有什么想法吗? .box {显示:弹性;弹性流:列;高度:100vh;}.box .ro ..
发布时间:2021-12-31 13:11:43 前端开发

在 flexbox 容器 div 中覆盖/悬停一个 div

我正在尝试覆盖一个可以在 flexbox 容器中浮动的 div. header 是一个 flexbox 容器,并且有 3 个 flexbox div 在容器中工作.我想覆盖其他三个 div 但仍被限制在 .header flexbox 容器 div 内的叠加层. 我已经在 stackoverflow 和其他地方尝试了多种方法,但是怎么没有看到结合 flexbox 使用时解决覆盖或分层的 ..
发布时间:2021-12-31 13:11:25 前端开发

图像未在 flexbox 布局中调整大小

我尝试遵循这个答案中的建议,如本CodePen,但需要弯曲的图像仍保持其原始尺寸,除非屏幕太窄以至于单独显示行. 在类似情况下,真实页面中还有另一组 div - 如果侧边 div 缩小,这将有助于页面在更大的宽度范围内工作. 它包裹的 div 上面有 flex: auto; 和 img {width: 90%;height: auto;} 对于其中的任何图像,该 div 的父级都有 s ..
发布时间:2021-12-31 13:11:17 前端开发

嵌套的 flexboxes 跨浏览器的工作方式不同

我有一个嵌套 flexbox 设置的小例子:http://jsfiddle.net/ThomasSpiessens/MUrPj/12/ 在此示例中,以下内容适用: CSS 'box' 类使用 flexbox 属性,只有 boxContent 被告知在其上增长.对于特定的 CSS 属性和值,请查看 fiddle. 'fullSize' 只是将宽度和高度都设置为 100%. 当你用 ..
发布时间:2021-12-31 13:11:10 前端开发

如何将 flex-container 设置为其 flex-item 的宽度?

我有一个带有 justify-content: flex-start 的 flex 容器.由于 flex 项目占用的空间小于容器的大小,因此最终会在右侧溢出. 除了在 flex-container 上设置显式宽度之外,有没有一种方法可以只使用 width: auto 的等效项来消除溢出? 解决方案 如果你的意思是你想让容器成为项目的宽度,而不是项目扩展到容器宽度... 您可以通 ..
发布时间:2021-12-31 13:10:45 前端开发