[英]Make flex container take width of content, not width 100%
In the below example, I have a button with the following styles...在下面的示例中,我有一个具有以下样式的按钮...
.button-flexbox-approach {
/* other button styles */
display: flex;
justify-content: center;
align-items: center;
padding: 1.5rem 2rem;
}
http://codepen.io/3stacks/pen/JWErZJ http://codepen.io/3stacks/pen/JWErZJ
But it automatically scales to 100% instead of the width of the content.但它会自动缩放到 100% 而不是内容的宽度。 You can set an explicit width, but then that doesn't allow your text to wrap naturally.您可以设置明确的宽度,但这不允许您的文本自然换行。
How can I make a button that has the inner text centered with flexbox, but doesn't grow to fit the size of the container?如何制作一个内部文本以 flexbox 居中的按钮,但不会增长以适应容器的大小?
.container { width: 100%; height: 100%; } .button { /* Simply flexing the button makes it grow to the size of the container... How do we make it only the size of the content inside it? */ display: flex; justify-content: center; align-items: center; -webkit-appearance: none; border-radius: 0; border-style: solid; border-width: 0; cursor: pointer; font-weight: normal; line-height: normal; margin: 0; position: relative; text-align: center; text-decoration: none; padding: 1rem 2rem 1.0625rem 2rem; font-size: 1rem; background-color: #D60C8B; border-color: #ab0a6f; color: #fff; } .one { margin-bottom: 1rem; } .two { /* You can put an explicit width on that, but then you lose the flexibility with the content inside */ width: 250px; }
<div class="container"> <p> Button one is flexed with no width and it grows to the size of its container </p> <p> <a class="button one" href="#">Button</a> </p> <p> Button two is flexed with an explicit width which makes it smaller, but we have no flexibility for changing the content </p> <p> <a class="button two" href="#">Button 2</a> </p> </div>
Instead of display: flex
on the container, use display: inline-flex
.而不是display: flex
在容器上,使用display: inline-flex
。
This switches the container from block-level (which takes the full width of its parent) to inline-level (which takes the width of its content).这会将容器从块级(占用其父级的全部宽度)切换到行内级(占用其内容的宽度)。
This sizing behavior is similar to display: block
vs. display: inline-block
.这种调整大小的行为类似于display: block
vs. display: inline-block
。
For a related problem and solution see:有关相关问题和解决方案,请参阅:
EDIT: Michael_B pointed out in his answer that inline-flex on the parent is the correct property for this use-case.编辑:Michael_B 在他的回答中指出,父级上的 inline-flex 是此用例的正确属性。 I've updated my blog post accordingly.我已经相应地更新了我的博客文章。
It's not ideal, but if you wrap the button in a container that is inline-block, the button will scale naturally with the content, like so:这并不理想,但如果您将按钮包装在一个内联块容器中,按钮将随内容自然缩放,如下所示:
.button { /* other button styles */ display: flex; justify-content: center; align-items: center; padding: 1.5rem 2rem; }
<div style="display: inline-block;"> <a class="button">Button</a> </div>
You can then set the max-width on the container and the text will wrap to multiple lines, but retain the correct vertical centering.然后您可以在容器上设置最大宽度,文本将换行成多行,但保持正确的垂直居中。
I've detailed this in my most recent blog post: https://lukeboyle.com/css-buttons-solved-flexbox/我在我最近的博文中对此进行了详细说明: https : //lukeboyle.com/css-buttons-solved-flexbox/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.