This question already has answers here:
Why does percentage padding break my flex item?
(1 answer)
Parent is inline-block and child has % padding = strange behaviour
(3 answers)
Closed last month.
I have this problem where my Flexbox does not expand if i add a margin or padding to the content(in this case the buttons)
I dont want to set a fixed width of the second flex-item because i loose responsiveness if i do so, is there any way i can accomplish it without?
.flex-container {
background-color:blue;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
align-items: center;
align-content: stretch;
}
.flex-items:nth-child(1) {
display: block;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
align-self: auto;
order: 0;
}
.flex-items:nth-child(2) {
display: block;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
align-self: auto;
order: 0;
}
button {
background-color: brown;
font-size: 1.3rem;
color: rgb(223, 223, 223);
border: none;
margin: 0 5%;
}
<div class="flex-container">
<h1 class="flex-items">test Header</h1>
<div class="flex-items">
<button>test</button>
<button>test</button>
<button>test</button>
</div>
</div>
Related
stretch items using flex follow this context:
flex-direction: row; & align-items: stretch; ==> vertical stretch
flex-direction: column; & align-items: stretch; ==> horizontal stretch
my problem:
i have direction is row ,but i want vertical and horizontal stretch to appear like columns. symmetrical
.inner {
display: flex;
align-items: stretch;
flex-wrap: wrap;
}
.inner button {
display: flex;
align-items: center;
background-color: #E3F2FD;
color: #304FFE;
border: 1px solid #304FFE;
padding-block: 5px;
padding-inline: 6px;
border-radius: 4px;
margin-block: 2px;
margin-inline: 10px;
}
<div class="inner">
<button>Brightness</button>
<button>Contrast</button>
<button>Grayscale</button>
<button>Saturate</button>
<button>Sepia</button>
<button>Invert</button>
</div>
my output:
my purpose:
add flex: 1; to the <button> html element.
like so:
.inner button {
flex: 1;
/* other code */
}
this means if there is some space left,
CSS flexbox tries to take all the space it can have.
also flex: 1 is a shorthand that can be also:
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
like he said #G-Cyrillus it can break your code:
so put it inside a #media so only mobile versions have this behaviur
details:
https://developer.mozilla.org/en-US/docs/Web/CSS/flex?retiredLocale=it
I got this code working on Chrome where the content of first flex-item needs to be aligned to the bottom and stretches if necessary:
body {
height:100vh;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
.flex-container {
padding: 0;
margin: 0;
height: 100%;
display: flex;
flex-direction: column;
}
.flex-item {
background: tomato;
padding: 10px;
border: 5px solid red;
flex: 0 1 auto;
}
.flex-stretch {
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
flex: 1 1 auto;
}
<div class="flex-container">
<div class="flex-item flex-stretch">1</div>
<div class="flex-item">2<br>2<br>2<br>2<br>2<br>2<br>2<br>2</div>
<div class="flex-item">3</div>
</div>
but on Safari it doesn't respect the content of the first flex-item and collapses if the viewport is smaller than the flex-container and scrolling is necessary.
Is there any work around this issue?
Thanks, this is my first question here :)
Here is the codePen: https://codepen.io/felphos/pen/GRZVKwY
Since you use flexbox you shouldn't define the height explicitly. I think that removing height: "100%" and also setting .flex-stretch{flex: 1 0 auto;} (0 flex-shrink) will get you what you want.
I want to place the items in the flexbox take the same width.
Within the flexbox I have a searchsvg, input field and div with some text. I want each of them to take equal width themselves based on the width of the flexbox. I don't want to provide the width of each item manually. I tried using justify-content: space-evenly. In doing so, the input field takes more width than rest of them.
How can I avoid it? Below is the code:
.wrapper {
display: flex;
flex-grow: 1;
}
.items_container {
position: relative;
width: 40px;
height: 40px;
top: 16px;
margin-left: 16px;
padding-left: 5px;
display: flex;
align-items: center;
justify-content: space-evenly;
}
#media (min-width: 300px) {
.items_container.expanded {
width: 50%;
}
}
.items_container.expanded .search_input_field {
display: flex;
align-items: center;
}
<div class="wrapper">
<div class="items_container expanded">
<div class="search_input_field">
<div>
<Svgsearch/>
</div>
<input type="text" placeholder="input" />
</div>
<div>dropdown to be added</div>
</div>
.child elements should grow equally and not shrink
.parent {
display: flex;
}
.child {
flex: 1 0 0;
}
/* ignore */
.child {
padding: 5px;
height: 50px;
background: lightcoral;
margin: 2px;
text-align: center;
}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
I moved flex-grow: 1 from where you placed it, because it wasn't doing anything. This is a rule that affects flex children. Therefore, I moved it to affect all direct children of the flex parent, .wrapper.
.wrapper {
display: flex;
/* flex-grow: 1; <-- moved below */
& > * {
flex-grow: 1;
}
}
jsFiddle
For some reason, a div whose parent has a display: flex property is having a height of 228px even though there's no content inside of it.
Image example
.sights-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex: 1;
background-color: #ffffff;
}
.sights-list div {
flex-basis: 48%;
flex-shrink: 0;
display: flex;
padding: 10px;
}
<div class='sights-list'>
<div>
</div>
<div>
</div>
</div>
you can use
{
min-height: 100%;
}
This question already has an answer here:
Remove space (gaps) between multiple lines of flex items when they wrap
(1 answer)
Closed 6 years ago.
html, body {
height: 100%;
}
.flex{
min-height: 100%;
display: flex;
justify-content:center;
flex-flow: row wrap;
align-items: center;
background: red;
}
.coloring {
background:#CCC;
border-radius:7px;
padding: 20px;
margin: 0px;
}
.Projects{
order: 1;
flex: 0 1 100%;
}
.Tribute{
order: 2;
flex: 1 1;
}
.Portfolio{
order: 3;
flex: 1 1;
}
<section class="flex">
<div class="coloring Projects">Projects</div>
<div class="coloring Tribute">Tribute</div>
<div class="coloring Portfolio">Portfolio</div>
</section>
When you narrow the screen there is going to be 3 rows and now there are 2 such huge unwanted margins. I don’t know what to do. If I eliminate align-items: center the boxes will fill the entire page, but that is not what I want.
Aligning between multiple flex lines is handled by the align-content property - try align-content: center to eliminate the margins - see demo below:
html,
body {
height: 100%;
}
.flex {
min-height: 100%;
display: flex;
justify-content: center;
flex-flow: row wrap;
align-items: center;
align-content: center;
background: red;
}
.coloring {
background: #CCC;
border-radius: 7px;
padding: 20px;
margin: 0px;
}
.Projects {
order: 1;
flex: 0 1 100%;
}
.Tribute {
order: 2;
flex: 1 1;
}
.Portfolio {
order: 3;
flex: 1 1;
}
<section class="flex">
<div class="coloring Projects">Projects</div>
<div class="coloring Tribute">Tribute</div>
<div class="coloring Portfolio">Portfolio</div>
</section>
only you have to remove
min-height from .flex class