This question already has answers here:
margin-top only when the flex item is wrapped
(2 answers)
Closed 4 years ago.
i have a container with two child. i set flex-wrap property and value wrap. In Small device when they break in unknown width then how can i set margin/padding between two item?
https://jsfiddle.net/irojabkhan/w1x5phya/4/
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
background: blue;
font-size: 46px;
}
<div class="container">
<div class="item">Hello World</div>
<div class="item">Keep Learning</div>
</div>
Just set the margin-bottom to the amount of space you require:
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
background: blue;
font-size: 46px;
margin-bottom: 20px; /* Set this to whatever you want it to be*/
}
.contai<div class="container">
<div class="item">Hello World</div>
<div class="item">Keep Learning</div>
</div>
Simply added margin-bottom to parent-block;
`.parent{
display: flex;
flex-wrap: wrap;
margin-top: -30px;
}
.child-1,.child-2{
margin-top: 30px
}
`
Related
This question already has answers here:
How to add 1px margin to a flex item that is flex: 0 0 25%?
(4 answers)
Closed 9 months ago.
So it seems I misunderstand something about flexbox and can't correctly solve the issue.
I have a flexbox container that contains four columns which are flexbox container's direct children. And once browser window width reaches 992px and lower I want to change so that .flexbox-item takes 50% width of the container.
The problem:
It seems to work fine if I don't use 'gap' property on .flexbox-container but once I put gap: 1em, then percentages are not working correctly, as I understand gap is taken into account and adds up width to those .flex-item items.
The question:
How do I correctly ensure that once browser window is 992px or lower that each flexbox item takes 50% percent so I can have two columns in each row, because apparently I can play with 'width' property and give it let's say 45% and it will work, but for me it doesn't look like a correct solution. I would like to know what is the easiest way to still use those percentages correctly when 'gap' propery is used.
Any help is really appreciated.
This is the code I have:
<div class="flexbox-container">
<div class="flexbox-item">Item 1</div>
<div class="flexbox-item">Item 2</div>
<div class="flexbox-item">Item 3</div>
<div class="flexbox-item">Item 4</div>
</div>
And CSS:
.flexbox-container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
gap: 1em;
}
.flexbox-item {
width: 25%;
background-color: lightgreen;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
}
#media screen and (max-width: 992px) {
.flexbox-item {
width: 50%;
}
}
You can also see the result here: https://jsfiddle.net/Erasus/gxtvhuow/12/
You can try to use grid or flex either work but I would do this way. If this is what you mean Let me know.
.flexbox-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 1em;
}
.flexbox-item {
width: 100%;
background-color: lightgreen;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
}
.flexbox-container2 {
display: flex;
grid-gap: 1em;
}
.flexbox-item2 {
width: 100%;
background-color: lightgreen;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
}
#media screen and (max-width: 992px) {
.flexbox-container {
display: grid;
grid-template-columns: auto auto;
}
.flexbox-container2 {
display: flex;
flex-wrap: wrap;
grid-gap: 1em;
}
.flexbox-item2:nth-child(2n + 1),
.flexbox-item2:nth-child(2n + 2) {
flex: 0 0 calc(50% - 10px);
}
}
<h1>This is the grid way</h1>
<div class="flexbox-container">
<div class="flexbox-item">Item 1</div>
<div class="flexbox-item">Item 2</div>
<div class="flexbox-item">Item 3</div>
<div class="flexbox-item">Item 4</div>
</div>
<br>
<h1>This is the flex way</h1>
<div class="flexbox-container2">
<div class="flexbox-item2">Item 1</div>
<div class="flexbox-item2">Item 2</div>
<div class="flexbox-item2">Item 3</div>
<div class="flexbox-item2">Item 4</div>
</div>
This question already has answers here:
How can I show three columns per row?
(4 answers)
Closed 1 year ago.
I am looking for a way (with Flexbox, not Grid) to create a layout, when I have a container with x cards inside, and each card inside should take 1/3 of the container width. So cards number 1,2,3 will be in the first row, cards number 4,5... in the second row etc.
I feel like it is impossible with flexbox, I don't wanna do some checks for number of items, I used map to map cards in containers of max 3 cards but I didn't like the solution. Before I move to using grid, I would love to get some insight if it is possible to acomplish with Flexbox.
The code is:
<div class="container">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
you should set box-sizing: border-box; on the cards so padding and borders are calculated in their width. and set their max-width: 33.33%.
body {
padding: 30px;
margin: 0;
}
.container {
display: flex;
flex-direction: row;
width: 100%;
flex-wrap: wrap;
background: orange;
}
.card {
box-sizing: border-box;
width: 100%;
text-align: center;
max-width: 33.33%;
padding: 50px 0;
background-color: aqua;
border: 1px solid #000;
}
<div class="container">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
</div>
The difference will be for the second row. There are two options for the last two element width.
Option 1 Last two nodes take 33% width only and leave the right side blank.
You have to use display: flex; flex-wrap: wrap; for .container and display: flex; flex: 0 1 33%; for the child element, which is .card.. Here flex-shrink is to be set for child
.container {
display: flex;
flex-wrap: wrap;
}
.card {
height: 100px;
display: flex;
flex: 0 1 33%;
justify-content: center;
align-items: center;
font-size: 50px;
}
<div class="container">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
</div>
Option 2 Last two element use 50% width each.
You have to use display: flex; flex-wrap: wrap; for container and display: flex; flex: 1 0 33%; to the child element, which is .card. Here flex-grow is to be set for child
.container {
display: flex;
flex-wrap: wrap;
}
.card {
height: 100px;
display: flex;
flex: 1 0 33%;
justify-content: center;
align-items: center;
font-size: 50px;
}
<div class="container">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
</div>
Flex-wrap can help you with that
.container{
display: flex;
flex-wrap: wrap;
}
.card{
min-width: 33.3333%;
}
Example here: https://codepen.io/jriches/pen/WNjVaav
Use 33.33333333% width in your card class.
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 4 years ago.
Pretty common question I guess, but couldn't find any solution to fix it.
Code is:
<div class="container">
<div class="first-item">A</div>
<div class="second-item">B</div>
</div>
Should look like this:
first-item will be at middle and second-item should be at last.
What I've tried:
.container {
display: flex;
justify-content: center;
}
.container .second-item {
align-self: flex-end;
}
How could I achieve it using flex or in any other way of css?
Almost: you just need to add a margin auto on the first element
.container {
display: flex;
justify-content: center;
}
.first-item {
margin: auto;
}
.second-item {
align-self: flex-end;
}
Codepen demo
You can try that,
.container {
display: flex;
justify-content: center;
}
.container .second-item {
right: 0;
position: absolute;
}
<div class="container">
<div class="first-item">A</div>
<div class="second-item">B</div>
</div>
This question already has answers here:
Prevent flex items from rendering side to side
(3 answers)
Closed 5 years ago.
I have the following code which vertically centers my content
html
<div class="titleHide flex">
<h4>...</h4>
<h1>...</h1>
</div>
css
.titleHide {
position: absolute;
top: 0; left: 0;
height: 100%; width: 100%;
background-color: rgba(209,30,93,0.8);
}
.flex {
display: flex;
flex: 1;
align-items: center;
}
.flex is used by other divs on my site. However in this case it puts the h1 and h4 titles aligned beside each other, I want them the stack on top of each other.
You may consider writing a separate CSS class for that, say:
.flex-stack {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
}
.flex,
.flex-stack {
display: flex;
flex: 1;
align-items: center;
}
.flex-stack {
flex-direction: column;
}
.module-1,
.module-2 {
margin: 1em;
}
<h3>Flex Inline</h3>
<div class="flex">
<div class="module-1">
Module #1
</div>
<div class="module-2">
Module #2
</div>
</div>
<h3>Flex Stacked</h3>
<div class="flex-stack">
<div class="module-1">
Module #1
</div>
<div class="module-2">
Module #2
</div>
</div>
Hope it was helpful. Cheers!
This question already has answers here:
How to disable equal height columns in Flexbox?
(4 answers)
Closed 7 years ago.
I have two items inside a flex container, I gave the first item a specific height and I want the other's height to fits its actual content.
So the code is pretty simple: jsfiddle
.main {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
/* Safari 6.1+ */
flex-flow: row nowrap;
}
.sub {
border: 1px black solid;
flex-grow: 1;
}
#sub1 {
height: 300px;
margin-right: 50px;
}
<div class="main">
<div class="sub" id="sub1"> </div>
<div class="sub" id="sub2"> </div>
</div>
As you can see the second div stretched as the first ones's height increased, so how to prevent that, how to make the next child with no height specification hold its actual height as its actual content
Because the default value for align-items is stretch. Change that to flex-start if you want them to be top aligned and no stretch.
.main {
display: flex;
flex-flow: row nowrap;
align-items: flex-start;
}
.sub {
border: 1px black solid;
flex-grow: 1;
}
#sub1 {
height: 300px;
margin-right: 50px;
}
<div class="main">
<div class="sub" id="sub1"> </div>
<div class="sub" id="sub2"> </div>
</div>