This question already has answers here:
How to disable equal height columns in Flexbox?
(4 answers)
Closed 5 years ago.
What I basically want is to make each child element's height to wrap its content.
Here is my code:
<style>
.parent{
display: flex;
}
.child{
padding: 5px;
margin: 10px;
background: green;
height: auto;
}
</style>
<div class="parent">
<div class="child">child1</div>
<div class="child">child2</div>
<div class="child">child3</div>
<div class="child" style="height:50px">child1</div>
</div>
Output:
Expected output:
You just need to set align-items: flex-start on parent element because default value is stretch.
.parent {
display: flex;
align-items: flex-start;
}
.child {
padding: 5px;
margin: 10px;
background: green;
height: auto;
}
<div class="parent">
<div class="child">child1</div>
<div class="child">child2</div>
<div class="child">child3</div>
<div class="child" style="height:50px">child1</div>
</div>
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 1 year ago.
There is an issue with the first three divs which contains other elements in it.
If I remove them, then it is working fine but not otherwise.
See Output Here
.results{
text-align: center;
}
.result-box{
width: 200px;
height: 250px;
background-color: red;
margin: 10px;
padding: 5px;
display: inline-block;
}
<div class="wrapper">
<div class="results">
<div class="result-box"><p>Hello</p><p>World</p></div>
<div class="result-box"><p>Nothing</p></div>
<div class="result-box"><p>Everything</p></div>
<div class="result-box"></div>
<div class="result-box"></div>
<div class="result-box"></div>
</div>
</div>
best solution for collect divs inside a container is using
flex (display:flex) or gird (display:gird) witch grid is not working correctly in old browser ( internet explorer)
but if you don't like to use these methods
here is a tricky way
.results{
text-align: center;
position:relative;
}
.result-box{
width: 200px;
height: 250px;
background-color: red;
margin: 10px;
padding: 5px;
display: inline-block;
float:left;
}
<div class="wrapper">
<div class="results">
<div class="result-box"><p>Hello</p><p>World</p></div>
<div class="result-box"><p>Nothing</p></div>
<div class="result-box"><p>Everything</p></div>
<div class="result-box"></div>
<div class="result-box"></div>
<div class="result-box"></div>
</div>
</div>
Check the below snippet
.results{
text-align: center;
display: flex;
justify-content: center;
}
.result-box{
width: 50px;
height: 150px;
background-color: red;
margin: 10px;
padding: 5px;
display: inline-block;
}
<div class="wrapper">
<div class="results">
<div class="result-box"><p>Hello</p><p>World</p></div>
<div class="result-box"><p>Nothing</p></div>
<div class="result-box"><p>Everything</p></div>
<div class="result-box"></div>
<div class="result-box"></div>
<div class="result-box"></div>
</div>
</div>
This question already has answers here:
Targeting flex items on the last or specific row
(10 answers)
Make container shrink-to-fit child elements as they wrap
(4 answers)
Closed 1 year ago.
I have a parent div element containing several children. The parent div is contained inside an outer container div. I want the parent div to be centered inside the container but the problem is that the parent uses flex-wrap: wrap to wrap all of its child divs.
The parent div is centered in the container as expected:
#container {
width: 500px;
display: flex;
justify-content: center;
background-color: #c0faff;
}
#parent {
display: flex;
flex-wrap: wrap;
}
.child {
background-color: #5bb4bb;
width: 100px;
height: 100px;
margin: 5px;
}
<div id="container">
<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
But, as soon as there is 1 child that must be wrapped onto the 2nd row, the parent div floats to the left and ignores the container's justify-content: center; css property:
#container {
width: 500px;
display: flex;
justify-content: center;
background-color: #c0faff;
}
#parent {
display: flex;
flex-wrap: wrap;
}
.child {
background-color: #5bb4bb;
width: 100px;
height: 100px;
margin: 5px;
}
<div id="container">
<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
How can I make the previous code snippet's result look like this?:
You can only achieve this if you set a fixed width to the container that holds the flexbox-items. You can make it a bit simpler and use calc(...) function in CSS here. If you know how many items should be in one row, you can just change the number for multiple breakpoints easily. Even easier if you set the width of one item as a css custom property.
#container {
width: 500px;
display: flex;
justify-content: center;
background-color: #c0faff;
}
#parent {
display: flex;
flex-wrap: wrap;
width: calc(4* 110px)
}
.child {
background-color: #5bb4bb;
width: 100px;
height: 100px;
margin: 5px;
}
<div id="container">
<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
Closed 2 years ago.
I am having issue while using overflow-x: scroll and justify-content: center on flex parent container.
Please see my code below.
issue: first flex child item is not showing it is crop in left or other all child item. please see my screenshot and code below.
I need your help. thank you in advance.
.container {
width: 500px;
margin: 0 auto;
display: flex;
justify-content: center;
flex-direction: row;
overflow-x: scroll;
}
.box {
height: 100px;
border: 1px solid red;
min-width: 100px;
margin-right: 10px;
flex-grow: 1;
}
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
The justify-content:center is making the content to align to center and some of the left is cut off. You could remove it and try.
.container {
width: 500px;
margin: 0 auto;
display: flex;
flex-direction: row;
overflow-x:scroll
}
.box {
height: 100px;
border: 1px solid red;
min-width: 100px;
margin-right: 10px;
flex-grow: 1;
}
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
remove "justify-content:center". And you said that you need center aligned elements when there are only 1 or 2 elements...so the answer is they will by aligned automatically...if there will be only two elements each of them will have 250px width and if there will be only one then width of this element will be 500px.
This question already has answers here:
Equal height flex items in flex columns
(3 answers)
Closed 5 years ago.
I'm using flex to create even columns and vh to make them the same height. That's working fine but inside the columns I can have an x number of items in them. I'd like for elements in each column to be even height depending on how many items are present (using css).
1 = 100%
2 = 50%
3 = 33.33%
etc.
I know I can do this through JS but I'd like to automate this through css via flex, grid, or something elese.
I've tried replicating your problem. Use flex: 1 on .items so that each and every item take equal space (according to the problem statement).
Have a look at the snippet below:
body {
margin: 0;
}
.parent {
width: 80%;
padding: 20px;
display: flex;
border: 1px solid red;
}
.child {
flex: 1;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-end;
padding: 20px;
border: 1px solid blue;
height: 60vh;
}
.item {
flex: 1;
background: lightGreen;
border: 1px solid green;
}
<div class="parent">
<div class="child">
<div class="item">33.33%</div>
<div class="item">33.33%</div>
<div class="item">33.33%</div>
</div>
<div class="child">
<div class="item">50%</div>
<div class="item">50%</div>
</div>
<div class="child">
<div class="item">100%</div>
</div>
</div>
Hope this is what you are trying to achieve.
This is all you need to make it work with the Flexbox:
.flex-container {
display: flex;
}
.flex-item {
display: flex;
flex-direction: column;
flex: 1;
}
.item {
flex: 1;
border: 1px solid;
}
<div class="flex-container">
<div class="flex-item">
<div class="item">1/1</div>
</div>
<div class="flex-item">
<div class="item">1/2</div>
<div class="item">1/2</div>
</div>
<div class="flex-item">
<div class="item">1/3</div>
<div class="item">1/3</div>
<div class="item">1/3</div>
</div>
<div class="flex-item">
<div class="item">1/4</div>
<div class="item">1/4</div>
<div class="item">1/4</div>
<div class="item">1/4</div>
</div>
</div>
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 6 years ago.
I have a requirement as shown below:
|[] [][]|
One element at left side of the viewport and two elements on right side of the viewport. To learn display: flex, I am trying this layout without wrapping the elements.
Is this layout possible with flexbox?
Here is the HTML:
<div class="parent">
<div class="child child--left"></div>
<div class="child child--right"></div>
<div class="child child--right"></div>
</div>
I tried using align-items and align-self but no use. Please help.
CSS:
.parent{
display: flex; // flexbox
}
You can use margin-left:auto in the div you need in the right side:
.parent {
display: flex;
height: 100px;
width: 100%;
}
.child {
flex: 0 0 20px;
border: solid 1px green;
}
.child--right {
margin-left: auto;
}
<div class="parent">
<div class="child"></div>
<div class="child child--right"></div>
<div class="child"></div>
</div>
you need to use a spacer defined as flex:auto; in order to align the flex-boxes as intended: DEMO
CSS
.parent{
display:flex;
}
.spacer{
flex:auto;
}
and your HTML would be:
<div class="parent">
<div class="child child--left"></div>
<div class="spacer"></div>
<div class="child child--right"></div>
<div class="child child--right"></div>
</div>
You can use flex to fill a space
body {
margin: 0;
}
.flex {
display: flex;
background: purple;
width: 100%;
height: 75px;
}
.item {
background: orange;
width: 50px;
height: 50px;
margin: 12.5px;
}
.filler {
flex-grow: 1;
}
<div class="flex">
<div class="item"></div>
<div class="filler"></div>
<div class="item"></div>
<div class="item"></div>
</div>
You'll notice I've added a div with the class filler and set it to have flex-grow: 1; This means that div will always take up the remaining space.
Applying: margin-<direction>: auto on the child of a flex item will essentially float the item in the opposite direction (with none of the complications of float).
.child--right {
margin-left: auto;
}
A way to do this without using an extra filler element is to use auto-margins.
CSS
.child--left {
margin-right: auto; /* <== here's the auto margin */
}
It will add a margin to the right of .child--left which will fill up the available space within .parent (essentially acting like there's a filler element between the left and right children, but actually without the filler element)
HTML
<div class="parent">
<div class="child child--left"><div class="box"></div></div>
<div class="child child--right"><div class="box"></div></div>
<div class="child child--right"><div class="box"></div></div>
</div>
css
.parent{
display: flex;
justify-content: center;
}
.box{
width: 200px;
height: 200px;
background: #333;
margin: 20px
}
Source: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Fiddle: https://jsfiddle.net/rittamdebnath/315wps5g/