I have this code and I want two items in the same row with a gap space between them, however this is not working. I want there to be the 12px gap in between the A's and B's. However I don't want to use old techniques like margin/padding.
https://codepen.io/sneaky666/pen/rNxdaOQ
<div class="container">
<div>
AAA
</div>
<div>
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
</div>
</div>
css
.container {
display:inline-flex;
flex-wrap:wrap;
gap:12px;
}
I'm following the tutorial from https://coryrylan.com/blog/css-gap-space-with-flexbox
Does anyone know?
Thanks
If you want to set a specific number of pixels for the gap, you would need to add a margin in between the items since gap is not currently supported. Example:
<div class="container">
<div class="first-item">
AAA
</div>
<div>
BBBBBBBBBBB
</div>
</div>
.container {
display: flex;
flex-direction: row;
}
.first-item {
margin-right: 12px;
}
However, if the size of the gap does not matter, you can use the flexbox alignment properties to spread out your divs in the row evenly. Example:
<div class="container">
<div class="first-item">
AAA
</div>
<div>
BBBBBBBBBBB
</div>
</div>
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
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'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>
I'm trying to create some kind of universal component of flex container. This component consists of container and its children in a row.
If there are too many children in a line, those who don't have enough space go to second line. It can be easily achieved with flexbox, but also I want to be able to set gutter between elements. And first and last elements of a line shouldn't have left and right margin respectively.
I do this using negative margin technique, but the problem here is that right margin can provoke overflow issues if container is too big. I can solve this problem adding overflow: hidden to cut off negative margin, but it provokes problem with overflowing items inside container (drop-downs, etc).
So now I'm looking for silver bullet, implementation which can satisfy this requirements:
There are multiple items in a row. Width of items can differ.
If some items have not enough space, they go to next line.
There is a gap between items (margin), and first and last item doesn't have left and right margin, respectively.
Inside container can be placed overflowing content (drop-downs), so I can't use overflow: hidden
Css grid and flexbox can be used
Here is my solution of this problem:
https://jsbin.com/gabumax
And here code from example:
.container {
overflow: hidden;
}
.wrapper {
margin: -10px;
display: flex;
flex-wrap: wrap;
}
.item {
flex: 0 0 auto;
padding: 10px;
background-color: red;
margin: 10px;
}
<div class="container">
<div class="wrapper">
<div class="item">Width of items can vary</div>
<div class="item">This example works</div>
<div class="item">But there is a problem</div>
<div class="item">Dye to overlow:hidden</div>
<div class="item">It is impossible to place here</div>
<div class="item">Overflowing content</div>
<div class="item">Such as dropdowns</div>
</div>
</div>
It works, but the only negative point here is overlow: hidden. Because of this I can't place here dropdowns and other overflowing content.
Any better solution? Thanks in advance.
Use gap / row-gap / column-gap:
.wrapper {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
See more here
To avoid the scrollbar to show, you may set your negative margin on the left and top only.
body {
margin: 0;
}
.container {
width:31.7em;
max-width:100%;
margin:auto;;
background:yellow;
}
.wrapper {
display: flex;
flex-wrap: wrap;
margin-left:-10px;
margin-top:-10px;
}
.item {
flex: 0 0 auto;
padding: 10px;
background-color: red;
margin:10px 0 0 10px;
}
<div class="container">
<div class="wrapper">
<div class="item">Width of items can vary</div>
<div class="item">This example works</div>
<div class="item">But there is a problem</div>
<div class="item">Dye to overlow:hidden</div>
<div class="item">It is impossible to place here</div>
<div class="item">Overflowing content</div>
<div class="item">Such as dropdowns</div>
</div>
</div>
or negative right margin if document dir is rtl
body {
margin: 0;
direction:rtl;
}
.container {
width:31.7em;
max-width:100%;
margin:auto;;
background:yellow;
}
.wrapper {
display: flex;
flex-wrap: wrap;
margin-right:-10px;
margin-top:-10px;
}
.item {
flex: 0 0 auto;
padding: 10px;
background-color: red;
margin:10px 10px 0 0;
}
<div class="container">
<div class="wrapper">
<div class="item">Width of items can vary</div>
<div class="item">This example works</div>
<div class="item">But there is a problem</div>
<div class="item">Dye to overlow:hidden</div>
<div class="item">It is impossible to place here</div>
<div class="item">Overflowing content</div>
<div class="item">Such as dropdowns</div>
</div>
</div>
Flexbox isn't your best option here. As you describe, gutter solutions are clumsy and inefficient.
A clean and efficient solution is possible with CSS Grid.
Grid wins over flexbox in this area for now because Grid accepts the gap properties. These properties are not yet available in flex but, as browsers continue to implement the CSS Box Alignment Module, the gap properties will be available across multiple box models (including flex).
§ Gaps Between Boxes
While margin and padding can be used to specify visual spacing
around individual boxes, it’s sometimes more convenient to globally
specify spacing between adjacent boxes within a given layout context,
particularly when the spacing is different between boxes as opposed to
between the first/last box and the container’s edge.
The gap property, and its row-gap and column-gap sub-properties,
provide this functionality for multi-column, flex, and grid layout.
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-auto-rows: 50px;
grid-gap: 10px;
}
.item {
padding: 10px;
background-color: red;
}
body {
margin: 0;
}
<div class="container">
<div class="wrapper">
<div class="item">Width of items can vary</div>
<div class="item">This example works</div>
<div class="item">But there is a problem</div>
<div class="item">Dye to overlow:hidden</div>
<div class="item">It is impossible to place here</div>
<div class="item">Overflowing content</div>
<div class="item">Such as dropdowns</div>
</div>
</div>
jsFiddle demo
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/
Using a two-column flexbox layout, how can different-sized children be made to fill all available space, instead of all children having the height of the tallest child of the row?
I set up a demo on jsbin that illustrates the problem. I'd like for all the children to be the size of their wrapped contents.
#container {
width: 800px;
display: flex;
flex-wrap: wrap;
}
.cell {
width: 300px;
flex; 1 auto;
}
<div id="container">
<div class="cell">
Cells with arbitrarily long content.</div>
<div class="cell">
</div>
<div class="cell">
</div>
<div class="cell">
</div>
<div class="cell">
</div>
</div>
</body>
</html>
This is how Flexbox rows are expected to behave. Flexbox is not meant to recreate Masonry with pure CSS: items in one row cannot occupy space allocated for a preceding/following row (same goes for columns if you're using column orientation). You can use align-items to prevent them from stretching, but that's about it:
http://cssdeck.com/labs/9s9rhrhl
#container {
width: 800px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.cell {
width: 300px;
flex: 1 auto;
padding: 10px;
border: 1px solid red;
}
Otherwise, you should be using the column orientation or the multi-column module (see this SO answer: https://stackoverflow.com/a/20862961/1652962)