I have 2 flex box containers. One of these is in row for and the other is in column for. What I am need to do is to have the items be in a cascading way. All items should have the same height and width but should be leveled in different positions.
Adjusting them margin of the container and items is not working.
HTML
<div class="flex-review">
<div class="review-card"></div>
<div class="review-card"></div>
<div class="review-card"></div>
</div>
<div class="flex-container">
<div class="main-card" id="higest-card"></div>
<div class="main-card"></div>
<div class="main-card"></div>
</div>
CSS (firts part is for bottom cotainer with big items, second part is for top cotainer with small items)
.flex-container{
display: flex;
justify-content: center;
align-content: space-between;
}
.main-card{
height: 250px;
width: 400px;
background-color: antiquewhite;
box-shadow: 5px 10px 18px #b8b5b5;
border-radius: 5px;
margin-top: 400px;
margin-right: 40px;
}
.flex-review{
display: flex;
flex-direction: column;
align-items: flex-end;
}
.review-card{
height: 60px;
width: 500px;
background-color: antiquewhite;
box-shadow: 5px 10px 18px #b8b5b5;
border-radius: 5px;
margin-right: 100px;
margin-top: 50px;
}
Currently looks like this:
Is this what you're after?
I set the divs to have relative positioning, and simply moved them using right/bottom.
.flex-container{
display: flex;
justify-content: center;
align-content: space-between;
}
.main-card{
height: 250px;
width: 400px;
background-color: antiquewhite;
box-shadow: 5px 10px 18px #b8b5b5;
border-radius: 5px;
margin-top: 400px;
margin-right: 40px;
position: relative;
}
.main-card:nth-child(1) {
bottom: 100px;
}
.main-card:nth-child(2) {
bottom: 50px;
}
.flex-review{
display: flex;
flex-direction: column;
align-items: flex-end;
}
.review-card{
height: 60px;
width: 500px;
background-color: antiquewhite;
box-shadow: 5px 10px 18px #b8b5b5;
border-radius: 5px;
margin-top: 50px;
position: relative;
}
.review-card:nth-child(1) {
right: 100px;
}
.review-card:nth-child(2) {
right: 50px;
}
<div class="flex-review">
<div class="review-card"></div>
<div class="review-card"></div>
<div class="review-card"></div>
</div>
<div class="flex-container">
<div class="main-card" id="higest-card"></div>
<div class="main-card"></div>
<div class="main-card"></div>
</div>
Related
I don't want to wrap any of the columns, just have the last row break to the next line. When I add flex-wrap: wrap; to the row, it looks close to the desired result, but I need the first column to break.
.month-box {
background: #fefcf8;
border: 1px solid #bbb4a8;
border-radius: 5px;
min-height: 138px;
padding: 0;
text-align: center;
width: 230px;
}
.month-row {
border-top: 1px solid #e9e7e1;
color: #3c3c3c;
font-size: 14px;
padding: 7px 20px;
text-align: left;
display: flex;
/*flex-wrap: wrap;*/
align-items: center;
justify-content: space-between;
gap: 0 15px;
}
.quick-adjust-row {
display: flex;
width: 100%;
}
.item-value {
margin-left: auto;
}
<div class="month-box">
<div class="month-row category-toggle">
<div>Show me the money</div>
<div class="item-value">$100000000</div>
</div>
<div class="month-row category-toggle">
<div>Please don't take my cash</div>
<div class="item-value">-$100000000</div>
<div class="quick-adjust-row">
<div class="quick-adjust-label">$1000</div>
<div class="item-value">$99999000</div>
</div>
</div>
</div>
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 need a card list layout for this I use flex. in large device everything is ok but when device becomes small and two cards can't be next to each other and go to the next line, my content it's not center
in other words, I need to center my content in all device size and when two cards come together should be space-between and center
.container-card {
background-color: grey;
direction: rtl;
}
.container-holder {
background-color: gold;
width: calc(100% - 28px);
max-width: 1004px;
margin: auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.request-box {
width: 481px;
height: 417px;
border-radius: 15px;
border: solid 1px #adadad;
background-color: #ffffff;
margin-top: 15px;
margin-bottom: 15px;
margin: 15px 2px;
}
<div class="container-card">
<div class="container-holder">
<div class="request-box"></div>
<div class="request-box"></div>
<div class="request-box"></div>
</div>
</div>
Please check the example above in full-page and change the responsive size
Hope this is helpful for you all in center align and i`m not use any mediaquery same code work on small screens .
.container-card {
background-color: grey;
}
.container-holder {
background-color: #ffd700;
width: calc(100% - 28px);
max-width: 1004px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin: 0 auto;
text-align: center;
}
.request-box {
width: 481px;
height: 417px;
border-radius: 15px;
border: solid 1px #adadad;
background-color: #ffffff;
margin-top: 15px;
margin-bottom: 15px;
margin: 15px 2px;
}
<div class="container-card">
<div class="container-holder">
<div class="request-box"></div>
<div class="request-box"></div>
<div class="request-box"></div>
</div>
</div>
Use CSS grid for this:
.container-card {
background-color: grey;
direction: rtl;
}
.container-holder {
background-color: gold;
width: calc(100% - 28px);
max-width: 1004px;
margin: auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(481px, 1fr));
place-items: center;
grid-column-gap: 30px;
}
.request-box {
width: 481px;
height: 417px;
border-radius: 15px;
border: solid 1px #adadad;
background-color: #ffffff;
margin: 15px 0;
}
<div class="container-card">
<div class="container-holder">
<div class="request-box"></div>
<div class="request-box"></div>
<div class="request-box"></div>
</div>
</div>
to set the cards netx to each other in small devices you can use this media query:
#media(max-width: 400px){
.container-holder {
justify-content: space-around;
}
.request-box {
width: 45%;
}
}
test it . it works nicely!
I have a comment section where the user can enter comments, it automatically displays comments and the time the comment was entered.
I want author name to be to the left and date to the right and it should be responsive using flex-box
Here is jsfiddle:
https://jsfiddle.net/68vt3c7s/
Here is what I would like to have
Here is a snippet of what i have:
.comments-description {
display: flex;
flex-direction: row;
padding: 23px 0px;
border-bottom: 2px solid #EBEBEB;
}
.comments_details {
display: flex;
align-items: center;
justify-content: space-between;
flex-basis: 100%;
margin-top: 27px;
}
.comments_wrapper {
padding: 32px 21px;
}
.comments-photo img {
border-radius: 300px;
width: 80px;
height: 80px;
position: relative;
top: 37px;
}
<div class="comments-description">
<div class="comments-photo"><img alt="" src="https://randomuser.me/api/portraits/men/84.jpg"></div>
<div class="comments_wrapper">
<div class="comments_details">
<h1>Mike Ross</h1>
<span class="days">4 minutes ago</span>
</div>
<div class="comments_text">
<p>dingi
</p>
</div>
</div>
</div>
what do I need to change to get what I want ?
Add for .comments_wrapper the flex: auto; in order to align time to right
Means:
.comments_wrapper {
padding: 32px 21px;
flex: auto; /* here I added */
}
Hope this will help.
.comments_wrapper{
-webkit-box-flex:1;
-ms-flex-positive:1;
flex-grow:1;
}
comments_wrapper selector not taking rest of the place that's why you not seeing the effect. Try like following way:
.comments_wrapper {
padding: 32px 21px;
flex-grow: 1; /* Key Line */
}
You need to set the width of the .comments_wrapper
.comments-description {
display: flex;
flex-direction: row;
padding: 23px 0px;
border-bottom: 2px solid #EBEBEB;
}
.comments_details {
display: flex;
align-items: center;
justify-content: space-between;
flex-basis: 100%;
margin-top: 27px;
}
.comments_wrapper {
padding: 32px 21px;
width: 100%; /*add this*/
}
.comments-photo img {
border-radius: 300px;
width: 80px;
height: 80px;
position: relative;
top: 37px;
}
.days{
margin-left: auto;
}
Add flex: auto; to .comments_wrapper css
.comments_wrapper {
padding: 32px 21px;
flex: auto;
}
.comments-description {
display: flex;
flex-direction: row;
padding: 23px 0px;
border-bottom: 2px solid #EBEBEB;
}
.comments_details {
display: flex;
align-items: center;
justify-content: space-between;
flex-basis: 100%;
margin-top: 27px;
}
.comments_wrapper {
padding: 32px 21px;
flex: auto;
}
.comments-photo img {
border-radius: 300px;
width: 80px;
height: 80px;
position: relative;
top: 37px;
}
<div class="comments-description">
<div class="comments-photo"><img alt="" src="https://randomuser.me/api/portraits/men/84.jpg"></div>
<div class="comments_wrapper">
<div class="comments_details">
<h1>Mike Ross</h1>
<span class="days">4 minutes ago</span>
</div>
<div class="comments_text">
<p>dingi
</p>
</div>
</div>
</div>
This question already has answers here:
Can't get vertical scrollbar with justify-content: flex-end
(2 answers)
Closed 4 months ago.
I'm trying to "stack" divs on top of each other as new div boxes (.dialog-box) are added to the parent container (.dialog-container).
To stack the elements, I'm using the following on the parent:
display: flex;
flex-direction: column;
justify-content: flex-end;
I'd like to scroll that container for .dialog-boxs that are overflowing, yet with flex-box the overflow-y: scroll; is not scrolling.
Two boxes: (fill up container from bottom to top as expected):
Six boxes (expands outside the height of the container and should scroll):
SCSS:
.dialog-container {
border: 4px solid rgba(255, 255, 255, .4);
border-radius: 5px;
width: 300px;
height: 340px;
position: relative;
top: -50px;
margin: 0 auto;
overflow-y: scroll;
z-index: 5;
display: flex;
flex-direction: column;
justify-content: flex-end;
.dialog-box {
width: 90%;
background: $dialogBoxWhite;
margin-bottom: 20px;
border-radius: 8px;
border: 5px solid $dialogBoxGreenBorder;
color: $dialogBoxGreenFont;
text-align: center;
margin-left: 5px;
padding: 5px;
display: inline-block;
p {}
}
}
HTML:
<div class="dialog-container">
<div class="dialog-box"></div>
<div class="dialog-box"></div>
<div class="dialog-box"></div>
<div class="dialog-box"></div>
<div class="dialog-box"></div>
<div class="dialog-box"></div>
</div>
You simply remove the
justify-content: flex-end;
Two boxes: (fill up container from bottom to top as expected):
for this you add below code to your scss file :
display: flex;
flex-direction: column-reverse;
justify-content: flex-start;
.dialog-container {
border: 4px solid rgba(0, 0, 0, .4);
border-radius: 5px;
width: 300px;
height: 350px;
position: relative;
margin: 0 auto;
overflow-y: scroll;
z-index: 5;
display: flex;
flex-direction: column-reverse;
justify-content: flex-start;
}
.dialog-box {
width: 90%;
background:white;
margin-bottom: 20px;
border-radius: 8px;
border: 5px solid green;
color: green;
text-align: center;
margin-left: 5px;
padding: 3px;
display: inline-block;
}
<div class="dialog-container">
<div class="dialog-box">Box 1</div>
<div class="dialog-box">Box 2</div>
<div class="dialog-box">Box 3</div>
<div class="dialog-box">Box 4</div>
<div class="dialog-box">Box 5</div>
<div class="dialog-box">Box 6</div>
<div class="dialog-box">Box 7</div>
</div>
also show example in scroll-y working with flex-column
Try to change display: flex; to display: flex-box;
This will give you a scroll bar that actually scrolls. Additionally, your examples divs are all lacking closing tags.
https://jsfiddle.net/Lpw0726j/23/
<div class="dialog-container">
<div class="dialog-box">9</div>
<div class="dialog-box">8</div>
<div class="dialog-box">7</div>
<div class="dialog-box">6</div>
<div class="dialog-box">5</div>
<div class="dialog-box">4</div>
<div class="dialog-box">3</div>
<div class="dialog-box">2</div>
<div class="dialog-box">1</div>
</div>
.dialog-container {
border: 4px solid rgba(255, 255, 255, .4);
border-radius: 5px;
width: 300px;
height: 340px;
position: relative;
top: 50px;
margin: 0 auto;
z-index: 5;
display: flex-box;
flex-direction: column;
justify-content: flex-end;
overflow-y: auto;
background-color: teal;
.dialog-box {
width: 90%;
background: black;
margin-bottom: 20px;
border-radius: 8px;
border: 5px solid red;
color: green;
text-align: center;
margin-left: 5px;
padding: 5px;
display: inline-block;
p {}
}
}