Flexbox:子项未占据父项的100%,仅占据其最小宽度

问题描述 投票:0回答:2

我有一个父容器,其柔性显示和宽度设置为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>
css flexbox
2个回答
1
投票

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

.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'


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%;
}
© www.soinside.com 2019 - 2024. All rights reserved.