2021-02-08 Float/Flex Playground

by Ttt Yyy

HTML

<div class="flex row">
  <img src="https://img.pokemondb.net/sprites/omega-ruby-alpha-sapphire/dex/normal/suicune.png">
  <span>Suicune - flex.</span>
</div>

<div class="float clearfix row">
  <img src="https://img.pokemondb.net/sprites/omega-ruby-alpha-sapphire/dex/normal/entei.png">
  <span>Entei - float w/clearfix </span>
</div>

<div class="float row">
  <img src="https://img.pokemondb.net/sprites/omega-ruby-alpha-sapphire/dex/normal/raikou.png">
  <span>Raikou - float no clearfix</span>
</div>

CSS

/* .container {
  display: flex;
  flex-direction: column;
} */
.row {
  border: 1px solid black;
}

.float {
  
}

.float img {
  float: left;
  /* float: right; */
}

.clearfix {
  overflow: auto;
}

.flex {
  align-items: center;
  display: flex;
}