Flex_Example_WrapReverse_Column

by Julien Roche

HTML

<main class="flex">
  <section class="flex_child">Element 1</section>
  <section class="flex_child">Element 2</section>
  <section class="flex_child">Element 3</section>
  <section class="flex_child">Element 4</section>
</main>

CSS

html, body {
  border: none;
  height: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  width: 100%;
}

.flex {
  background-color: white;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap-reverse;
  height: 100%;
  overflow: hidden;
  padding: 20px 20px 20px 20px;
}

.flex_child {
  flex: 1 0 auto;
  border: 1px solid black;
  font-weight: bolder;
  margin: 5px 5px 5px 5px;
  min-height: 150px;
  text-align: center;
}