I'm working with formatting some divs with a flex box and thought that justify-content: space-between is the best way to do it. But, I'm running into an issue when the browser resolution changes the items become misaligned. For example if I shrink the browser size the items will wrap onto the next line which is fine since I have flex-wrap: wrap, but on the new line that is created the contents are spread between. Is it possible to remove the justify-content every time the items wrap? Sorry for the poor explanation, I'll provide a jsfiddle. Change the fiddle to 483px and the items will wrap and be placed on the next line, but instead of space between I want the items to be placed next to each other.
http://jsfiddle.net/xut5cqhw/46/
.container {
position: relative;
height: 150px;
width: 40%;
display: flex;
justify-content:space-between;
flex-wrap: wrap;
background-color: black;
}
.content {
height: 50px;
width: 50px;
margin-top: 10px;
background-color: yellow;
}
<div class = "container">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
Related
This question already has answers here:
Better way to set distance between flexbox items
(40 answers)
Closed 9 months ago.
I'm trying to manipulate divs without using float, using display: inline-block; in my css allows me to get the siblings next to each other within a container div, but with inline-block, I can't space them apart using margin-left: 20px;, margin-right :20px; ... and so on.
I'm sure there's a really simple solution, even if it doesn't involve using display: inline-block;, I just want to avoid floats and preferably avoid padding too.
you can try flex-box method to create space between two div which is inside a div (I conclude that from your question )
.parent{
border:2px solid red;
display:flex;
justify-content:space-around;
}
.parent div{
border:3px solid black;
}
<div class="parent">
<div class="child1">
child1
</div>
<div class="child2">
child2
</div>
</div>
you can also add many child div as you want , they will automatically make place in the parent container.
Here you can see below how i managed to do so without display:inline-block; and this will not break on any device unlike inline-block.
.box {
width: 200px;
height: 200px;
background: #F3F3F3;
color: #000;
display: flex;
align-items: center;
justify-content: center;
margin-left: 20px;
}
.container {
display: flex;
margin-bottom: 40px;
}
.container.two {
justify-content: space-between;
}
.container.three {
justify-content: space-evenly;
}
Margin 20px in between
<div class="container">
<div class="box">
BOX 1
</div>
<div class="box">
BOX 1
</div>
</div>
Align boxes on left and right according to width
<div class="container two">
<div class="box">
BOX 1
</div>
<div class="box">
BOX 1
</div>
</div>
Align even spacing on left and right
<div class="container three">
<div class="box">
BOX 1
</div>
<div class="box">
BOX 1
</div>
</div>
I have a flexbox based item that displays an image and grows the second div based on the content inside. However, i would like to place some link beneath the heading text and a line break isn't working and i would like a solution that isn't a line break. The page looks like this https://jsfiddle.net/mrah1psg/
and this is the code
#main {
width: 1200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: row wrap;
}
#main div {
min-width: 200px;
height: 50px;
}
.mt{
margin-top:0px;
}
.grow-this{
display: flex;
flex-grow: 7 !important;
}
<h1>FlexBox</h1>
<div id="main">
<div style="background-color:coral;">
<img src="https://images.unsplash.com/photo-1558543936-49604317cd3b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" width="200px" height="200px" /></div>
<div class="grow-this" style="background-color:lightblue;">
<h3 class="mt">Such a great title here that is flexible and sets width</h3>
An Address</div>
<div style="background-color:lightgrey;">E</div>
<div style="background-color:lightgreen;">Very Good</div>
</div>
I would like this link An Address to be displayed just beneath the title. How can i display the link beneath the title?
I am having a problem regarding elements inside a flex box. I am using flex: 1 1 auto with flex-flow: column wrap. I want to show a number of divs whose size increases along with that of the screen.
Using media queries would be so confusing and the code would be so large. I am searching for a way to achieve it without using media queries because the size of each div in the flex is about 200px each, I would need to make a lot of media queries incrementing from low to high resolutions.
The min-width property is rather useful here. I put fifteen divs to show the effect on multiple screen sizes.
.flex-parent {
display: flex;
flex-wrap: wrap; /* this makes the divs wrap */
}
.flex-child {
margin: 3px;
background-color: lightblue;
min-width: 200px; /*prevents the flex-child from shrinking more than 200px */
height: 50px;
flex: auto; /* this auto-adjusts the width */
/* Everything after this is just to align everything to the center */
padding-top: 20px;
text-align: center;
}
<div class='flex-parent'>
<div class='flex-child'>CHILD</div>
<div class='flex-child'>CHILD</div>
<div class='flex-child'>CHILD</div>
<div class='flex-child'>CHILD</div>
<div class='flex-child'>CHILD</div>
<div class='flex-child'>CHILD</div>
<div class='flex-child'>CHILD</div>
<div class='flex-child'>CHILD</div>
<div class='flex-child'>CHILD</div>
<div class='flex-child'>CHILD</div>
<div class='flex-child'>CHILD</div>
<div class='flex-child'>CHILD</div>
<div class='flex-child'>CHILD</div>
<div class='flex-child'>CHILD</div>
<div class='flex-child'>CHILD</div>
</div>
Use flex-flow: row wrap.
If you want to show more div elements as the screen gets wider, you’ll want to use row for flex-direction, not column. With flex-direction: row, the flex items will be put into each line from left to right, like a line of text. And the bigger the screen, the more items will fit.
If you want your flex items to grow and fill all the available space, use flex: auto. This might mean the items end up with different sizes, because you can have a different number of items in each flex line. If you want all of them to be the same size, you could set something like flex: 200px.
.flex-container {
display: flex;
flex-flow: row wrap;
gap: 8px;
}
.flex-item {
flex: auto;
padding: 32px;
background-color: bisque;
}
<div class="flex-container">
<div class="flex-item">One</div>
<div class="flex-item">Two</div>
<div class="flex-item">Three</div>
<div class="flex-item">Four</div>
<div class="flex-item">Five</div>
<div class="flex-item">Six</div>
<div class="flex-item">Seven</div>
<div class="flex-item">Eight</div>
<div class="flex-item">Nine</div>
<div class="flex-item">Ten</div>
<div class="flex-item">Eleven</div>
<div class="flex-item">Twelve</div>
</div>
If you want to arrange the div elements as columns (top to bottom), then your flex container needs to have a height set on it, for example height: 500px. This is so that the flex container can calculate how many flex items can fit into each column.
.flex-container {
display: flex;
flex-flow: column wrap;
height: 100vh;
gap: 8px;
}
.flex-item {
flex: auto;
padding: 32px;
background-color: bisque;
}
<div class="flex-container">
<div class="flex-item">One</div>
<div class="flex-item">Two</div>
<div class="flex-item">Three</div>
<div class="flex-item">Four</div>
<div class="flex-item">Five</div>
<div class="flex-item">Six</div>
<div class="flex-item">Seven</div>
<div class="flex-item">Eight</div>
<div class="flex-item">Nine</div>
<div class="flex-item">Ten</div>
<div class="flex-item">Eleven</div>
<div class="flex-item">Twelve</div>
</div>
I have two divs. One needs to sit at the left, one at the right. A parent flexbox with justify-content: space-between works perfectly for this, except when the flex items wrap (which they should be able to do). After they wrap, they are left-aligned because there's only two items total.
How can I make rows with single items centre-aligned?
<div style="display: flex; justify-content: space-between; flex-wrap: wrap">
<div style="background: orange">
<strong>Canvas Prints</strong><br>
<span style="font-size: 14px; color: #ff0000">Create a masterpiece for any wall in your home!</span>
</div>
<div style="background: pink">
<img width="176" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTEAPU9xK-mE81DSwYqh_uMb_EUuqXT1yWzIvs9j7diGY-FHh6X">
</div>
</div>
(Or you can use the fiddle, because it's easier to squish the output pane of the fiddle than resize the whole SO window to see the divs wrap: https://jsfiddle.net/xv6oa418/1/)
Additional note: #KaranTewari suggested adding flex: 1 to the first child div, but I'd like text in the left div to not wrap until absolutely necessary (specifically, it should start wrapping only after the second flex item has wrapped onto the next line). The second div is actually going to be an image so I've updated my fiddle and snippet to reflect this.
I figured it out myself. I used flex-grow: 1 on the first/left div, and margin: auto on the second/right div. This makes the first div expand to take up all space so the auto margin of the second div doesn't get to do anything. Then when it wraps, the second div is no longer blocked by the first one and the auto margin takes over, centring the second div.
Like so:
<div style="display: flex; justify-content: space-between; flex-wrap: wrap">
<div style="background: orange; flex-grow: 1;">
<strong>Canvas Prints</strong><br>
<span style="font-size: 14px; color: #ff0000">Create a masterpiece for any wall in your home!</span>
</div>
<div style="background: pink; margin: auto">
<img width="176" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTEAPU9xK-mE81DSwYqh_uMb_EUuqXT1yWzIvs9j7diGY-FHh6X">
</div>
</div>
(And the fiddle: https://jsfiddle.net/xv6oa418/2/)
.parent {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.text {
background: orange;
padding:10px;
border-radius:10px;
}
.text:only-child {
background-color: green;
margin:0 auto;
}
<div class="parent">
<div class="text">
<strong>Canvas Prints</strong><br>
<span >Create a masterpiece for any wall in your home!</span>
</div>
<div class="img" >
<img width="176" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTEAPU9xK-mE81DSwYqh_uMb_EUuqXT1yWzIvs9j7diGY-FHh6X">
</div>
</div>
You can use :only-child selector and give margin:auto to the only-child element. Please see the snippet.
Try using
flex:1
This ensures you are using full available space, here jsfiddle edited
https://jsfiddle.net/karantewari/tfg0kymb/1/
I want to position two blocks in parent block - one in the top, another in the bottom. Parents are follow each other as in catalog for example. To reach my goal I'am using flexible layout
<div class="container">
<div class="item">
<div class="holder">
<div class="content">
First content block<br/>
First content block<br/>
First content block<br/>
</div>
<div class="bottom"></div>
</div>
</div>
<div class="item">
<div class="holder">
<div class="content">
Second content block<br/>
Second content block<br/>
Second content block<br/>
Second content block<br/>
Second content block<br/>
Second content block<br/>
</div>
<div class="bottom"></div>
</div>
</div>
</div>
CSS is (webkit prefixes are deleted from this, presence in jsfiddle)
.container{
display: flex;
flex-wrap: wrap;
align-content: stretch;
}
.item{
width: 50%;
background-color: #fff;
}
.holder{
display: flex;
flex-direction:column;
align-content:space-between;
height: 100%;
}
.content{
flex: 1; // Added
width: 100%;
background-color: #eee;
}
.bottom{
width: 100%;
height: 20px;
background-color: #f00;
}
Code in jsfiddle https://jsfiddle.net/2nowks6p/5/.
There is a problem in layout, because bottom block does not position in bottom.
Can anyone explain to me, why this happen?
As #ketan answear add flex: 1 to .content solve problem in Firefox but not in Chrome and Opera.
I updated your demo to make it work on chrome & Firefox.
I added a display: flex; on .item and flex: 1; on .holder
https://jsfiddle.net/2nowks6p/8/
Just give flex:1; to .content will make bottom div to position bottom.
.content{
width: 100%;
background-color: #eee;
flex:1;
}
Updated Fiddle