I've got div containers that are using flex. I have a bold senescence inside my flex child containers.
example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at lectus vitae libero pulvinar fringilla. Nullam vel vestibulum orci.
However, when I create my flex container it's not making the bold text inline. It's creating a block between the regular text and the bold text.
example
Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Nunc at lectus vitae libero
pulvinar fringilla. Nullam vel vestibulum orci.
I've set my flex container as follows:
.flexparent { display: flex; flex-direction: row; justifty-content: center; flex-wrap: wrap-reverse }
.flexchild1 { display: inline-flex; flex-direction: column; flex-wrap: nowrap; justify-contetn: center; width: 65%; margin-right: 4%;}
.flexchild2 { display: inline-flex; flex-direction: column; flex-wrap: nowrap; justify-contetn: center; width: 35%;}
My ideal solution is something like this where .flexchild1 is green and .flexchild2 is yellow.
If you're going to use a flex container, keep in mind that all child elements will become flex items and stack vertically or horizontally, depending on flex-direction.
So, if we consider this code:
<div class="flex-container"><b>Lorem ipsum dolor sit amet</b> consectetur adipiscing elit. <span>Nunc at lectus vitae libero</span> pulvinar fringilla. <i>Nullam vel vestibulum orci.</i></div>
Although, the <b>, <span> and <i> elements are inline-level in a block formatting content...
.flex-container {
display: block;
flex-direction: row;
background-color: lightgreen;
}
span { color: red; }
<div class="flex-container"><b>Lorem ipsum dolor sit amet</b> consectetur adipiscing elit. <span>Nunc at lectus vitae libero</span> pulvinar fringilla. <i>Nullam vel vestibulum orci.</i></div>
ALL child elements are blockified in a flex formatting context...
.flex-container1 {
display: flex;
flex-direction: row;
background-color: lightgreen;
}
.flex-container2 {
display: flex;
flex-direction: column;
background-color: lightgreen;
}
span { color: red; }
<div class="flex-container1"><b>Lorem ipsum dolor sit amet</b> consectetur adipiscing elit. <span>Nunc at lectus vitae libero</span> pulvinar fringilla. <i>Nullam vel vestibulum orci.</i></div>
<hr>
<div class="flex-container2"><b>Lorem ipsum dolor sit amet</b> consectetur adipiscing elit. <span>Nunc at lectus vitae libero</span> pulvinar fringilla. <i>Nullam vel vestibulum orci.</i></div>
What you may want to do is wrap your text in its own block-level container within the flex container.
.flex-container1 {
display: flex;
flex-direction: row;
background-color: lightgreen;
}
.flex-container2 {
display: flex;
flex-direction: column;
background-color: lightgreen;
}
span {
color: red;
}
<div class="flex-container1">
<div>
<b>Lorem ipsum dolor sit amet</b> consectetur adipiscing elit. <span>Nunc at lectus vitae libero</span> pulvinar fringilla. <i>Nullam vel vestibulum orci.</i>
</div>
</div>
<hr>
<div class="flex-container2">
<div>
<b>Lorem ipsum dolor sit amet</b> consectetur adipiscing elit. <span>Nunc at lectus vitae libero</span> pulvinar fringilla. <i>Nullam vel vestibulum orci.</i>
</div>
</div>
Related
Is it possible to prevent the yellow child growing and to take just 50% from parent (like the green takes, because has no content), using just flex properties (grow, shrink, basis)?
Parent has flex-direction: column and both of the children have flex-basis: 50%
I know that a fast solution is to set on yellow child height: 50% and overflow: auto to trigger the scrollbar, but I wanted to achieve that without using the height property.
body{
margin: 0;
}
.parent{
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
}
.parent div:first-child{
background-color: yellow;
flex-basis: 50%;
width: 200px;
}
.parent div:last-child{
background-color: blue;
flex-basis: 50%;
width: 200px;
}
<div class="parent">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat non magna sit amet sagittis. Praesent auctor sed risus vitae dapibus. Aliquam ex purus, fa
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat non magna sit amet sagittis. Praesent auctor sed risus vitae dapibus. Aliquam ex purus, fa
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat non magna sit amet sagittis. Praesent auctor sed risus vitae dapibus. Aliquam ex purus, fa
</div>
<div>
</div>
</div>
Is it possible to prevent the yellow child growing and to take just 50% from parent (like the green takes, because has no content), using just flex properties?
No.
There are no flex properties that would allow you to solve this issue. The flexbox layout mode takes into account the content of its children and like most CSS does, it will try its best to make content visible.
If you want your yellow box to only take up 50% height you have to decide what will happen to the content that will have no room. Below is one example where setting overflow-y: scroll allows the box to reveal the remaining content while still being only 50% height.
body{
margin: 0;
}
.parent{
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
}
.parent div:first-child{
background-color: yellow;
flex-basis: 50%;
width: 200px;
overflow-y: scroll;
}
.parent div:last-child{
background-color: blue;
flex-basis: 50%;
width: 200px;
}
<div class="parent">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat non magna sit amet sagittis. Praesent auctor sed risus vitae dapibus. Aliquam ex purus, fa
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat non magna sit amet sagittis. Praesent auctor sed risus vitae dapibus. Aliquam ex purus, fa
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat non magna sit amet sagittis. Praesent auctor sed risus vitae dapibus. Aliquam ex purus, fa
</div>
<div>
</div>
</div>
I am building a reponsive landing page at the moment that when at full width has 2 boxes that need to match in height, i.e stretch to the tallest. In full width this boxes need to site beside each other, I can get this working with either css grid or flex box as they are on the same row.
When in a mobile size screen the boxes need to wrap beneath each other but still match in height, here is what I have so far.
<div class="welcome-wrapper">
<div class="mt-4 v-card v-sheet theme--light">
<div class="v-card__text text-center">
<p class="headline font-weight-regular text-center my-3">First Action Box</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<button type="button" class="font-weight-bold v-btn v-btn--depressed v-btn--rounded theme--light v-size--x-large success" data-v-step="7"><span class="v-btn__content">Do Action One</span></button>
</div>
</div>
<div class="mt-4 v-card v-sheet theme--light">
<div class="v-card__text text-center">
<p class="headline font-weight-regular text-center my-3">Second Action Box</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie interdum nulla, non rhoncus dolor fringilla vel. Sed eu tellus mollis, auctor sem sed, bibendum purus. Cras eget urna viverra, dapibus urna sed, eleifend massa..</p>
<button type="button" class="font-weight-bold v-btn v-btn--depressed v-btn--rounded theme--light v-size--x-large" style="background-color: rgb(72, 164, 201); border-color: rgb(72, 164, 201);"><span class="v-btn__content">Do action two</span></button>
</div>
</div>
</div>
.welcome-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
/* flex-wrap: wrap; */
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
flex-direction: row;
justify-content: space-between;
}
.welcome-wrapper .v-card {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
flex-basis: 100%;
}
.welcome-wrapper .v-card .v-card__text {
height: 100%;
width: 100%;
}
Anyone any advice on how to match to elements height when they are not actually in a row?
Ignoring the bootstrap classes, here it goes.
.welcome-wrapper {
display: flex;
flex-direction: column;
}
#media(min-width:768px) {
.welcome-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
}
}
.welcome-wrapper .v-card {
background-color: #333;
color: #f0f0f0;
border: 0.05rem solid #eee;
flex: 1 1 0;
padding: 2rem;
}
<div class="welcome-wrapper">
<div class="v-card">
<div>
<p>First Action Box</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<button>
Do Action One
</button>
</div>
</div>
<div class="v-card">
<div>
<p>Second Action Box</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie interdum nulla, non rhoncus dolor fringilla vel. Sed eu tellus mollis, auctor sem sed, bibendum purus. Cras eget urna viverra, dapibus urna sed, eleifend massa..</p>
<button>
Do Action One
</button>
</div>
</div>
</div>
I am making cards using flexbox(https://jsfiddle.net/vs37qo0r/):
/* Only included flex related styles*/
.container {
display: flex;
flex-direction: row;
/*default*/
align-items: stretch;
/*default*/
justify-content: space-around;
}
.card {
flex-basis: 20%;
}
<div class="container">
<div class="card">
<h3>Feature 1</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum dignissim turpis. Ut lacus leo, sagittis at ullamcorper eu, auctor a arcu. Sed non mi sed turpis rhoncus faucibus eu viverra.
</p>
<button type="button">Go Somewhere</button>
</div>
<!-- two more cards of same format-->
</div>
Each <h3> and <p> line up with each other. But, not every <p> is the same size, which then throws off where the <button> is layed out. How can I tell all of the <button>s to line up with each other regardless of the size of the <p> above it?
Set .card to display: flex
Enclose h3, p in a wrapper with flex: 1
Set the button to be at flex-end
jfFiddle
body{
background-color: white;
margin-top: 100px;
padding: 0;
}
.container{
display:flex;
flex-direction: row; /*default*/
align-items: stretch; /*default*/
justify-content: space-around;
}
.card{
border: 1px solid grey;
border-radius: 3px;
background-color: white;
flex-basis: 20%;
text-align: center;
padding: 30px;
font-family: 'Roboto', sans-serif;
display: flex;
flex-direction: column;
}
.card__content {
flex: 1;
}
.button {
align-self: flex-end;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="card">
<div class="card__content">
<h3>Feature 1</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum dignissim turpis. Ut lacus leo, sagittis at ullamcorper eu, auctor a arcu. Sed non mi sed turpis rhoncus faucibus eu viverra.
</p>
</div>
<button type="button">Go Somewhere</button>
</div>
<div class="card">
<div class="card__content">
<h3>Feature 2</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum
</p>
</div>
<button type="button">Go Somewhere</button>
</div>
<div class="card">
<div class="card__content">
<h3>Feature 3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum dignissim turpis. Ut lacus leo, sagittis at ullamcorper eu, auctor a arcu. Sed non mi sed turpis rhoncus faucibus eu viverra.
</p>
</div>
<button type="button">Go Somewhere</button>
</div>
</div>
</body>
jsFiddle
There is no need for a wrapper or more than 3 additional properties. Set .card to flex:
.card {
display:flex;
flex-direction: column;
....
}
Set .card p to flex: 1
.card p {
flex: 1;
}
Try making the .card elements flex-parents themselves, then play with the justify-content property.
.card{
…
display: flex;
flex-direction: column;
justify-content: space-between;
}
body {
background-color: white;
margin-top: 100px;
padding: 0;
}
.container {
display: flex;
flex-direction: row;
/*default*/
align-items: stretch;
/*default*/
justify-content: space-around;
}
.card {
border: 1px solid grey;
border-radius: 3px;
background-color: white;
flex-basis: 20%;
text-align: center;
padding: 30px;
font-family: 'Roboto', sans-serif;
display: flex;
flex-direction: column;
justify-content: space-between;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="card">
<h3>Feature 1</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum dignissim turpis. Ut lacus leo, sagittis at ullamcorper eu, auctor a arcu. Sed non mi sed turpis rhoncus faucibus eu viverra.
</p>
<button type="button">Go Somewhere</button>
</div>
<div class="card">
<h3>Feature 2</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum
</p>
<button type="button">Go Somewhere</button>
</div>
<div class="card">
<h3>Feature 3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum dignissim turpis. Ut lacus leo, sagittis at ullamcorper eu, auctor a arcu. Sed non mi sed turpis rhoncus faucibus eu viverra.
</p>
<button type="button">Go Somewhere</button>
</div>
</div>
</body>
I'm working with you jsfiddle version:
there I added these extra code, and you never have to touch your HTML for it!
.card{
...
display: flex;
flex-direction: column;
align-items: center;
}
button {
margin-top: auto !important;
}
and it's working fine!
body {
background-color: white;
margin-top: 100px;
padding: 0;
}
.container {
display: flex;
flex-direction: row;
/* default */
align-items: stretch;
/* default */
justify-content: space-around;
}
.card {
border: 1px solid grey;
border-radius: 3px;
background-color: white;
flex-basis: 20%;
text-align: center;
padding: 30px;
font-family: 'Roboto', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
}
button {
margin-top: auto;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="card">
<h3>Feature 1</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum dignissim turpis. Ut lacus leo, sagittis at ullamcorper eu, auctor a arcu. Sed non mi sed turpis rhoncus faucibus eu viverra.
</p>
<button type="button">Go Somewhere</button>
</div>
<div class="card">
<h3>Feature 2</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum
</p>
<button type="button">Go Somewhere</button>
</div>
<div class="card">
<h3>Feature 3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum dignissim turpis. Ut lacus leo, sagittis at ullamcorper eu, auctor a arcu. Sed non mi sed turpis rhoncus faucibus eu viverra.
</p>
<button type="button">Go Somewhere</button>
</div>
</div>
</body>
You need to add display: flex, flex-dicrection: column and justify-content: space-between.
Your new css .card class looks like:
.card{
flex-basis: 20%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
I hope this will work for you!
In the below code, I want all the three boxes to have same height and also the links in the three boxes should be in same line as shown in the screenshot below. I have used flexbox for doing this. Please help.
.wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
padding-top: 35px;
padding-bottom: 35px;
background-color: pink;
}
.wrapper div:not(:last-child) {
border-right: 1px solid #fdfdfd;
}
.wrapper div {
flex-basis: 33%;
text-align: center;
padding: 10px 4%;
}
<div class="wrapper">
<div>
<span>Heading1</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, scelerisque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
Link1
</div>
<div>
<span>Heading2</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, sceleriit. Vestibulum sodales finibus fausque.sit amet, consectetur adipiscin </p>
Link2
</div>
<div>
<span>Heading3</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing . esent erat ex, sceler erat ex, sciit. Vestileriibulum sodales finibus fausque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
Link3
</div>
</div>
Remove align-items: flex-start; from the wrapper, give the div display: flex; flex-direction: column;, and set margin-top: auto on the links
.wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
padding-top: 35px;
padding-bottom: 35px;
background-color: pink;
}
.wrapper div:not(:last-child) {
border-right: 1px solid #fdfdfd;
}
.wrapper div {
flex-basis: 33%;
text-align: center;
padding: 10px 4%;
display: flex; /* added property */
flex-direction: column; /* added property */
}
.wrapper div a { /* added rule */
margin-top: auto;
}
<div class="wrapper">
<div>
<span>Heading1</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, scelerisque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
Link1
</div>
<div>
<span>Heading2</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, sceleriit. Vestibulum sodales finibus fausque.sit amet, consectetur adipiscin </p>
Link2
</div>
<div>
<span>Heading3</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing . esent erat ex, sceler erat ex, sciit. Vestileriibulum sodales finibus fausque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
Link3
</div>
</div>
.wrapper {
display: flex;
flex-direction: row;
justify-content: stretch;
padding-top: 35px;
padding-bottom: 35px;
background-color: pink;
}
.wrapper div:not(:last-child) {
border-right: 1px solid #fdfdfd;
}
.wrapper div {
display: flex;
flex-basis: 33%;
flex-direction: column;
justify-content: space-between;
text-align: center;
padding: 10px 4%;
}
.wrapper div a {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: flex-end;
}
<div class="wrapper">
<div>
<span>Heading1</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, scelerisque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
Link1
</div>
<div>
<span>Heading2</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, sceleriit. Vestibulum sodales finibus fausque.sit amet, consectetur adipiscin </p>
Link2
</div>
<div>
<span>Heading3</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing . esent erat ex, sceler erat ex, sciit. Vestileriibulum sodales finibus fausque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
Link3
</div>
</div>
How can we get Flexbox to stop equalizing space in sibling elements when both of the elements are using flex-grow: 1. This is difficult to explain upfront, so here is the code quickly followed by example screenshots of the issue, and desired behavior.
.Parent {
display: flex;
flex-direction: column;
background-color: lightcoral;
width: 400px;
min-height: 200px;
}
.Parent>div {
flex: 1;
}
.child1 {
background-color: lightblue;
}
.child2 {
background-color: lightgreen;
}
<div class="Parent">
<div class="child1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sagittis lorem at odio euismod tincidunt. Proin aliquet velit nec augue venenatis laoreet. Etiam nec metus mi. Aliquam sit amet velit non lectus porttitor accumsan sit amet egestas risus.</div>
<div class="child2">Lorem ipsum</div>
</div>
The issue:
Notice the equal space under the content of each div.
Desired:
When there is little content in the children divs, the divs should be of equal height:
When one of the divs has a lot of content, I would expect the div with more content to only be as tall as the content (if it passes the original flex grow allotment).
How can I get this behavior? Seems it should be easy using Flexbox.
flex-basis is the property you're looking for. https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
The flex-basis CSS property specifies the flex basis which is the initial main size of a flex item. This property determines the size of the content-box unless specified otherwise using box-sizing.
By default, flex will take into account the content in the element when computing flex-grow - to disable that, just specify flex-basis: 0
.Parent {
display: flex;
flex-direction: column;
background-color: lightcoral;
width: 400px;
min-height: 200px;
}
.Parent>div {
flex-grow: 1;
flex-basis: 0;
}
.child1 {
background-color: lightblue;
}
.child2 {
background-color: lightgreen;
}
<div class="Parent">
<div class="child1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sagittis lorem at odio euismod tincidunt. Proin aliquet velit nec augue venenatis laoreet. Etiam nec metus mi. Aliquam sit amet velit non lectus porttitor accumsan sit amet egestas risus. Etiam nec metus mi. Aliquam sit amet velit non lectus porttitor accumsan sit amet egestas risus </div>
<div class="child2">Lorem ipsum</div>
</div>
By setting min-height on .Parent (along with setting the flex-direction to column), you're triggering the browser to fill the space with direct descendants of .Parent. It does so by distributing the space amongst all elements equally (that's the feature of Flexbox).
If you don't want that behavior, remove the min-height from .Parent and set a min-height on .Parent > div elements.
.Parent {
display: flex;
flex-direction: column;
background-color: lightcoral;
width: 400px;
}
.Parent>div {
flex: 1;
min-height: 100px;
}
.Parent > div:nth-child(odd) {
background-color: lightblue;
}
.Parent > div:nth-child(even) {
background-color: lightgreen;
}
<div class="Parent">
<div class="child1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sagittis lorem at odio euismod tincidunt. Proin aliquet velit nec augue venenatis laoreet. Etiam nec metus mi. Aliquam sit amet velit non lectus porttitor accumsan sit amet egestas risus. Nullam sagittis lorem at odio euismod tincidunt. Proin aliquet velit nec augue venenatis laoreet. Etiam nec metus mi. Aliquam sit amet velit non lectus porttitor accumsan sit amet egestas risus.</div>
<div class="child2">Lorem ipsum</div>
<div>Lorem ipsum doler sit amet</div>
<div>When there is little content in the children divs, the divs should be of equal height.</div>
</div>