vertical and horizontal stretch items with flexbox - html

Question

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:

Answer 1

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