Flex_Example_First_Element_Flex

by Julien Roche

HTML

<main class="flex">
  <section class="flex_child flex_child--flexible">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

.flex {
  background-color: white;
  display: flex;
  padding: 20px 20px 20px 20px;
}

.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;
}