Comparing and contrasting: Grid, Margin, Flex, Float

HTML & CSS
54

If I’m not mistaken I believe you were offered a flex solution many thousands of posts ago but ignored it in favour of margin.:slight_smile:

The flex solution doesn’t need the extra div rows in the middle and could be simplified.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrapc {
  position: relative;
  width: 266px;
  height: 174px;
  overflow: hidden;
  margin-top: 8px;
  background: red;
}
.wrapc .nav {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-content:space-between;
  flex-wrap:wrap;
}
.wrapc .nav a {
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  border: 3px solid #0059dd;
}

</style>

</head>

<body>
<div class="wrapc">
 <nav class="nav">
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a class="ap"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a class="cube" href="http://hi5.1980s.fm/played.html" target="_blank" title="Song History">
        <div class="left-background"></div>
        <div class="left-border"></div>
        <div class="middle-background"></div>
        <div class="right-border"></div>
        <div class="right-background"></div>
      </a>
 </nav>
</div>
</body>
</html>

I’ve only included the code for the boxes to show how they fit.

Of course as mentioned before a list would seem the best choice but if you are calling this a nav then you can use a nav as a wrapper instead of the div.

5 Likes