I have a container <div> with display: flex. It has a child <a>.
How can I make the child appear "inline"?
Specifically, how can I make the child's width determined by its content, and not expand to the width of the parent?
What I tried:
I set the child to display: inline-flex, but it still took up the full width. I also tried all other display properties, but nothing had an effect.
Example:
.container { background: red; height: 200px; flex-direction: column; padding: 10px; display: flex; } a { display: inline-flex; padding: 10px 40px; background: pink; }
Use align-items: flex-start on the container, or align-self: flex-start on the flex items.
No need for display: inline-flex.
An initial setting of a flex container is align-items: stretch. This means that flex items will expand to cover the full length of the container along the cross axis.
The align-self property does the same thing as align-items, except that align-self applies to flex items while align-items applies to the flex container.
By default, align-self inherits the value of align-items.
Since your container is flex-direction: column, the cross axis is horizontal, and align-items: stretch is expanding the child element's width as much as it can.
You can override the default with align-items: flex-start on the container (which is inherited by all flex items) or align-self: flex-start on the item (which is confined to the single item).
Learn more about flex alignment along the cross axis here:
How does flex-wrap work with align-self, align-items and align-content?
Learn more about flex alignment along the main axis here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
In addition to align-self you can also consider auto margin which will do almost the same thing
.container { background: red; height: 200px; flex-direction: column; padding: 10px; display: flex; } a { margin-right:auto; padding: 10px 40px; background: pink; }
width: min-content also yields the same result. Not supported in IE11 if that matters to you: https://caniuse.com/mdn-css_properties_width_min-content
Follow WeChat
Success story sharing
Want to stay one step ahead of the latest teleworks?
Subscribe Now相似问题
- How can I make a div not larger than its contents?
- How can I make Flexbox children 100% height of their parent?
- Font scaling based on width of container
- Fill remaining vertical space with CSS using display:flex
- When flexbox items wrap in column mode, container does not grow its width
- Why don't flex items shrink past content size?
- Fill the remaining height or width in a flex container
