英文:
Centering a flexbox that has a minimum and a maximum
问题
我有一些具有最小和最大宽度的内容。
它们位于一个可以收缩和扩展的容器中，但不应违反这些约束。
如果有足够的空间，我希望将该容器居中，但我只能使其填充其父容器（使用flex-grow）或保持在最小尺寸（不使用flex-grow）。
换句话说，在这个例子中，我希望：
- 橙色框在红色框中居中。
- 橙色框紧密贴合绿色框。
- 每个绿色框的宽度为100像素。
以下是示例代码：
<div class="parent">
<div class="inline-flexbox">
<div class="flex-content"></div>
<div class="flex-content"></div>
</div>
</div>
.parent {
display: flex;
justify-content: center;
align-items: center;
height: 10rem;
width: 90%;
background: red;
padding: 1rem;
}
.inline-flexbox {
/* 在这里我该怎么做才能使内联flexbox增长到其内容的最大值？
（2 * 100像素 + 一些padding）
flex-grow: 1不起作用，因为它会填充其父容器 */
display: inline-flex;
flex-grow: 1;
height: 80%;
padding: 1rem;
background: orange;
column-gap: 1rem;
}
.flex-content {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100px;
max-width: 100px;
min-width: 20px;
height: 100%;
background: green;
}
希望对你有所帮助！
英文:
I've got some contents that have a minimum and a maximum width.
They are in a container that can shrink and grow, but should never break these constraints.
I want to center that container if there's ample space, but I can only get it to fill its parent (using flex-grow) or remain at the minimum dimensions (not using flex-grow).
In other words, in this example, I want:
- the orange to be centered in the red
- the orange to tightly hug the green
- each green to be 100px wide
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-css -->
.parent {
display: flex;
justify-content: center;
align-items: center;
/* To make it visible */
height: 10rem;
width: 90%;
background: red;
padding: 1rem;
}
.inline-flexbox {
/* What do I do here to make this inline-flexbox grow up to the maximum of its contents?
(2 * 100 px + some padding)
flex-grow: 1; doesn't work, because then it fills its parent */
display: inline-flex;
flex-grow: 1;
/* To make it visible */
height: 80%;
padding: 1rem;
background: orange;
column-gap: 1rem;
}
.flex-content {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100px;
max-width: 100px;
min-width: 20px;
/* To make it visible: */
height: 100%;
background: green;
}
<!-- language: lang-html -->
<div class="parent">
<div class="inline-flexbox">
<div class="flex-content"></div>
<div class="flex-content"></div>
</div>
</div>
<!-- end snippet -->
答案1
得分: 1
不要使用max-width，而是定义宽度，收缩效果会使它们变小（如果需要）。
.parent {
display: flex;
justify-content: center;
align-items: center;
height: 10rem;
width: 90%;
background: red;
padding: 1rem;
}
.inline-flexbox {
display: flex;
min-width: 0; /* 不要忘记这个 */
height: 80%;
padding: 1rem;
background: orange;
gap: 1rem;
}
.flex-content {
width: 100px;
min-width: 20px;
height: 100%;
background: green;
}
<div class="parent">
<div class="inline-flexbox">
<div class="flex-content"></div>
<div class="flex-content"></div>
</div>
</div>
英文:
Don't use max-width but define width and the shrink effect will make them smaller if needed.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.parent {
display: flex;
justify-content: center;
align-items: center;
height: 10rem;
width: 90%;
background: red;
padding: 1rem;
}
.inline-flexbox {
display: flex;
min-width: 0; /* don't forget this */
height: 80%;
padding: 1rem;
background: orange;
gap: 1rem;
}
.flex-content {
width: 100px;
min-width: 20px;
height: 100%;
background: green;
}
<!-- language: lang-html -->
<div class="parent">
<div class="inline-flexbox">
<div class="flex-content"></div>
<div class="flex-content"></div>
</div>
</div>
<!-- end snippet -->
答案2
得分: -1
使用justify-content: center;和align-items: center;在父元素div中可以完成这个任务，就像我下面所做的那样，或者你可以使用place-item: center;，但我不太确定。
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-css -->
.parent {
display: flex;
justify-content: center;
align-items: center;
/* To make it visible */
height: 10rem;
width: 90%;
background: red;
padding: 1rem;
}
.inline-flexbox {
/* What do I do here to make this inline-flexbox grow up to the maximum of its contents?
(2 * 100 px + some padding)
flex-grow: 1; doesn't work, because then it fills its parent */
display: inline-flex;
flex-grow: 1;
/* To make it visible */
height: 80%;
padding: 1rem;
background: orange;
column-gap: 1rem;
justify-content: center;
align-items: center;
}
.flex-content {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100px;
max-width: 100px;
min-width: 20px;
/* To make it visible: */
height: 100%;
background: green;
}
<!-- language: lang-html -->
<div class="parent">
<div class="inline-flexbox">
<div class="flex-content"></div>
<div class="flex-content"></div>
</div>
</div>
<!-- end snippet -->
英文:
Using justify-content: center; and align-items: center; in the parents div would do the job like I did below or you use place-item: center; I think but am not too sure
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-css -->
.parent {
display: flex;
justify-content: center;
align-items: center;
/* To make it visible */
height: 10rem;
width: 90%;
background: red;
padding: 1rem;
}
.inline-flexbox {
/* What do I do here to make this inline-flexbox grow up to the maximum of its contents?
(2 * 100 px + some padding)
flex-grow: 1; doesn't work, because then it fills its parent */
display: inline-flex;
flex-grow: 1;
/* To make it visible */
height: 80%;
padding: 1rem;
background: orange;
column-gap: 1rem;
Justify-content: center;
Align-items: center;
}
.flex-content {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100px;
max-width: 100px;
min-width: 20px;
/* To make it visible: */
height: 100%;
background: green;
}
<!-- language: lang-html -->
<div class="parent">
<div class="inline-flexbox">
<div class="flex-content"></div>
<div class="flex-content"></div>
</div>
</div>
<!-- end snippet -->
答案3
得分: -1
以下是翻译的内容：
这是一个工作示例：
最大宽度：100px；
最小宽度：100px。
原因：宽度（max和min）都被应用。
如果最大宽度为100px，最小宽度为20px，那么宽度将为20px（将显示默认值），最大宽度可以达到100px。
CSS代码如下：
.parent {
display: flex;
justify-content: center;
align-items: center;
/* 使其可见 */
height: 10rem;
width: 90%;
background: red;
padding: 1rem;
}
.inline-flexbox {
display: flex;
width: auto;
/* 使其可见 */
height: 80%;
padding: 1rem;
background: orange;
column-gap: 1rem;
}
.flex-content {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100px;
max-width: 100px;
min-width: 100px;
/* 使其可见 */
height: 100%;
background: green;
}
HTML代码如下：
英文:
Here is the working example : <br>
max-width : 100px;<br>
min-width : 100px; <br>
Reason : width -> (max & min) both applied <br>
if max-width : 100px & min-width : 20px;<br> so, width will be 20px for minimum default (will show default) and maximum it can go upto 100px;
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.parent {
display: flex;
justify-content: center;
align-items: center;
/* To make it visible */
height: 10rem;
width: 90%;
background: red;
padding: 1rem;
}
.inline-flexbox {
display: flex;
width: auto;
/* To make it visible */
height: 80%;
padding: 1rem;
background: orange;
column-gap: 1rem;
}
.flex-content {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100px;
max-width: 100px;
min-width: 100px;
/* To make it visible: */
height: 100%;
background: green;
}
<!-- language: lang-html -->
<div class="parent">
<div class="inline-flexbox">
<div class="flex-content"></div>
<div class="flex-content"></div>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论