Goal: I have a main flex box with row display. Within each of these flexbox I will have card with text inside. When I create the card inside the flexbox I place p tags inside the card with the text, but it does not reflect. I want the text to dsiplay within each card.
Code
.flex-container {
display: flex;
flex-direction: row;
background-color: DodgerBlue;
}
.flex-container>div {
background-color: #f1f1f1;
margin: 10px;
/*text-align: center;*/
line-height: 70vh;
font-size: 30px;
}
.funds-card {
display: flex;
flex-direction: column;
width: 200px;
}
.transaction-card {
width: 700px
}
.amount-card {
width: 70%;
height: 70px;
max-width: 100px;
border-radius: 5px;
margin: 5px auto 0 auto;
padding: 1.5em;
background-color: green;
text-align: center;
}
<body>
<h1>The flex-direction Property</h1>
<p>The "flex-direction: row;" stacks the flex items horizontally (from left to right):</p>
<div class="flex-container">
<div class="funds-card">
<div class="amount-card">
<p>Hello</p>
</div>
</div>
<div class="transaction-card">
2
</div>
</div>
</body>
Remove line-height: 70vh; property from the .flex-container>div
.flex-container {
display: flex;
flex-direction: row;
background-color: DodgerBlue;
}
.flex-container>div {
background-color: #f1f1f1;
margin: 10px;
/*text-align: center;*/
/*line-height: 70vh;*/
font-size: 30px;
}
.funds-card {
display: flex;
flex-direction: column;
width: 200px;
}
.transaction-card {
width: 700px
}
.amount-card {
width: 70%;
height: 70px;
max-width: 100px;
border-radius: 5px;
margin: 5px auto 0 auto;
padding: 1.5em;
background-color: green;
text-align: center;
}
<body>
<h1>The flex-direction Property</h1>
<p>The "flex-direction: row;" stacks the flex items horizontally (from left to right):</p>
<div class="flex-container">
<div class="funds-card">
<div class="amount-card">
<p>Hello</p>
</div>
</div>
<div class="transaction-card">
2
</div>
</div>
</body>
Related
I have a JS fiddle here and it's pretty simple what I want to happen but difficult for me to execute it. In the fiddle, you notice there is a red box. I want that red box to be displayed under the text "Join Balance...". I am not sure how to do this.
Can somebody help me?
Fiddle: https://jsfiddle.net/f2h390wc/
HTML and CSS:
/* newsletter section */
#custom_html-5 {
width: 100%;
background-color: #f2f2f2;
padding-bottom: 40px;
padding-top: 20px;
margin-bottom: 70px;
padding-left: 70px !important;
padding-right: 20px !important;
}
.newsletter_inner_section {
display: flex;
}
.newsletter_gif {
width: 200px;
height: auto;
}
.newsletter_left,
.newsletter_center,
.newsletter_right {
display: inline-flex;
}
.newsletter_left {
width: auto;
}
.newsletter_center {
width: 100%;
align-items: center;
}
.newsletter_right {
background: red;
width: 40%;
justify-content: flex-end;
}
.newsletter_text_section {
color: black !important;
font-size: 24px !important;
font-weight: bold;
}
.eVEmvD.eVEmvD.eVEmvD.eVEmvD.eVEmvD.eVEmvD {
width: fit-content !important;
padding: 0 20px;
}
.fGCWnQ.fGCWnQ {
justify-content: flex-end;
}
.kvTDNe.kvTDNe {
display: unset;
}
/* Media Newsletter section only */
#media (max-width:1144px) {
#custom_html-5 {
padding-left: 20px !important;
padding-right: 20px !important;
}
.newsletter_inner_section {
width: 100% !important;
justify-content: center;
display: flex;
}
.newsletter_center,
.newsltter_right {
flex-direction: column !important;
}
}
<!-- newsletter section -->
<div class="newsletter_section">
<div class="newsletter_inner_section">
<div class="newsletter_left">
<img src="https://balancecoffee.co.uk/wp-content/themes/balancecoffeechild/img/newsletternnobkg2.gif" alt="Balance Newsletter" style="padding-right:30px;" class="newsletter_gif">
</div>
<div class="newsletter_center">
<p class="newsletter_text_section">Join Balance and get 20% off your first order</p>
</div>
<div class="newsletter_right">
<div class="newsletter_input_section">
<div class="klaviyo-form-Rrsqsh"></div>
</div>
</div>
</div>
</div>
If you want the text and the red box on the right to form a column, then they both need to be in a flexbox with flex-direction: column;.
I created a sample from scratch because there is a lot of superfluous stuff in your JSFiddle.
.group {
display: flex;
flex-direction: row;
width: 100%;
}
.content-box {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
padding: 40px;
}
.left {
background-color: blue;
}
.right {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.top-right {
background-color: green;
}
.bottom-right {
background-color: red;
}
<div class='group'>
<div class='left content-box'>
Content
</div>
<div class='right'>
<div class='top-right content-box'>
Content
</div>
<div class='bottom-right content-box'>
Content
</div>
</div>
</div>
https://www.w3schools.com/cssref/css3_pr_flex-direction.asp
display: flex;
flex-direction: column;
is there a way to change margin or padding when a flex item is wrapped?
This is my problem:
I have a div 'buy' with margin: 0 auto, because i want it to be always at the right, but when this div is wrapped, i want to change that margin.
Before wrap:
After wrap:
This is my code:
HTML:
.container {
cursor: grab;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
width: 70%;
background: #24252A;
margin: 20px auto;
height: auto;
border-radius: 5px;
box-shadow: 3px 3px 3px 3px #0d0d0d;
display: flex;
flex-wrap: wrap;
}
.container > div {
margin-right: 10px;
}
#imgBox {
width: 200px;
height: 200px;
object-fit: contain;
align-self: flex-start;
margin-top: 10px;
}
#content {
max-width: 50%;
min-width: 200px;
margin-top: 10px;
}
#buy {
margin-left: auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.buy-specs {
display: flex;
flex-direction: column;
align-items: center;
}
#buy > * {
margin-left: auto;
}
<div id="container0" class="container" draggable="true" ondragstart="drag(event)">
<div id="imgBox">
<img src="../img/pinguini.jpg" alt="" draggable="false">
</div>
<div id="content">
<h2>Pinguini Tattici Nucleari</h2>
<p id="luogo">Torino - Pala Alpitour</p><p>04/10/2021 | 21:00</p>
</div>
<div id="buy">
<div class="buy-specs">
<p>Prezzo: 39,10 €</p>
<div id="quantityDiv"><p>Quantità: </p>
</div>
<button id="button0">Aggiungi al carrello</button>
</div>
</div>
Thank you!
Another approach could be to let the middle one to grow and push the last one.
last one can receive : margin:auto to be centered if alone on its row:
possible example:
.container {
cursor: grab;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
width: 70%;
background: #24252A;
margin: 20px auto;
height: auto;
border-radius: 5px;
box-shadow: 3px 3px 3px 3px #0d0d0d;
display: flex;
flex-wrap: wrap;
}
.container>div {
margin-right: 10px;
}
#imgBox {
width: 200px;
height: 200px;
margin:auto;
margin-top: 10px;
}
#content {
flex-grow: 1;
min-width: 200px;
margin-top: 10px;
}
#buy {
display: flex;
flex-direction: column;
justify-content: center;
margin:auto;/* optionnal to center if alone*/
}
.buy-specs {
display: flex;
flex-direction: column;
align-items: center;
}
#buy>* {
margin-left: auto;
}
<div id="container0" class="container" draggable="true" ondragstart="drag(event)">
<div id="imgBox">
<img src="https://dummyimage.com/200/349&text=pinguini" alt="" draggable="false">
</div>
<div id="content">
<h2>Pinguini Tattici Nucleari</h2>
<p id="luogo">Torino - Pala Alpitour</p>
<p>04/10/2021 | 21:00</p>
</div>
<div id="buy">
<div class="buy-specs">
<p>Prezzo: 39,10 €</p>
<div id="quantityDiv">
<p>Quantità: </p>
</div>
<button id="button0">Aggiungi al carrello</button>
</div>
</div>
Note that first an last one can be centered if standing alone on a row:
I have a list of messages (which is a flex child) in a container with unknown height and want to make them scrollable. But I cannot find a proper combination of flex-grow: 1, min-height: 0 and other flex tricks to make it working - message list is still bigger than its parent.
When I add overflow-y: auto to its parent - it works but this parent besides messages list includes some content which should not scroll.
Here's my example for this case: https://jsfiddle.net/ecbtrn58/2/
<div class="page">
<div class="messages-section">
<div class="header">Your messages</div>
<div class="content">
<img src="https://http.cat/100" width="70" height="50"/>
<div class="messages-list">
<div class="message">Hi.</div>
<div class="message">Hello.</div>
<div class="message">Good morning.</div>
<div class="message">Yo!</div>
</div>
</div>
</div>
</div>
.page {
background-color: #ddd;
width: 300px;
height: 300px;
.messages-section {
display: flex;
flex-direction: column;
width: 50%;
height: 100%;
background-color: #ccc;
.header {
background: #bbb;
padding: 5px;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
padding: 5px;
.messages-list {
display: flex;
flex-direction: column;
overflow-y: auto;
/* What to add here to make it scrollable? */
.message {
height: 50px;
margin: 10px;
padding: 10px;
background: #1dc497;
}
}
}
}
}
How can I make messages list to scroll?
You have to set the height of .content to 100% and make it scrollable:
.page {
background-color: #ddd;
width: 300px;
height: 300px;
}
.page .messages-section {
display: flex;
flex-direction: column;
width: 50%;
height: 100%;
background-color: #ccc;
}
.page .messages-section .header {
background: #bbb;
padding: 5px;
}
.page .messages-section .content {
display: flex;
flex-direction: column;
align-items: center;
padding: 5px;
height: 100%;
overflow-x: scroll;
}
.page .messages-section .content .messages-list {
display: flex;
flex-direction: column;
overflow-y: auto;
/* What to add here to make it scrollable? */
}
.page .messages-section .content .messages-list .message {
height: 50px;
margin: 10px;
padding: 10px;
background: #1dc497;
}
<div class="page">
<div class="messages-section">
<div class="header">Your messages</div>
<div class="content">
<img src="https://http.cat/100" width="70" height="50" />
<div class="messages-list">
<div class="message">Hi.</div>
<div class="message">Hello.</div>
<div class="message">Good morning.</div>
<div class="message">Yo!</div>
</div>
</div>
</div>
</div>
I am using flexbox to create part of a page and I have 2 buttons that will open modals in one of the flexbox items. I would like to fix the buttons to the bottom of the item like a footer if possible.
I have created a CodePen to demo the issue. I have tried several solutions but I can't seem to get the buttons aligned at the bottom. I am relatively new to HTML and CSS so it's very possible that I've missed something trivial.
#container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
align-content: center;
margin-top: 20px;
}
.one {
background-color: black;
color: white;
font-size: 30px;
padding: 10px;
width: 450px;
flex-grow: 1;
height: 600px;
}
.two {
background-color: grey;
color: white;
font-size: 30px;
padding: 10px;
flex-grow: 1.2;
width: 524px;
height: 600px;
}
button {
background-color: green;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
<div id="container">
<div class="one">
<p> I would like to align the buttons to the bottom of this item </p>
<button id="Btn1">Open Modal 1</button>
<button id="Btn2">Open Modal 2</button>
</div>
<div class="two">
<p> No buttons for this item </p>
</div>
You can make .one display: flex; flex-direction: column;, wrap the buttons in an element, and use justify-content: space-between on .one to push the buttons to the bottom of the column.
#container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
align-content: center;
margin-top: 20px;
}
.one{
background-color: black;
color: white;
font-size: 30px;
padding: 10px;
width: 450px;
flex-grow: 1;
height: 600px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.two{
background-color: grey;
color: white;
font-size: 30px;
padding: 10px;
flex-grow: 1.2;
width: 524px;
height: 600px;
}
button {
background-color: green;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
<div id="container">
<div class="one">
<p> I would like to align the buttons to the bottom of this item </p>
<div class="buttons">
<button id="Btn1">Open Modal 1</button>
<button id="Btn2">Open Modal 2</button>
</div>
</div>
<div class="two">
<p> No buttons for this item </p>
</div>
Since flex properties only apply to the children of a flex container, your buttons are not flex items.
The buttons are descendants of the flex container (#container), but not children, so they are beyond the scope of flex layout.
One method to resolve the issue would be to make the parent of the buttons a flex container. Then flex properties can be applied to the buttons.
#container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
align-content: center;
margin-top: 20px;
}
.one {
background-color: black;
color: white;
font-size: 30px;
padding: 10px;
width: 450px;
flex-grow: 1;
height: 600px;
display: flex; /* new */
flex-wrap: wrap; /* new */
}
p {
flex: 0 0 100%; /* new */
}
button {
margin: auto 10px 0; /* new */
background-color: green;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.two {
background-color: grey;
color: white;
font-size: 30px;
padding: 10px;
flex-grow: 1.2;
width: 524px;
height: 600px;
}
<div id="container">
<div class="one">
<p> I would like to align the buttons to the bottom of this item </p>
<button id="Btn1">Open Modal 1</button>
<button id="Btn2">Open Modal 2</button>
</div>
<div class="two">
<p> No buttons for this item </p>
</div>
Learn more about the flex formatting context here:
Proper use of flex properties when nesting flex containers
Learn more about flex auto margins here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
One approach would be to put your buttons in their own <div> like so:
<div id="container">
<div class="one">
<p> I would like to align the buttons to the bottom of this item </p>
<div class="btn-container">
<button id="Btn1">Open Modal 1</button>
<button id="Btn2">Open Modal 2</button>
</div>
</div>
<div class="two">
<p> No buttons for this item </p>
</div>
and change your css to:
#container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
align-content: center;
margin-top: 20px;
}
.one {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: space-between;
height: 100vh;
background-color: black;
color: white;
font-size: 30px;
padding: 10px;
width: 450px;
height: 600px;
}
.two {
background-color: grey;
color: white;
font-size: 30px;
padding: 10px;
flex-grow: 1.2;
width: 524px;
height: 600px;
}
.btn-container {
justify-content: flex-end;
display: flex;
}
button {
margin: 10px;
background-color: green;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
I have a flexbox container that has 4 elements: C1,C2,C3,C4.
Currently, it is displayed all in one line.
My goal is to make C4 to display under C3.
Can someone guide me how to accomplish my goal? Thanks in advance.
The following are my code: https://jsfiddle.net/vvqhejt3/3/
.flexbox {
display: flex;
border: 1px solid black;
width: 330px;
}
.content1 {
width: 100px;
margin-right: 10px;
background-color: blue;
height: 50px;
}
.content2 {
width: 100px;
margin-right: 10px;
background-color: yellow;
}
.content3 {
width: 100px;
margin-right: 10px;
background-color: red;
}
.content4 {
width: 100px;
background-color: green;
height: 10px;
}
<div class="flexbox">
<div class="content1">C1</div>
<div class="content2">C2</div>
<div class="content3">C3</div>
<div class="content4">C4</div>
</div>
When you create a flex container (display: flex or display: inline-flex), it comes with several default settings. Among them are:
flex-direction: row - flex items will align horizontally
justify-content: flex-start - flex items will stack at the start of the line
align-items: stretch - flex items will expand to cover the cross-size of the container
flex-wrap: nowrap - flex items are forced to stay in a single line
Note the last setting.
Your four divs are forced to remain in a single line.
You can override this setting with flex-wrap: wrap.
Then you can use an auto margin to space the item to the right.
.flexbox {
display: flex;
flex-wrap: wrap; /* NEW */
border: 1px solid black;
width: 330px;
}
.content1 {
width: 100px;
margin-right: 10px;
background-color: blue;
height: 50px;
}
.content2 {
width: 100px;
margin-right: 10px;
background-color: yellow;
}
.content3 {
width: 100px;
margin-right: 10px;
background-color: red;
}
.content4 {
width: 100px;
background-color: green;
height: 10px;
margin-left: auto; /* NEW */
margin-right: 10px; /* NEW */
}
<div class="flexbox">
<div class="content1"> C1 </div>
<div class="content2"> C2 </div>
<div class="content3"> C3 </div>
<div class="content4"> C4 </div>
</div>
References:
Methods for Aligning Flex Items along the Main Axis
5.2. Flex Line Wrapping: the flex-wrap property
Add flex-flow: row wrap; and justify-content: flex-end; to the container and margin-right: 10px; to div class .content4. Also be sure to correct the class in the last container. Currently it says conten4
Also, here is a link to a simple guide for flexbox.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
HTML
<div class="flexbox">
<div class="content1"> C1 </div>
<div class="content2"> C2 </div>
<div class="content3"> C3 </div>
<div class="content4"> C4 </div>
</div>
CSS
.flexbox {
display: flex;
border: 1px solid black;
width: 330px;
flex-flow: row wrap;
justify-content: flex-end;
}
.content1 {
width: 100px;
margin-right: 10px;
background-color: blue;
height: 50px;
}
.content2 {
width: 100px;
margin-right: 10px;
background-color: yellow;
}
.content3 {
width: 100px;
margin-right: 10px;
background-color: red;
}
.content4 {
width: 100px;
background-color: green;
height: 10px;
margin-right: 10px;
}