Flex_Example_Orientation_Column

by Julien Roche

HTML

<body class="flex">
  <section class="flex_child flex_child--flexible">Element 1</section>
  <section class="flex_child flex_child--flexible--two">Element 2</section>
  <section class="flex_child">Element 3</section>
  <section class="flex_child">Element 4</section>
</body>

CSS

html, body {
  border: 0px solid black;
  height: 100%;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  width: 100%;
}

.flex {
  background-color: white;
  display: flex;
  flex-direction: column;
}

.flex_child {
  border: 1px solid black;
  font-weight: bolder;
  margin: 5px 5px 5px 5px;
  padding: 5px 5px 5px 5px;
  text-align: center;
}

.flex_child--flexible {
  flex: 1;
}

.flex_child--flexible--two {
  flex: 2;
}