CSS flexbox两列

文章/答案/技术大牛

发布

1回答

html、css、responsive-design、flexbox

我正在尝试使用flex box创建一个纯HTML/CSS站点，使用一个占据左侧50%的图像，一个占据右侧50%的文本框，以及占据它们下面100%宽度的文本框(稍后我想添加一个导航，也许是一个汉堡菜单，*我希望图像和右侧文本框在较小的设备上换行为一列(文本框顶部的img) ? 我遇到的问题是，将图像设置为最大宽度或最大高度100%会使它比它所在的div容器大，图像没有完全填满方框(我想保持图像与原始大小成比例) 正如你在下面看到的，图像并没有占据容器的100%，下面的CSS并不是我唯一用过的CSS。

浏览 8提问于2019-03-08得票数 0

回答已采纳

1回答

移动式柔性箱柱的倒塌

css、flexbox

我有两列(使用flexbox)和一个媒体查询断点。然而，我尝试了下面的css属性，以获得100%的列，并在移动时相互叠加。挠曲生长: 1；.flexbox-container { display: -webkit-flex;}.flexbox-column {

浏览 0提问于2018-05-25得票数 5

回答已采纳

3回答

使Bootstrap列调整为相邻列的高度

css、twitter-bootstrap、responsive-design

我希望两个bootstrap列始终具有相同的大小。这是一个场景：我希望包含文本的列的高度始终与左侧的图片相同。在我正在处理的另一个项目中，我通过签署一个JS脚本实现了这种效果，该脚本总是计算一列的高度，并将其应用于相邻的列。然而，我相信有一个更简单的解决方案。会很感谢你的建议。

浏览 1提问于2015-07-10得票数 1

8回答

CSS 100%高度在React应用程序中不起作用

css、reactjs

我正在尝试在我的React应用程序中使用Flexbox来创建一个简单的两列网页，它占据了整个宽度和高度。:root { height: 100%; min-height: 100% Right<&#

浏览 0提问于2017-10-16得票数 12

1回答

如何限制百分比CSS3网格列的宽度？

css、css-grid

我想要创建一个带有灵活列的网页布局，它可以被限制到特定的最大宽度。例如，一个侧边栏菜单占用了30%的可用水平空间，但不应该超过200‘t。使用CSS flexbox，我将使用这样的解决方案：.flexbox-layout {} flex: 1 1 30%;: lightgreen;<p>Layout based on CSS flexbox:</p>

浏览 1提问于2017-11-21得票数 6

1回答

如何在2栏中动态构建内容

css、reactjs、layout、grid

我正在尝试将一些帖子内容动态地放在两栏中，但我找不到正确的方法，你能帮我一点忙吗？

浏览 14提问于2020-12-21得票数 0

回答已采纳

2回答

flexbox和网格系统有什么不同？

css、flexbox、grid、css-grid

flexbox和网格系统之间有什么不同？我应该在什么情况下使用每个系统？

浏览 1提问于2018-04-30得票数 1

1回答

使用react、样式化组件等动态创建包含n行和n列的css网格/flexbox图片库

javascript、css、reactjs、flexbox、css-grid

我想试着重新创建一个图片库，它有n行，基于数组中图像的数量，而且每行的列/图像可以是单个大图像，两个小图像或3个甚至更小的图像。看起来他们正在使用flexbox和css网格，但我的大脑却在试图弄清楚这是如何做到的。它看起来几乎是随机生成的，列是1、2或3个图像宽度，但每次加载页面时都是相同的结果。我刚接触css网格和flexbox，所以很难弄清楚他们是如何根据图像的数量动态生成这个布局的。我正在使用react，styled-components，css

浏览 16提问于2020-06-23得票数 2

1回答

responsive-design、sass、height、susy

如何让SUSY中的列以流畅的方式等于行的高度？在任何地方都找不到答案，这对大多数SUSY用户肯定是有帮助的。因此，感谢您的贡献！@import "susy"; columns: 12, math: fluid,); CSS

浏览 5提问于2015-08-25得票数 0

2回答

如何使用flexbox列和悬停水平div？

html、css

我正在尝试构建一个具有类似于此图像的列标题的flexbox列，但是在悬停事件中，我希望将两个额外的div水平放置为布局图像。我可以编写一个概念验证UI HTML CSS，但如何构建标题标题或将标题标题放在div item之上，并悬停在水平额外的div上？注意:类似于下拉菜单，但是一旦鼠标悬停事件打开，在flexbox列上添加两个额外的div作为图像 display: flex; flex-direction

浏览 18提问于2021-02-18得票数 1

1回答

将空间百分比分配给子组件的子组件

html、css、reactjs、flexbox

因此，在我的app.js文件中，我有两个div，一个用于side，另一个用于main。在css中，我有flex: .35和flex: .65。我更改了每个div的背景颜色，并正确分配了空间。

浏览 11提问于2021-02-09得票数 0

回答已采纳

2回答

如何在webpack.config.dev.js文件中添加React FlexBox-Grid加载程序？

javascript、reactjs、webpack、create-react-app、react-flexbox-grid

{ loader: 'style!css?importLoaders=1!postcss' 安装的React FlexBox-网格使用以下npm命令安装了以下依赖项它的接缝反应-FlexBox-网格不是由网络包加载器选择的。我在这里的问题是如何

浏览 0提问于2016-12-21得票数 0

回答已采纳

2回答

使用带有引导的css在所有列中等高

html、css、twitter-bootstrap

目前，我在等高列中面临一个大问题，我搜索了，所以和我找到了一个解决方案。在div (行)中应用下面的css，即使在应用下面的css之后，当我在第三列中有5列时，当我在整个页脚中输入更多的数据时，第一列和第二列没有增加，这是没用的。

浏览 3提问于2016-03-06得票数 0

1回答

如何用flexbox动态实现3列3行布局

css、reactjs、layout、flexbox、next.js

我需要在nextjs上动态布局，3列3行，依此类推。实际上我用的是flexbox。有没有可能只用flexbox，Reactbootstrap或一些CSS就能做到这一点？ 

浏览 4提问于2021-09-29得票数 0

1回答

基于第二列百分比宽度的CSS网格动态填充

html、css、css-grid

我正在使用CSS并尝试创建一个包含两列的布局，其中一列将具有百分比宽度，另一列将根据所设置的百分比宽度动态填充。我是不是想得太多了，还是CSS网格不可能？我已经在Flexbox中这样做了，所以我不会寻找任何关于这个方法的答案。

浏览 5提问于2022-03-14得票数 1

回答已采纳

点击加载更多