我有一个父容器,其柔性显示和宽度设置为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>
如果要使用全长按钮,只需删除最小宽度和最大宽度。
.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'
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%;
}