Rows

align-self: auto (default)

based on working parent item like align-items: stretch;

CSS

.container {
  display: flex;
  align-items: stretch
}

.box-1 {
  align-self: auto; // based on maintain align-items: stretch;
}

Box-1

Box-2

Box-3

Box-4

Box-5

align-self: flex-start

CSS

.container {
  display: flex;
  align-items: stretch
}

.box-1 {
  align-self: auto; // based on maintain align-items: stretch;
}

.box-2 {
  align-self: flex-start;
}

Box-1

Box-2

Box-3

Box-4

Box-5

align-self: flex-end

CSS

.container {
  display: flex;
  align-items: stretch
}

.box-1 {
  align-self: auto; // based on maintain align-items: stretch;
}

.box-2 {
  align-self: flex-start;
}

.box-3 {
  align-self: flex-end;
}

Box-1

Box-2

Box-3

Box-4

Box-5

align-self: center

CSS

.container {
  display: flex;
  align-items: stretch
}

.box-1 {
  align-self: auto; // based on maintain align-items: stretch;
}

.box-2 {
  align-self: flex-start;
}

.box-3 {
  align-self: flex-end;
}

.box-4 {
  align-self: center;
}

Box-1

Box-2

Box-3

Box-4

Box-5

align-self: stretch

CSS

.container {
  display: flex;
  align-items: stretch
}

.box-1 {
  align-self: auto; // based on maintain align-items: stretch;
}

.box-2 {
  align-self: flex-start;
}

.box-3 {
  align-self: flex-end;
}

.box-4 {
  align-self: center;
}

.box-5 {
  align-self: stretch; // BY DEFAULT, set align-items is stretch, so no change in this
}

Box-1

Box-2

Box-3

Box-4

Box-5

CSS

.container {
  display: flex;
  align-items: center   // change to center
}

.box-1 {
  align-self: auto; // based on maintain align-items: center;
}

.box-2 {
  align-self: flex-start;
}

.box-3 {
  align-self: flex-end;
}

.box-4 {
  align-self: center;
}

.box-5 {
  align-self: stretch; // no see the first box and last box. first box is center because set auto so taking align-items: center and last-box is stretch
}

Box-1

Box-2

Box-3

Box-4

Box-5

Columns

align-self: auto (default)

based on working parent item like align-items: stretch;

CSS

.container {
  display: flex;
  flex-direction: column;
  align-items: stretch
}

.box-1 {
  align-self: auto; // based on maintain align-items: stretch;
}

Box-1

Box-2

Box-3

Box-4

Box-5

align-self: flex-start

CSS

.container {
  display: flex;
  flex-direction: column;
  align-items: stretch
}

.box-1 {
  align-self: auto; // based on maintain align-items: stretch;
}

.box-2 {
  align-self: flex-start;
}

Box-1

Box-2

Box-3

Box-4

Box-5

align-self: flex-end

CSS

.container {
  display: flex;
  flex-direction: column;
  align-items: stretch
}

.box-1 {
  align-self: auto; // based on maintain align-items: stretch;
}

.box-2 {
  align-self: flex-start;
}

.box-3 {
  align-self: flex-end;
}

Box-1

Box-2

Box-3

Box-4

Box-5

align-self: center

CSS

.container {
  display: flex;
  flex-direction: column;
  align-items: stretch
}

.box-1 {
  align-self: auto; // based on maintain align-items: stretch;
}

.box-2 {
  align-self: flex-start;
}

.box-3 {
  align-self: flex-end;
}

.box-4 {
  align-self: center;
}

Box-1

Box-2

Box-3

Box-4

Box-5

align-self: stretch

CSS

.container {
  display: flex;
  flex-direction: column;
  align-items: stretch
}

.box-1 {
  align-self: auto; // based on maintain align-items: stretch;
}

.box-2 {
  align-self: flex-start;
}

.box-3 {
  align-self: flex-end;
}

.box-4 {
  align-self: center;
}

.box-5 {
  align-self: stretch; // BY DEFAULT, set align-items is stretch, so no change in this
}

Box-1

Box-2

Box-3

Box-4

Box-5

CSS

.container {
  display: flex;
  flex-direction: column;
  align-items: center   // change to center
}

.box-1 {
  align-self: auto; // based on maintain align-items: center;
}

.box-2 {
  align-self: flex-start;
}

.box-3 {
  align-self: flex-end;
}

.box-4 {
  align-self: center;
}

.box-5 {
  align-self: stretch; // no see the first box and last box. first box is center because set auto so taking align-items: center and last-box is stretch
}

Box-1

Box-2

Box-3

Box-4

Box-5