Question

我有一个弹性显示的父容器，宽度设置为100％，其子元素（子容器）设置为最大宽度为25％。

子容器上的按钮分配有最小宽度和最大宽度，如下所示。即使最大宽度设置为100％，按钮也不会占据子容器的100％。

我尝试添加flex-items和flex自拉伸，但是它们不会占用100％的宽度。

小提琴上的代码和样式链接：https://codesandbox.io/s/nice-field-9ckst 当屏幕变宽时，它们似乎不会占据其父屏幕的100％，即整个屏幕的25％。我试图使按钮随时占据整个屏幕的25％。任何建议，我们都会感激不尽。

.App {
  font-family: sans-serif;
  text-align: center;
  display: flex;
  flex: 1;
  width: 100%;
  flex-wrap: nowrap;
}

.subcontainer {
  flex: 1;
  align-items: stretch;
  max-width: 25%;
}

.label {
  align-content: left;
}

.buttonStyle {
  display: flex;
  align-self: stretch;
  min-width: 150px;
  max-width: 100%;
}

<div class="App">
  <div class="subcontainer">
    <button class="buttonStyle">
          <div class="label">label1</div>
        </button>
  </div>
  <div class="subcontainer">
    <button class="buttonStyle">
             <div class="label">label2</div>
        </button>
  </div>
  <div class="subcontainer">
    <button class="buttonStyle">
          <div class="label">label3</div>
        </button>
  </div>
</div>

Answer 1

DEMO链接：https://codesandbox.io/s/recursing-leavitt-bqccz

删除flex：1;从.subcontainer类更改为.subcontainer类，将max-width：100％更改为min-width：100％;。

.subcontainer {
  align-items: stretch;
  min-width: 25%;
}

将.buttonStyle类的最大宽度：100％更改为宽度：100％。

.buttonStyle {
  display: flex;
  align-self: stretch;
  min-width: 150px;
  width: 100%;
}

尝试以下给定的css，子元素占25％的宽度：

.App {
  font-family: sans-serif;
  text-align: center;
  display: flex;
  flex: 1;
  width: 100%;
  flex-wrap: nowrap;
}
.subcontainer {
  align-items: stretch;
  min-width: 25%;
}

.label {
  align-content: left;
  /* display: flex; */
}
.buttonStyle {
  display: flex;
  align-self: stretch;
  min-width: 150px;
  width: 100%;
}

Answer 2

如果要使用全长按钮，只需删除最小宽度和最大宽度。

.App {
  font-family: sans-serif;
  display: flex;
  align-items: center;
  width: 100%;
  flex-wrap: nowrap;
}

.subcontainer {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 25%;
}

.label {
  align-content: left;
}

.buttonStyle {
  width: 100%;
}

<div class="App">
  <div class="subcontainer">
    <button class="buttonStyle">
      <div class="label">label1</div>
    </button>
  </div>
  <div class="subcontainer">
    <button class="buttonStyle">
      <div class="label">label2</div>
    </button>
  </div>
  <div class="subcontainer">
    <button class="buttonStyle">
      <div class="label">label3</div>
    </button>
  </div>
</div>

当您使用ctrl + c和ctrl + v时，请不要忘记将“ class”更改为“ className”

Flexbox：子项不占父项的100％，仅占用其最小宽度

2 个答案: