代码之家 › 专栏 › 技术社区 › accelerate

使用空白创建大小相等的div:nowrap

flexbox css html

accelerate · 技术社区 · 7 年前

我试图在一行中创建一系列div,每个div的宽度相等,宽度是最长div的长度。换言之,如果我有以下内容:

<div class="wrapper">
  <div>Hello</div>
  <div>Goodbye</div>
  <div>Some really long text</div>
  <div>More text</div>
</div>

我希望所有文本都在一行上(所以 white-space: nowrap ),每个div都是最长div的长度,在本例中,这将是“一些非常长的文本”。

我的方法是使用内联flex,如下所示:

.wrapper {
  display: inline-flex;
  flex-flow: row nowrap;
}
.wrapper > div {
  border: 1px solid red;
  flex: 1 1 25%;
  padding: 5px 10px;
  white-space: nowrap;
}

这种方法不起作用,因为我的div大小不同。然而 ,如果我删除 空白:nowrap ,则我的div大小相等,但现在文本已换行。

这是两个版本的代码笔: https://codepen.io/unpossible/pen/xjxKBM

那么,有没有办法将第一次尝试的无包装与第二次尝试的等长div结合起来呢?

2 回复 | 直到 7 年前

Adam ZBWR 7 年前

使用网格布局而不是flex更改包装器 inline-grid

你可以在这里找到更多信息 CSS Grid Layout

检查一下这个 codepen for your answer

.wrapper {
  display: inline-grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

Obsidian Age 7 年前

您只需设置 flex-shrink 到 0 。
本质上,你只是在寻找 flex: 1 0 25% 而不是 flex: 1 1 25% :

.wrapper {
  display: inline-flex;
  flex-flow: row nowrap;
}
.wrapper > div {
  border: 1px solid red;
  flex: 1 0 25%;
  padding: 5px 10px;
  white-space: nowrap;
}

<div class="wrapper">
  <div>Hello</div>
  <div>Goodbye</div>
  <div>Some really long text</div>
  <div>More text</div>
</div>

推荐文章

Luca Phillips · 当表是div flex的子级时,它有巨大的空间

2 年前

Nishit Agrawal · Flexbox-将第三项与第二项对齐

2 年前

alan · 有没有办法向flexbox图像添加链接?

2 年前

Gary · CSS在弹性方框布局中用句点字符串填充段落剩余部分的方法?

2 年前

n1234 · Flexbox-图像和内容

6 年前

nCardot · 为什么是!h1元素媒体查询工作所需的重要信息?[副本]

6 年前

Adam Olsson · 在中心CSS中对齐单个列表项

6 年前

London804 · 我是否可以使设置为对齐内容的元素:换行时间距向右对齐?

6 年前

user3137124 · 当“flex direction”为“column”时,如何将div与顶部对齐?[副本]

6 年前

AJ- · 无法垂直对齐文本-angularJS+bootstrap+flexbox

6 年前