vertical and horizontal stretch items with flexbox-CodePudding

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 >
  <button>Brightness</button>
  <button>Contrast</button>
  <button>Grayscale</button>
  <button>Saturate</button>
  <button>Sepia</button>
  <button>Invert</button>
</div>

my output:

my purpose:

CodePudding user response：

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