Questi codici sono stati usati nell'articolo Interessanti layout che puoi creare oggi grazie a FlexBox che puoi trovare qua: https://skillsandmore.org/flexbox-layout/

card-layout.css

.flex-container {
  display: flex; 
  flex-flow: column nowrap; /* scorciatoia flex-direction e flex-wrap */
  align-content: center; 
  height: auto;
}
.flex-item {
  flex: 0 0 auto; /* scorciatoia flex-grow flex-shrink flex-basis */
  width: 100%;  
  margin: .25em;
  padding: .5em;
}
@media screen and (min-width: 40.5em) {
  .flex-container {
    flex-flow: column wrap; /* attivo le colonne */
    height: 58em; 
  }
  .flex-item { width: 50%; /* 2 col */ }
}
@media screen and (min-width: 60.5em) {
  .flex-container { height: 43em; }
  .flex-item { width: 33.333%; /* 3 col */ }
}

index.html

<section class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
  <div class="flex-item">7</div>
  <div class="flex-item">8</div>
</section>

layout-bloccati-1.css

.layout-flex {
    display: flex;
    align-items: flex-end;
}

.layout-flex .small { order: -1; }

layout-bloccati-2.css

.layout-flex .stretch-title {
    flex: 1;
    margin-bottom: 4.5rem;
    border-bottom: 1px solid #ccc;
}

layout-bloccati.html

<div class="layout-flex">

  <h2 class="stretch-title">looks great from here to there</h2>
  <div class="stretch-photo small"><img src="img/flexbox_stretch_small.png" alt="mobile" /></div>
  <div class="stretch-photo big"><img src="img/flexbox_stretch_big.png" alt="desktop" /></div>

</div>

split-screen.css

.flex-split {
  flex-direction: row;
}
.flex-split > div {
  justify-content: center;
  text-align: center;
  width: 50%;
}