我有一个部分有 2 列被拉到 flexbox 的中心,但无论出于何种原因,容器不会水平环绕它们,而是填满整个页面。
我该怎么做才能使该部分环绕文本(预期填充为 1rem)?
body {
background-color: #444;
color: white;
}
section {
border-style: solid;
border-image: linear-gradient(to top right, goldenrod 0%, transparent 25%, transparent 75%, goldenrod 100%) 2;
display: flex;
padding: 1rem;
justify-content: center;
align-items: center;
width: auto;
}
section>div {
display: flex;
flex-direction: column;
}
section>div:first-child {
border-right: 2px solid goldenrod;
padding-right: 1rem;
align-items: flex-end;
}
section>div:not(:first-child) {
padding-left: 1rem;
}
<section>
<div>
<p>Line First</p>
<p>Line Second</p>
</div>
<div>
<p>Line First</p>
<p>Line Second</p>
</div>
</section>
JSFiddle: https://jsfiddle.net/mjp1qozs/3/
最佳答案
max-width: fit-content;
和
一样好用display: inline-flex;
如果你不需要另一个max-with
(也是fit-content is partially supported),请先使用
如果 inline
元素适合您的情况,则使用第二个
关于html - 如何阻止 flex 拉伸(stretch)到 100% 宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54355072/