This question already has an answer here:
I have four HTML elements displayed on a single line using CSS flexbox (codepen here). At a certain screen width (e.g. 800 px), I would like to ensure the first element displays on one line, while the remaining three elements wrap to the next line (as in this screenshot). Can I accomplish that with a CSS media query and/or additional HTML? If so, what is the proper way of doing so? My existing code is below:
HTML
<div class="cart-cb">
<div>Continue Browsing</div>
<button>Property For Sale</button>
<button>Land For Sale</button>
<button>Villa Rentals</button>
</div>
CSS
.cart-cb {
display:flex;
justify-content: flex-end;
width: 100%
}
You could change its initial width with the flex-basis: 100%
to occupy the whole row when the break happens:
.cart-cb {
display: flex;
justify-content: flex-end;
flex-wrap: wrap; /* enables wrapping */
/*width: 100%; by default*/
}
@media screen and (max-width: 800px) {
.cart-cb > div:first-child {
flex-basis: 100%;
text-align: right;
}
}
<div class="cart-cb">
<div>Continue Browsing</div>
<button>Property For Sale</button>
<button>Land For Sale</button>
<button>Villa Rentals</button>
</div>
Use the media query to apply flex-wrap:wrap
on the flex container and flex:0 0 100%
on the first child.
This way you don't need additional HTML markup, and no need to change anything on your code but the media query.
@media (max-width: 800px) {
.cart-cb{
flex-wrap:wrap;
}
.cart-cb div{
flex: 0 0 100%;
text-align:right;
}
}
https://jsfiddle.net/378b4yLy/
You could wrap the buttons in a container - that will keep them grouped together when the line wraps.
Also include flex-wrap
property...
.cart-cb {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
width: 100%;
}
/* at 800px screen width force wrap */
@media (max-width: 800px) {
.buttons {
width: 100%;
text-align: right;
}
}
<div class="cart-cb">
<div>
Continue Browsing
</div>
<div class="buttons">
<button>Property For Sale</button>
<button>Land For Sale</button>
<button>Villa Rentals</button>
</div>
</div>
Try this code Check Demo https://jsfiddle.net/JentiDabhi/s48r3ere/
HTML
<div class="cart-cb">
<div class="label-div">
Continue Browsing
</div>
<button>Property For Sale</button>
<button>Land For Sale</button>
<button>Villa Rentals</button>
</div>
CSS
.cart-cb {
display: flex;
justify-content: flex-end;
width: auto;
flex-wrap: wrap;
float: right;
}
div.label-div {
display: block;
flex: 100%;
}
.cart-cb button{
flex: auto;
}
Firebase Cloud Functions: PubSub, "res.on is not a function"
TypeError: Cannot read properties of undefined (reading 'createMessageComponentCollector')
When i am running project in localhost it is working fine, while running in my server i am getting following error
I have 5 addons / extensions for FF, Chrome, IE, Opera and Safari
How to make multiple navbar-header for multiple navbar-collapseWhen click navbar-header #1, show first navbar-collapse, then when I click navbar-header #2, show next navbar-collapse
I have been thinking for a long time, but I have not found a solutionSome mobile sites have a hover-like clicking feeling when they click on links and buttons