I'm trying to build a pricing table where each column contains a card. I want all cards to stretch to the height of their parent (.col) elements.
Note: I'm using Bootstrap 4, and trying to achieve this with the existing grid system (for the sake of consistency) and with this particular piece of markup. I can't get the cards to grow to the height of their parent containers. Is this even possible with the current markup?
The basic markup is this:
<div class="row">
<div class="col">
<div class="card">
blah
blah
blah
</div>
<div class="card">
blah
</div>
<div class="card">
blah
</div>
</div>
</div>
Here is my pen: https://codepen.io/anon/pen/oZXWJB
Add flex-grow : 1; to your .card rule. HTML markup is fine.
.row {
display: flex;
flex-flow: row wrap;
background: #00e1ff;
margin: -8px;
}
.col {
display: flex;
flex: 1 0 400px;
flex-flow: column;
margin: 10px;
background: grey;
}
.card {
display: flex;
padding: 20px;
background: #002732;
color: white;
opacity: 0.5;
align-items: stretch;
flex-direction: column;
flex-grow: 1;
}
You may also look at Foundation 6 Equalizer plugin. They use JavaScript though.
You just need to add height: 100% on .card
.card {
display: flex;
padding: 20px;
background: #002732;
color: white;
opacity: 0.5;
align-items: stretch;
flex-direction: column;
height: 100%;
}
DEMO
Just add flex: 1 to your card class. Should be enough. And you don't need display: flex; align-items: stretch; flex-direction: column in this class.
Add height: 100% to .card
.card {
display: flex;
height: 100%;
padding: 20px;
background: #002732;
color: white;
opacity: 0.5;
align-items: stretch;
flex-direction: column;
}
example - https://codepen.io/anon/pen/zZGzyd
Just make your .cardheight to 100%.
.card{
height: 100%;
display: flex;
padding: 20px;
background: #002732;
color: white;
opacity: 0.5;
align-items: stretch;
flex-direction: column;
}
If you're using Bootstrap 4, they already have build-in classes for what you're trying to achieve.
Add card-deck to <div class="row card-deck">
Add display: inline-block; on .col and min-height: 100%; on .class
.row {
display: flex;
...
}
.col {
display: inline-block;
...
}
.card {
min-height:100%;
...
}`
Related
I am trying to style a div that has two children, with flexbox and flex-wrap, without media-queries, that at a certain width is space-between, but once it is a single column is centered (as opposed to currently where once it wraps it's like flex-start). Hopefully that makes sense.
I think this is the relevant code, basically when it wraps, i would like space between to become center:
HTML and CSS
.content-container {
display: flex;
justify-content: center;
width: 100%;
}
.content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 82%;
}
.content h1 {
min-width: 20rem;
}
.content h6 {
min-width: 15.5rem;
}
<div class="content-container">
<div class="content">
<h1>'content1'</h1>
<h6>'content2'</h6>
</div>
</div>
I hope this fits your needs.
Since I don't believe that there is a way to solve your problem using only native CSS (i.e. no media queries, and I assume no JS), I let myself change the space-between to space-around (since you gave .content 82% there is not much of a difference).
if you do not want to use space-around, I find it hard for me to believe that there is a solution without media-queries \ JS.
.content-container {
display: flex;
justify-content: center;
width: 100%;
}
.content {
display: flex;
flex-wrap: wrap;
place-items: center;
justify-content: space-around;
width: 100%;
}
h1 {
width: min-content;
}
h6 {
width: min-content;
}
<div class="content-container">
<div class="content">
<h1 class="content__1">'content1'</h1>
<h6 class="content__2">'content2'</h6>
</div>
</div>
Do you want like this:
.content-container {
display: flex;
justify-content: center;
width: 100%;
}
.content {
display: flex;
flex-wrap: wrap;
justify-content: center;
text-align: center;
width: 82%;
}
.content h1 {
min-width: 20rem;
}
.content h6 {
min-width: 15.5rem;
}
<div class="content-container">
<div class="content">
<h1>'content1'</h1>
<h6>'content2'</h6>
</div>
</div>
I'm afraid it's impossible to achieve what you want the way you want (i.e., CSS without a #media query).
Solution 1: CSS without a #media query
If you don’t want to use a #media query, then look at Solution 1. But space-around is a different thing than space-between because space-between will push your two elements all the way to the left and right when they’re not stacked above each other, while space-around will not do so.
An example of space-between:
An example of space-around:
.content-container {
display: flex;
justify-content: center;
width: 100%;
}
.content {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
width: 82%;
text-align: center;
line-height: 50px;
border: 2px solid red;
}
.content h1 {
min-width: 20rem;
background-color: #DCDCDC;
}
.content h6 {
min-width: 15.5rem;
background-color: #DCDCDC;
}
<div class="content-container">
<div class="content">
<h1>Content 1</h1>
<h6>Content 2</h6>
</div>
</div>
If Solution 1 is good enough for you, then you don’t need to read further. But there are many better options on the table. If you’re not limited and can make changes to your code, then I think you should look at other possible solutions below. You can use different approaches to achieve what you want if you want your two elements to be pushed all the way to the left and right when they’re not stacked above each other.
The reason why this can’t be done without using a #media query, JavaScript or jQuery is that CSS on its own can’t “switch” from space-between to space-around when your two elements get stacked above each other. You need to define some rules using a #media query, JavaScript or jQuery so that CSS will change from space-between to space-around at a specific window width (i.e., exactly when your two elements get stacked above each other). See other possible solutions below.
Solution 2: CSS with a #media query
.content-container {
display: flex;
justify-content: center;
width: 100%;
}
.content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 82%;
text-align: center;
line-height: 50px;
border: 2px solid red;
}
.content h1 {
min-width: 20rem;
background-color: #DCDCDC;
}
.content h6 {
min-width: 15.5rem;
background-color: #DCDCDC;
}
#media only screen and (max-width: 708px) {
.content {
justify-content: space-around;
}
}
<div class="content-container">
<div class="content">
<h1>Content 1</h1>
<h6>Content 2</h6>
</div>
</div>
Solution 3: JavaScript
window.onload = function() {
if (window.innerWidth < 709) {
document.getElementById("content").style.justifyContent = "space-around";
} else {
document.getElementById("content").style.justifyContent = "space-between";
}
}
window.onresize = function() {
if (window.innerWidth < 709) {
document.getElementById("content").style.justifyContent = "space-around";
} else {
document.getElementById("content").style.justifyContent = "space-between";
}
}
.content-container {
display: flex;
justify-content: center;
width: 100%;
}
.content {
display: flex;
flex-wrap: wrap;
width: 82%;
text-align: center;
line-height: 50px;
border: 2px solid red;
}
.content h1 {
min-width: 20rem;
background-color: #DCDCDC;
}
.content h6 {
min-width: 15.5rem;
background-color: #DCDCDC;
}
<div class="content-container">
<div class="content" id="content">
<h1>Content 1</h1>
<h6>Content 2</h6>
</div>
</div>
Solution 4: jQuery
$(window).on('load', function() {
if ($(window).width() < 709) {
$(".content").css("justify-content", "space-around");
} else {
$(".content").css("justify-content", "space-between");
}
});
$(window).on('resize', function() {
if ($(window).width() < 709) {
$(".content").css("justify-content", "space-around");
} else {
$(".content").css("justify-content", "space-between");
}
});
.content-container {
display: flex;
justify-content: center;
width: 100%;
}
.content {
display: flex;
flex-wrap: wrap;
width: 82%;
text-align: center;
line-height: 50px;
border: 2px solid red;
}
.content h1 {
min-width: 20rem;
background-color: #DCDCDC;
}
.content h6 {
min-width: 15.5rem;
background-color: #DCDCDC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="content-container">
<div class="content">
<h1>Content 1</h1>
<h6>Content 2</h6>
</div>
</div>
P.S. I added text-align: center; and line-height: 50px; to the .content class because if you really want to have your content centered then you also need to center text horizontally and vertically inside your containers. This is a quick fix, you can remove that if you want. Also, border: 2px solid red; is added to the .content class so you can better understand the difference between space-between and space-around.
Try this.
.content-container {
display: flex;
justify-content: center;
width: 100%;
text-align:center;
}
.content {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
width: 82%;
text-align:center;
}
.content h1 {
min-width: 20rem;
}
.content h6 {
min-width: 15.5rem;
}
<div class="content-container">
<div class="content">
<h1>'content1'</h1>
<h6>'content2'</h6>
</div>
</div>
Here is an idea using clamp() where I will toggle between a fixed width and full width based on a parameter (50rem in this case)
.content-container {
display: flex;
justify-content: center;
width: 100%;
}
.content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 82%;
text-align: center;
}
.content > * {
width: clamp(15rem, (50rem - 100vw)*9999, 100%);
outline: 1px solid red;
}
<div class="content-container">
<div class="content">
<h1>'content1'</h1>
<h6>'content2'</h6>
</div>
</div>
Related article if you want more detail: https://css-tricks.com/responsive-layouts-fewer-media-queries/
The following solution uses only flexbox, no media queries or JavaScript. Does this do what you want?
.content-container {
display: flex;
justify-content: center;
width: 100%;
}
.content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 82%;
text-align: center;
}
.content h1,
.content h6 {
flex: 1;
}
.horizontal-spacing {
flex: 1;
min-width: calc(20rem + 15.5rem);
height: 0;
}
<div class="content-container">
<div class="content">
<h1>'content1'</h1>
<span class="horizontal-spacing"></span>
<h6>'content2'</h6>
</div>
</div>
This question already has answers here:
Center and bottom-align flex items
(3 answers)
Closed 4 years ago.
I have a problem with flexbox. I attempted to align two elements; the one to the top of the container, and another one to the center. Most of the flexbox examples were using three elements, not two elements. So I tried my own solution.
#main {
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-between;
height: 100px;
background-color: #dfdfdf;
}
#box1 {
display: flex;
justify-content: flex-end;
background-color: #ff0000;
}
#box2 {
display: flex;
background-color: #00ff00;
}
#dummy {
display: flex;
opacity: 0;
}
<div id="main">
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="dummy">dummy</div>
</div>
...and I also applied it to horizontal case.
#main {
display: flex;
flex: 1;
flex-direction: row;
justify-content: space-between;
height: 100px;
background-color: #dfdfdf;
}
#box1 {
display: flex;
justify-content: flex-end;
background-color: #ff0000;
width: 200px;
}
#box2 {
display: flex;
background-color: #00ff00;
width: 100px;
}
#dummy {
display: flex;
opacity: 0;
width: 200px;
}
<div id="main">
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="dummy">dummy</div>
</div>
However, it needs a useless dummy element. I think it is not a good idea :(
Is there any better way to solve this?
you don't have to add this 'dummy' div. According to me you should keep display flex in you container, but change justify-content: space-between to justify-content: center.
Then simply add position absolute to you first, child element and display it on the top of the container. Also remember to add relative position to your container.
Here is working code:
#main {
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
height: 100px;
background-color: #dfdfdf;
position: relative;
}
#box1 {
display: flex;
justify-content: flex-end;
background-color: #ff0000;
position:absolute;
top:0;
width:100%;
}
#box2 {
display: flex;
background-color: #00ff00;
}
Fiddle: https://jsfiddle.net/95Lwcbuk/1/
If you want to use flex-box only, you could wrap another .container element around each of your boxes, set these to use flex also, but set the first one to justify-content: flex-start, the last one to justify-content: flex-end.
See example
#main {
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
height: 100px;
background-color: #dfdfdf;
}
.container {
flex-basis:50%;
display:flex;
flex-direction:column;
}
.container:first-child {
justify-content: flex-start;
}
.container:last-child {
justify-content: flex-end;
}
#box1 {
background-color: #ff0000;
}
#box2 {
background-color: #00ff00;
}
<div id="main">
<div class="container">
<div id="box1">box1</div>
</div>
<div class="container">
<div id="box2">box2</div>
</div>
</div>
.appShopSummaryContainer {
display: flex;
flex-flow: column wrap;
}
.appShopSummaryContainer .appShopSummaryProductWrap {
flex-basis: 100%;
background: pink;
height: 100%;
width: 100%;
display: flex;
flex-flow: row nowrap;
align-items: center;
}
.appShopSummaryContainer .appShopSummaryImg {
flex: 0 0 40%;
height: auto;
padding-bottom: 26.667%;
background: green;
background-size: cover !important;
background-position: center center !important;
}
.appShopSummaryContainer .appShopSummaryInfo {
flex: 0 0 60%;
background: orange;
display: flex;
flex-flow: column wrap;
align-items: flex-start;
height: 100%; /* not working */
/* doesn't work: align-self: stretch; */
}
.appShopSummaryContainer .appShopSummaryMoreInfoBtn {
cursor: pointer;
background: #214291;
color: #fff;
padding: 10px;
border-radius: 5px;
}
<div class="appShopSummaryContainer">
<!-- FOR EACH THING DO THIS -->
<div class="appShopSummaryProductWrap">
<div class="appShopSummaryInfo">
<h3>Title</h3>
More Information
</div>
</div>
<!-- ENDFOREACH -->
</div>
I've had a look at some other stackoverflow answers to similar questions, but none work in this situation. Not sure why, but cannot get the orange div to expand to the full height of it's parent.
Setting a height to 100% obviously won't work since the parent doesn't have a fixed height, but aligning itself as stretch also fails to stretch the height.
If anyone can solve this, can someone explain why the align stretch won't work, and why their solution does? Thanks for any help here.
Do you mean something like this ?
you have to add align-items: stretch; to the parent not the item itself
check out this css flex guide
add align-items: stretch; to .appShopSummaryContainer .appShopSummaryProductWrap and remove height: 100%; from .appShopSummaryContainer .appShopSummaryInfo and add justify-content: center; to .appShopSummaryContainer .appShopSummaryInfo
.appShopSummaryContainer {
display: flex;
flex-flow: column wrap;
}
.appShopSummaryContainer .appShopSummaryProductWrap {
flex-basis: 100%;
background: pink;
height: 100%;
width: 100%;
display: flex;
flex-flow: row nowrap;
align-items: stretch;
}
.appShopSummaryContainer .appShopSummaryImg {
flex: 0 0 40%;
height: auto;
padding-bottom: 26.667%;
background: green;
background-size: cover !important;
background-position: center center !important;
}
.appShopSummaryContainer .appShopSummaryInfo {
flex: 0 0 60%;
background: orange;
display: flex;
flex-flow: column wrap;
align-items: flex-start;
justify-content: center;
}
.appShopSummaryContainer .appShopSummaryMoreInfoBtn {
cursor: pointer;
background: #214291;
color: #fff;
padding: 10px;
border-radius: 5px;
}
<div class="appShopSummaryContainer">
<!-- FOR EACH THING DO THIS -->
<div class="appShopSummaryProductWrap">
<div class="appShopSummaryInfo">
<h3>Title</h3>
More Information
</div>
</div>
<!-- ENDFOREACH -->
</div>
How do I stretch the divs with a yellow background to full height? It should cover up the green but it is not working. I tried adding height: 100% on it but then it adds up the height from the search bar?
https://jsfiddle.net/nuy20j1h/
.block {
width: 80%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.sidebar {
height: 600px;
width: 25%;
background: red;
}
.home {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
width: 75%;
background: green;
}
.search-bar {
width: 100%;
padding: 25px;
background: blue;
}
.content-wrap {
display: flex;
flex-wrap: wrap;
width: 100%;
align-items: flex-stretch;
}
.content,
.single {
width: 50%;
background: yellow;
}
<div class="block">
<div class="sidebar">sidebar</div>
<div class="home">
<div class="search-bar">search bar</div>
<div class="content-wrap">
<div class="content">lorem ipsum</div>
<div class="single">test</div>
</div>
</div>
</div>
First you should add a style reset, I'm using this now * {} as you can se below. The trick here is to run flex-direction: column; on .home and you can tell .content-wrap to take up the rest of that space after the search with flex-grow: 1;
box-sizing: border-box; is, if you add let's say width: 200px; to a element, and add padding: 20px;, the element will stay 200px with the padding included. If you don't have that, it will take up 200px + 40px.
if you want the fiddle, here it is
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.block {
width: 80%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.sidebar {
height: 600px;
width: 25%;
background: red;
}
.home {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
width: 75%;
background: green;
}
.search-bar {
width: 100%;
padding: 25px;
background: blue;
}
.content-wrap {
display: flex;
flex-grow: 1;
flex-wrap: wrap;
width: 100%;
align-items: flex-stretch;
}
.content,
.single {
width: 50%;
background: yellow;
}
<div class="block">
<div class="sidebar">sidebar</div>
<div class="home">
<div class="search-bar">search bar</div>
<div class="content-wrap">
<div class="content">lorem ipsum</div>
<div class="single">test</div>
</div>
</div>
</div>
As mentioned in other answers, there is one main issue here:
flex-direction: column;, which I added to home, to enable the usage of flex properties instead of height, to make the .content-wrap fill the available space left in home
That will make the .search-bar and .content-wrap stack vertical, and enable the use of flex: 1 on .content-wrap, which will make it fill the remaining space/height.
So even if you got answers already, and since there are some properties with wrong value, or not needed, I decided to post an answer to clarify the changes made.
See my notes made in the CSS for further clarifications and what I changed.
Stack snippet
.block {
width: 80%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.sidebar {
height: 600px;
width: 25%;
background: red;
}
.home {
display: flex;
flex-direction: column; /* added */
/*flex-wrap: wrap; removed, not needed */
/*align-items: flex-start; removed, items should fill parent's,
in this changed case, width */
width: 75%;
background: green;
}
.search-bar {
/*width: 100%; not needed, default for column
item is to fill parent width as
its "align-items" is "stretch" */
padding: 25px;
background: blue;
}
.content-wrap {
flex: 1; /* added, take the remaining space left
left of its parent (height in this case) */
display: flex;
flex-wrap: wrap;
/*width: 100%; not needed, default for column
item is to fill parent width as
its "align-items" is "stretch" */
/*align-items: flex-stretch; wrong value, should be "stretch",
though since that is the default,
it is not needed */
}
.content,
.single {
width: 50%;
background: yellow;
}
<div class="block">
<div class="sidebar">sidebar</div>
<div class="home">
<div class="search-bar">search bar</div>
<div class="content-wrap">
<div class="content">lorem ipsum</div>
<div class="single">test</div>
</div>
</div>
</div>
flex-direction: column; is your friend. Here is a reworked fiddle of your code: https://jsfiddle.net/vsjktmms/1/
Using the same HTML structure you provided:
.block {
display: flex;
width: 80%;
margin: 0 auto;
background-color: gray;
align-items: stretch;
}
.sidebar {
width: 25%;
height: 600px;
background-color: red;
}
.home {
display: flex;
flex-direction: column;
align-items: stretch;
width: 75%;
background-color: green;
}
.search-bar {
padding: 25px;
background-color: blue;
}
.content-wrap {
flex: 1 1 auto;
display: flex;
flex-wrap: wrap;
width: 100%;
background-color: pink;
}
.content,
.single {
width: 50%;
background: yellow;
}
I have a flex container and the children in that are wrapping, I want them to both remain 100% in width - how would I do this?
.flexbox {
display: flex;
align-items: center;
width: 100%;
height: 100vh;
}
.container {
display: flex;
flex-shrink: 0;
display: block;
}
<div class="flexbox">
<div class="container">sadasd</div>
<div class="container">adasdsad</div>
</div>
https://jsfiddle.net/shx2yheg/
You just need to set flex: 0 0 100% on flex child elements and initial value of flex-wrap is nowrap so you don't have to change that.
.flexbox {
display: flex;
align-items: center;
width: 200px;
border: 2px solid red;
}
.container {
flex: 0 0 100%;
border: blue 1px solid;
}
<div class="flexbox">
<div class="container">sadasd</div>
<div class="container">adasdsad</div>
</div>
you could do that by setting the flex-flow property on the the flexbox like this
.flexbox {
display: flex;
align-items: center;
flex-flow: column;
width:100%;
height:100vh;
}
.container {
display: flex;
}