This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 4 years ago.
When using flexbox, sometimes, like in the example below, when the viewport is not wide enough to contain the content, the flexbox items get higher width than the container.
When and why does this happen?
How can I limit the items to never be wider than the container?
Code:
.container {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.item-1 {
flex: 1 1;
background-color: yellow;
}
.item-2 {
flex: 1 0 100%;
background-color: green;
}
<div class="container">
<div class="item item-1">
item1item11item111item1111item11111item111111item1111111item11111111item111111111item1111111111
</div>
<div class="item item-2">
item2item22item222item2222item22222item222222item2222222
</div>
</div>
Here is a code pen:
https://codepen.io/anon/pen/MqdaoB
try to give some space between character or give word-break to .item
.item {
word-break: break-word;
}
https://codepen.io/anon/pen/YObyjq
Related
This question already has answers here:
Targeting flex items on the last or specific row
(10 answers)
Closed 1 year ago.
I have a flex container like this:
.container {
display: flex;
flex-flow: row wrap;
justify-content: start;
width: 100%;
}
.item {
border: 1px solid red;
flex: 1 1 33%;
height: 100px;
}
<div class="container">
<div class="item">#1</div>
<div class="item">#2</div>
<div class="item">#3</div>
<div class="item">#4</div>
<div class="item">#5</div>
</div>
The container holds more or less divs in a row depending on the size of the screen, so I chose to use the flex shorthand with flex-grow: 1 for smooth size changes.
My problem is that I want #4 and #5 to have the same width as #1, #2 and #3 instead of taking up the whole space.
Set flex grow to 0 and basis to 33.33%
flex: 0 1 33.33%;
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 2 years ago.
I have a flexbox container row and there are three items inside. I want one of them to be in the very center but I want the other two 2 to be slightly over it and to the most left and to the most right respectively. I want something like this:
I tried with aligning and justify content but it did not work.
Thanks in advance.
Here is an illustration of what you want. Just give the middle element a margin-top:
.container {
display: flex;
justify-content: space-between;
}
.container div {
width: 50px;
height: 100px;
background-color: red;
}
.center {
margin-top: 50px;
}
<div class="container">
<div class="right"></div>
<div class="center"></div>
<div class="left"></div>
</div>
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 3 years ago.
I want to have a max 1100px div with spacebetween items but if i center .menu, space between isnt work...
What i can do? (or margin auto?)
.navbar {
display: flex;
justify-content: center;
}
.menu {
max-width: 1100px;
background: red;
display: flex;
justify-content: space-between;
}
<div class="navbar">
<div class="menu">
<img src="https://www.colacao.es/img/logo.png" width="56px" height="50px">
<div>
Services
Pricing
Blog
Contacts
</div>
Log In
</div>
</div>
Since .menu is a block-level element, it is naturally going to take up the maximum width of the row (100%). Therefore, you can set max-width on the element, to limit this behavior and stop at 1100px, or 100%, whichever comes first. As Temani mentioned above, you can center the enter element using margin: auto. I wrote out the margins longhand, since you are concerned with adding auto to only the left and right margins (no need to set top and bottom).
.menu {
display: flex;
max-width: 1100px;
background: red;
display: flex;
justify-content: space-between;
margin-left: auto;
margin-right: auto;
}
<div class="navbar">
<div class="menu">
<img src="https://www.colacao.es/img/logo.png" width="56px" height="50px">
<div>
Services
Pricing
Blog
Contacts
</div>
Log In
</div>
</div>
This question already has answers here:
How to disable equal height columns in Flexbox?
(4 answers)
What are the differences between flex-basis and width?
(6 answers)
Closed 4 years ago.
Given the following code:
.outer-container {
display: flex;
justify-content: space-evenly;
}
.left-container {
height: 300px;
}
.right-container {
flex: 0 1 auto;
}
<div class='outer-container'>
<div class='left-container'>Lefto</div>
<div class='right-container'>Righto</div>
</div>
The right container will grow to be 300px high, despite the flex-grow property being set to 0. How do I prevent this from happening? I.E., I want the right container to only be as tall as its content.
Codepen: https://codepen.io/MaxMillington2/pen/PxOwxo
Add align-self: flex-start on the .right-container
.outer-container {
display: flex;
justify-content: space-evenly;
}
.left-container {
height: 300px;
border: 1px solid blue;
}
.right-container {
align-self: flex-start;
border: 1px solid red;
}
<div class='outer-container'>
<div class='left-container'>Lefto</div>
<div class='right-container'>Righto</div>
</div>
Note: flex-grow, flex-shrink and flex-basis are for controlling how the space is filled along the main axis. In this case, the main axis is left-right because the flex-direction is set to row by default.
The align-items property will align the items on the cross axis. The initial value for this property is stretch and this is why flex items stretch to the height of the tallest one by default.
MDN - Concepts of Flexbox
That is why you need to override either align-items on your .outer-container or align-self to the flex children.
This question already has answers here:
How to exclude the first item in a flexbox wrap?
(1 answer)
How to specify an element after which to wrap in css flexbox? [duplicate]
(5 answers)
Force flex item to span full row width
(2 answers)
Closed 5 years ago.
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%
}
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 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>
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;
}