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>
Related
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>
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 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>
I want to use flexbox to make a column that can scroll as its text content gets longer.
I drew a picture in keynote to make a better explanation.
when texts are small
when texts get big
Here is my current code, just every elements in my code is in flexboxes.
I edited my script to include .app .sidebar
.app {
display: flex;
height: 100vh;
flex-direction: row;
}
.sidebar {
display:flex;
flex: 1;
}
.cv {
display: flex;
flex:5;
flex-direction: column;
margin:20px;
border: 1px solid lightgrey;
border-radius: 10px;
background-color: white;
overflow: scroll;
}
.header {
display: flex;
flex: 0 0 150px;
justify-content: center;
align-items: center;
font-size: 20px;
}
.section {
display: flex;
flex-direction: column;
border: 1px solid lightgrey;
margin: 10px;
border-radius: 10px;
}
.sectionHeader{
display: flex;
align-items: center;
font-size: 18px;
padding-left: 20px;
padding-top: 15px;
padding-bottom: 5px;
flex: 0 0 30px;
background-color: gray;
color:white;
font-weight: 700;
}
.sectionBody{
display: flex;
flex: 1;
padding: 20px;
}
<div class="app">
<div class="sidebar"></div>
<div class="cv">
<div class="header">Header</div>
<div class="section">
<div class="sectionHeader">Section Header</div>
<div class="sectionBody">LONG TEXT</div>
</div>
<div class="section">
<div class="sectionHeader">Section Header</div>
<div class="sectionBody">LONG TEXT</div>
</div>
</div>
</div>
You need to do 2 things:
Give the cv a min-height: 0; (fix for i.a. Firefox)
Add flex-shrink: 0 to the .section so it won't collapse when not fit
Stack snippet
body {
margin: 0;
}
.app {
display: flex;
height: 100vh;
}
.sidebar {
display: flex;
flex: 1;
background: red;
}
.cv {
display: flex;
flex: 5;
flex-direction: column;
margin: 20px;
border: 1px solid lightgrey;
border-radius: 10px;
background-color: white;
overflow: scroll;
min-height: 0; /* added */
}
.header {
display: flex;
flex: 0 0 150px;
justify-content: center;
align-items: center;
font-size: 20px;
}
.section {
display: flex;
flex-direction: column;
border: 1px solid lightgrey;
margin: 10px;
border-radius: 10px;
flex-shrink: 0; /* added */
}
.sectionHeader {
display: flex;
align-items: center;
font-size: 18px;
padding-left: 20px;
padding-top: 15px;
padding-bottom: 5px;
flex: 0 0 30px;
background-color: gray;
color: white;
font-weight: 700;
}
.sectionBody {
display: flex;
flex: 1;
padding: 20px;
}
<div class="app">
<div class="sidebar">sidebar</div>
<div class="cv">
<div class="header">Header</div>
<div class="section">
<div class="sectionHeader">Section Header</div>
<div class="sectionBody">LONG TEXT</div>
</div>
<div class="section">
<div class="sectionHeader">Section Header</div>
<div class="sectionBody">LONG TEXT</div>
</div>
</div>
</div>
If you have multiple containers with 1px border, all containers next to each other generate a 2px border. So in order to get rid of that you always set e.g. border-right: none; and then add border-right: 1px; to the last child to make all containers have 1px border in all sides.
But if you use flexbox flex-basis rule to break containers into next line, it breaks whole border-right idea, the last container in the line before the break always stays left out with no border.
e.g. in this example I have 5 containers, but I want 4 per line and when it breaks into new line, you can see the border-right issue:
.wrapper {
display: flex;
flex-wrap: wrap;
width: 400px;
}
.container {
flex-basis: 20%;
border: 1px solid #000;
border-right: none;
margin-bottom: 1px;
min-height: 100px;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.container:last-child {
border-right: 1px solid #000;
}
<div class="wrapper">
<div class="container">1</div>
<div class="container">2</div>
<div class="container">3</div>
<div class="container">4</div>
<div class="container">5</div>
</div>
https://jsfiddle.net/45kngj9p/
Since you know how many flex items there are in each row, you can use the :nth-child() selector to apply borders to items missed by the main rule.
.wrapper {
display: flex;
flex-wrap: wrap;
width: 400px;
}
.container {
flex-basis: 20%;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
margin-bottom: 1px;
min-height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.container:nth-child(4n + 1) { /* add border to first child in each row */
border-left: 1px solid red;
}
<div class="wrapper">
<div class="container">1</div>
<div class="container">2</div>
<div class="container">3</div>
<div class="container">4</div>
<div class="container">5</div>
</div>
<hr>
<div class="wrapper">
<div class="container">1</div>
<div class="container">2</div>
<div class="container">3</div>
</div>
<hr>
<div class="wrapper">
<div class="container">1</div>
<div class="container">2</div>
<div class="container">3</div>
<div class="container">4</div>
<div class="container">5</div>
<div class="container">6</div>
<div class="container">7</div>
<div class="container">8</div>
<div class="container">9</div>
<div class="container">10</div>
</div>
Remove Border:none; and add margin-left:-1px;
.container {
flex-basis: 20%;
border: 1px solid #000;
margin-left:-1px;
margin-bottom: 1px;
min-height: 100px;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
}
That's it!
You can try these solutions:
1
Here you don't need the .container:last-child styles.
.container {
flex-basis: 20%;
border: 1px solid #000;
margin-bottom: 1px;
margin-right: -1px;
min-height: 100px;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
}
2
This one works for boxes number 4, 8, 12, etc.
.container {
flex-basis: 20%;
border: 1px solid #000;
border-right: none;
margin-bottom: 1px;
min-height: 100px;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.container:last-child,
.container:nth-child(4n) {
border-right: 1px solid #000;
}