This question already has answers here:
How to disable equal height columns in Flexbox?
(4 answers)
Closed 2 years ago.
I've been trying to find the correct answer for a while but didn't really know the right words to look for.
Example
Expected Example
I'm currently having trouble where the children containers are being set to the height of the parent (which is currently defined by a child).
Code
<div class='wrapper'>
<div class='container'>
Line 1<br>Line 2
</div>
<div class='container'>
Line 1
</div>
</div>
.wrapper {
display: flex;
}
.container {
color: white;
padding: 8px;
background: black;
border: 1px solid red;
display: inline-flex;
border-radius: 12px;
width: 100%;
}
JSFiddle
You could do either:
Add align-items: flex-start to the parent .wrapper definition
Add align-self: flex-start to the child .container definition
.wrapper {
display: flex;
align-items: flex-start;
}
.container {
color: white;
padding: 8px;
background: black;
border: 1px solid red;
display: inline-flex;
border-radius: 12px;
width: 100%;
}
<div class='wrapper'>
<div class='container'>
Line 1<br>Line 2
</div>
<div class='container'>
Line 1
</div>
</div>
From CSS tricks, align-items:
The align-items property defines the default behavior for how items are laid out along the cross axis (perpendicular to the main axis).
Also from CSS tricks, align-self:
align-self will affect the specific child of a flex element
use height:max-content; so u can achieve your aim, try snippet
.wrapper {
display: flex;
}
.container {
color: white;
padding: 8px;
background: black;
border: 1px solid red;
display: inline-flex;
border-radius: 12px;
width: 100%;
height: max-content;
}
<div class='wrapper'>
<div class='container'>
Line 1<br>Line 2
</div>
<div class='container'>
Line 1
</div>
</div>
Related
This question already has answers here:
How to Right-align flex item?
(13 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 2 years ago.
How do I align the album cover div to the right inside the card. I tried with align-self: end property but that does not seem to work. Could anyone please help?
.card {
border: 1px red solid;
width: 450px;
height: 150px;
border-radius: 5px;
display: flex;
flex-direction: row;
}
.image {
width: 150px;
height: 150px;
align-self: end;
border: 1px solid green;
}
<div class="card">
<div>
<div>Music controls</div>
</div>
<div class="image">Album Cover</div>
</div>
You can add justify-content: space-between; to your card's css:
.card {
border: 1px red solid;
width: 450px;
height: 150px;
border-radius: 5px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.image {
width: 150px;
height: 150px;
align-self: end;
border: 1px solid green;
float: right;
}
<div class="card">
<div>
<div>Music controls</div>
</div>
<div class="image">Album Cover</div>
</div>
Flex has two main axis, if you want to align the album cover to the right in the main axis, you need to use the property justify-content: space-between; that will expand your music controls and album cover, with space-between ittems are evenly distributed in the line; first item is on the start line, last item on the end line, you can check more about flex here
I added a new class to the music controls and added a flex-grow value of 2 and align-self value of flex-start.
then for .image, i added align-self value of flex-end
at the end, i removed the hard-coded width/ height from image
Good luck!
.card {
display: flex;
flex-direction: row;
background-color: #005792;
width: 450px;
height: 150px;
border-radius: 5px;
overflow: hidden;
}
.music-controls{
display: flex;
flex-grow: 2;
}
.image {
display: flex;
flex-grow: 1;
background-color: #fd5f00;
}
<div class="card">
<div class="music-controls">
<div>Music controls</div>
</div>
<div class="image">Album Cover</div>
</div>
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
How to Right-align flex item?
(13 answers)
Closed 2 years ago.
I tried to align the Add to library div to the right with float: right style but it does not seem to work. How to align that div to the right of the flex. Could anyone please help?
.song {
display: flex;
flex-direction: row;
border: 1px solid red;
padding: 10px
}
.song-name {
padding: 10px;
display: flex;
align-items: center;
}
.song-action {
padding: 10px;
display: flex;
align-items: center;
color: red;
}
<div class="song">
<div class="album-cover">
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
</div>
<div class="song-name">
Song name
</div>
<div class="song-action">
Add to library
</div>
</div>
Just use margin-left: auto on the element you want shoved to the side. Inside a flex container anything with an auto margin on any side will push it to the farthest opposite side.
.song {
display: flex;
flex-direction: row;
align-items: center;
border: 1px solid red;
padding: 10px
}
.song-name {
padding: 10px;
display: flex;
align-items: center;
}
.song-action {
padding: 10px;
margin-left: auto;
color: red;
}
<div class="song">
<div class="album-cover">
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
</div>
<div class="song-name">
Song name
</div>
<div class="song-action">
Add to library
</div>
</div>
just add margin-left:auto in your add to library div
.song {
display: flex;
flex-direction: row;
border: 1px solid red;
padding: 10px
}
.song-name {
padding: 10px;
display: flex;
align-items: center;
}
.song-action {
padding: 10px;
display: flex;
align-items: center;
margin-left: auto;
color: red;
}
<div class="song">
<div class="album-cover">
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
</div>
<div class="song-name">
Song name
</div>
<div class="song-action">
Add to library
</div>
</div>
This question already has answers here:
Center and bottom-align flex items
(3 answers)
Closed 5 years ago.
How to align a div vertically to middle and another div vertically to bottom inside a flex column?
Expected result:
.container {
border: 1px solid black;
height: 200px;
width: 50px;
display: flex;
flex-direction: column;
justify-content: center;
}
.first-item {
margin-top: auto;
margin-bottom: auto;
}
<div class="container">
<div class="first-item">First</div>
<div class="second-item">Second</div>
</div>
That should do it. Then the second item should be pushed to the bottom while the first item stays in the middle. A pure flexbox solution not using absolute positioning.
You have to use the line-height property with the same height value
.parent{
display: table;
position: relative;
border: 1px solid;
height: 150px;
line-height: 150px;
}
.parent div{
position: absolute;
bottom: 0;
line-height: 20px;
}
<div class="parent">
test
<div>test</div>
</div>
Take a look at this.
.parent{
display: flex;
height: 150px;
width: 50px;
border: 1px solid black;
align-items: center;
justify-content: center;
}
.two{
align-self: flex-end;
position: absolute;
}
<div class="parent">
<div>test</div>
<div class="two">test</div>
</div>
This question already has answers here:
What's the difference between display:inline-flex and display:flex?
(10 answers)
Closed 5 years ago.
I would like to have a box with two rows, using flexbox. The problem I cannot resolve is that the container is taking the full width of the page instead of tightly adapting to the elements:
.container {
display: flex;
flex-direction: column;
align-items: flex-start;
border-style: solid;
}
.header {
background-color: black;
color: white;
}
.body {
background-color: blue;
color: white;
}
<div class="container">
<div class="header">
the header
</div>
<div class="body">
the body
</div>
</div>
What should be set so that the container is just the width of the elements? I know that I could force its width but I would like it to be rather driven by the content of the elements.
You're looking for inline-flex
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
.container {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
border-style: solid;
}
.header {
background-color: black;
color: white;
}
.body {
background-color: blue;
color: white;
}
<div class="container">
<div class="header">
the header
</div>
<div class="body">
the body
</div>
</div>
I want to center two divs with display: inline-flex; inside a block container, but somehow align-items: center; and justify-content: center; doesn't work. Only text-align: center; works, but it shouldn't be like that (because I've read that with display: inline-flex; it should be align-items and justify-content) I guess? If my solution is correct, then can you tell me what's the difference?
Also, I want to get rid of that little gap between these two centered divs, but I've tried some solutions from the internet and none of them works. Why?
I'd be glad if you guys could help me out with both of my questions.
Here's the code example:
.parent {
border: 1px solid blue;
background-color: yellow;
padding: 10px;
}
.container {
border: 1px dotted green;
padding: 10px;
text-align: center;
}
.child, .child2 {
display: inline-flex;
border: 1px solid red;
background-color: honeydew;
padding: 50px;
}
<div class="parent">
<div class="container">
<div class="child">
<h1> Test1.</h1>
</div>
<div class="child2">
<h1> Test2.</h1>
</div>
</div>
</div>
It will work if you use display: flex on container element. align-items and justify-content position flex items inside flex-container so you need to set display: flex on parent element.
.parent {
border: 1px solid blue;
background-color: yellow;
padding: 10px;
}
.container {
border: 1px dotted green;
padding: 10px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.child,
.child2 {
display: inline-flex;
border: 1px solid red;
background-color: honeydew;
padding: 50px;
}
<div class="parent">
<div class="container">
<div class="child">
<h1> Test1.</h1>
</div>
<div class="child2">
<h1> Test2.</h1>
</div>
</div>
</div>