I am trying to display a layout below in flex .
I have divs of equal width and height. I want to achieve the layout out below. By placing one item on the left and the remaining four fit on the right container and maintaining the same container height in the process . Thats the one on the left increase to fill the left height and width and the other right size of the container is shared among the four items.
.trades {
display: flex;
flex: 1;
}
.trade-panel {
flex: 1;
}
.layout-5-2 {
-ms-flex-direction: row;
flex-direction: row;
justify-content: space-between;
display: flex;
}
.layout-container-5-2-1 {
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
justify-content: space-between;
flex: 0 0 48%;
display: flex;
}
.layout-container-5-2-2 {
flex: 0 0 48%;
display: flex;
flex-direction: column;
}
<div class="trades">
<div class="layout-5-2">
<div class="layout-container-5-2-1">
<div class="trade-panel">item 1</div>
<div class=" trade-panel">item 2</div>
<div class="trade-panel">item 3</div>
<div class=" trade-panel">item 4</div>
</div>
<div class="layout-container-5-2-1">
<div class="trade-panel">vertical item.</div>
</div>
</div>
</div>
My layout displays close to what i was expecting.with four to in the container to the right and one item to the left. However, The trades container scroll vertically to accommodate the four trades height. The trades does not shrink to fit into the right container thats .layout-container 5-2-2. Please how do i shrink the four to fix in the container heights ? Any help would be appreciated.
Try this
body,
html {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
min-height: 100vh;
background: #2A3052;
}
.left {
flex: 1;
background: #9497A8;
margin: 10px;
}
.right {
flex: 1;
display: flex;
flex-direction: column;
}
.box {
flex: 1;
background: #9497A8;
margin: 10px;
}
<div class="container">
<div class="left"></div>
<div class="right">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
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.
Scenario :
I'm creating a pricing comparison table and am having difficulties aligning the last div, card-vat-fee, to the bottom of the container.
I need to do this because the tiers have longer running lists than
one another, causing the last div isn't aligned with the bottom of
the container.
How can I get the last div to align to the bottom of the flexbox?
Tried Case :
Of course, if I set a min-height: 320px; on the card-vat-fee class it will align the div to the bottom, however this isn't a responsive solution and I feel like there is a better approach that uses flex properties. Moreover, setting the card-vat-fee div to flex-grow, flex: 1 1 auto, produces an unideal solution.
Code :
<div class='pricing__tier'>
<div class='uni-card-header'>
</div>
<div class='uni-card-body'>
<div class='uni-row-on'>
</div>
<div class='uni-row-off'>
</div>
<div class='uni-row-on card-vat-fee'>
<div class='vat-fee-text'>
Credit card fees and VAT apply. See below for details.
</div>
</div>
</div>
</div>
<style>
.pricing__tier {
padding: 0;
text-align: center;
display: flex;
flex-direction: column;
width: 0%;
flex: 1;
}
.uni-card-body {
display: flex;
flex-direction: column;
}
</style>
Pricing Tier
Please Suggest.
Thanks in advance
Use margin-top:auto on the last div.
.pricing__tier {
padding: 0;
text-align: center;
display: flex;
flex-direction: column;
width: 25%;
flex: 1;
height: 200px; /* for demo purposes */
border: 1px solid grey;
}
.uni-card-body {
display: flex;
flex-direction: column;
flex: 1;
}
.card-vat-fee {
margin-top: auto; /* push to bottom */
background: green;
}
<div class='pricing__tier'>
<div class='uni-card-header'>
</div>
<div class='uni-card-body'>
<div class='uni-row-on'>
</div>
<div class='uni-row-off'>
</div>
<div class='uni-row-on card-vat-fee'>
<div class='vat-fee-text'>
Credit card fees and VAT apply. See below for details.
</div>
</div>
</div>
</div>
plaesa try this one :
.uni-card-body {
display: flex;
flex-direction: column;
width: 'for example' 700px;
}
.uni-row-on.card-vat-fee{
align-self: flex-end;
}
Ihope this will help you!
.uni-card-body {
display: flex;
flex-flow: row wrap;
justify-content: center;
background: yellow;
height: 90vh;
}
.uni-row-on.card-vat-fee {
align-self: flex-end;
background: green;
}
<div class='pricing__tier'>
<div class='uni-card-header'>
</div>
<div class='uni-card-body'>
<div class='uni-row-on'>
</div>
<div class='uni-row-off'>
</div>
<div class='uni-row-on card-vat-fee'>
<div class='vat-fee-text'>
Credit card fees and VAT apply. See below for details.
</div>
</div>
</div>
</div>
I've illustrated the thing in the snippet, it'll help.
Note: Content justification, background and height are for demonstration and not necessary.
1- set the parent div relative position without top & left & right &
bottom property
2- set the last div position absolute with bottom:0;right:0;left:0;height:36px;
<style>
.pricing__tier {
position:relative;
padding: 0;
text-align: center;
display: flex;
flex-direction: column;
width: 0%;
flex: 1;
}
.pricing__tier>.vat-fee-text {
position:absolute;
bottom:0;
right:0;
left:0;
height:36px;
}
</style>
Following to this answer, I am trying to create a perfect height for my content, But the content height is overflowing instead of getting a scroll over content.
I have created a fiddle for this scenario. Please help me fix my content height such a way that top content and always visible and scroll-able downward.
fiddle
html,
body {
height: 100%;
margin: 0
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 auto;
}
.box .row.content {
display: flex;
flex-flow: column;
flex: 1 1 auto;
overflow-y: auto;
justify-content: center;
align-items: center;
}
.data {
width: 80%;
min-height: 400px;
}
.box .row.footer {
flex: 0 1 40px;
}
HTML.
<head>
<link href="./test.css" rel="stylesheet">
</head>
<body>
<div class="box">
<div class="row header">
<p>
<b>header</b>
<br />
<br />(sized to content)</p>
</div>
<div class="row content">
<div class="data">
invisible box1
</div>
<div class="data">
visible box2
</div>
<div class="data">
visible box3
</div>
<p>
<b>Bottom Box is visible with scroll.</b> (fills remaining space)
</p>
</div>
<div class="row footer">
<p>
<b>footer</b> (fixed height)</p>
</div>
</div>
</body>
</html>
The issue you encounter is caused by justify-content: center in the .box .row.content rule.
Remove it and your text will overflow properly.
.box .row.content {
display: flex;
flex-flow: column;
flex: 1 1 auto;
overflow-y: auto;
/*justify-content: center; removed */
align-items: center;
}
Updated fiddle
This is the default behavior for justify-content: center, where, on a flex column container, when the content overflow, it will overflow both at its top and bottom.
Read more here, where you find resources and a workaround:
How to use safe center with flexbox?
I think overflow: scroll; will fix your problem.
I am trying to better understand flex box css and have a main layout for all pages. It is 3 columns where the first column is fixed width and the others can be any size so long as all 3 take up 100% width.
I believe the problem is in .col class but unsure how to set the 1st column and let the other grow. Thank you.
.wrapper {
display: flex;
flex-direction: row;
}
.col {
flex-basis: 25%;
align-items: stretch;
}
<div class="wrapper">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
You simply need to specify a fixed width to the first one and then set flex:1 to the other so they take the remaining space and fill 100% of the container space:
.wrapper {
display: flex;
flex-direction: row;
}
.col {
flex: 1;
background: red;
}
.col:first-child {
width: 100px; /* Or a percentage value */
flex:initial;
background: green;
}
<div class="wrapper">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>