问答中心分类: HTMLFlexbox没有为元素提供相等的宽度
0
匿名用户 提问 1月 前

尝试一个flexbox导航,最多有5个项目,只有3个,但它没有在所有元素之间平均划分宽度。
不停摆弄
我在后面建模的教程是http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/
SASS

* {
  font-size: 16px;
}

.tabs {
  max-width: 1010px;
  width: 100%;
  height: 5rem;
  border-bottom: solid 1px grey;
  margin: 0 0 0 6.5rem;
  display: table;
  table-layout: fixed;
}
.tabs ul {
  margin: 0;
  display: flex;
  flex-direction: row;
}
.tabs ul li {
  flex-grow: 1;
  list-style: none;
  text-align: center;
  font-size: 1.313rem;
  background: blue;
  color: white;
  height: inherit;
  left: auto;
  vertical-align: top;
  text-align: left;
  padding: 20px 20px 20px 70px;
  border-top-left-radius: 20px;
  border: solid 1px blue;
  cursor: pointer;
}
.tabs ul li.active {
  background: white;
  color: blue;
}
.tabs ul li:before {
  content: "";
}
Pizza
    Chicken Noodle Soup
    Peanut Butter
    Fish
3 Answers
0
alexJS 回答 1月 前

使用创建等宽图元的步骤Flex,您应该设置为的子项(flex元素):

flex-basis: 25%;
flex-grow: 0;

它将为行中的所有元素提供25%的宽度。它们不会一个接一个地长大。

Kloar 回复 1月 前

这相当尴尬,因为它完全削弱了flex的好处。如果你要硬编码你的列大小,有更简单的方法来解决问题。

Ilario Engler 回复 1月 前

这一点都没错。若你们想要有相同长度的盒子,当这一行完全被占用时,它们就会被分解。你们可以很容易地做到这一点。如果需要最小宽度,也可以设置最小宽度

user2999349 回复 1月 前

@Kloar你是说这是Flexbox的唯一好处……当你需要相等的宽度时,它们当然仍然是有益的,例如,响应性。而且,Flexbox不是不容易吗?

0
Zim 回答 1月 前

正如詹姆斯·蒙塔尼的回答中所解释的那样flex-basis: 0将确保flexbox列均匀分布,在这种情况下有效,因为列内容可以包裹,并且不会强制宽度。但是,在强制设置列内容宽度的情况下(例如,使用图像宽度或空白:nowrap),解决方案是设置min-width: 0

li {
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}

https://codeply.com/p/sLZxZRFduI

Sergei Kurochkin 回复 1月 前

最小宽度:0;使我的物品宽度相同以实现溢出

0
Rohit Nishad 回答 1月 前

解决方案:

flex: 1;

.flex-child-items{
   flex-grow: 1;
}

说明:
如果你只把display: flex它只是水平对齐所有项目,宽度将是sum儿童宽度(取决于内容或有时width属性)。
例如:
//正常弯曲

++++++++++   ++++++++++   ++++++++++
+        +   +        +   +        +
+   A    +   +   B    +   +   C    +
+  10px  +   +  10px  +   +  10px  +
+        +   +        +   +        +
++++++++++   ++++++++++   ++++++++++

现在假设你想把空间平均地分配给所有人。flex-grow: 1献给flex的所有孩子。(在本例A、B和C中)

.A, .B, .C {
    flex-grow: 1;
}

之后看起来是这样的:

++++++++++                              ++++++++++                              ++++++++++
+        +                              +        +                              +        +
+   A    +                              +   B    +                              +   C    +
+  10px  +                              +  10px  +                              +  10px  +
+        +                              +        +                              +        +
++++++++++                              ++++++++++                              ++++++++++

*顺便说一句,如果上面的示例框看起来不像中心,很抱歉,但是代码工作可以在项目中尝试。