Flex_Example_JustifyContent_Row_Flex_Start

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

.flex {
  background-color: lightgrey;
  display: flex;
  justify-content: flex-start;
  overflow: hidden;
  padding: 20px 20px 20px 20px;
}

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