Replacing float with flex. grid code

How would I replace this float with flex?
https://jsfiddle.net/198muLhx/6/

.wrape .nav li {
  margin: 0;
  padding: 0;
  float: left;
  background: blue;
}

.wrape .nav li a {
  display: flex;
  width: 50px;
  height: 50px;
  margin: 0 4px 12px 0;
  color: transparent;
  background: rgba(0, 0, 0, 0.2);
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

Update ******

Like this?
https://jsfiddle.net/qr031fyw/3/


.wrape {
  position: relative;
  width: 266px;
  overflow: hidden;
  margin: 45px 0 0 0;
  border-radius: 25px;
  background-position: 0 -168px;
  background-size: 100% 196.557%;
}

.wrape .nav {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

.wrape .nav li {
  margin: 0;
  padding: 0;
}

.wrape .nav li a {
  display: flex;
  width: 50px;
  height: 50px;
  margin: 0 4px 12px 0;
  color: transparent;
  background: rgba(0, 0, 0, 0.2);
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

And this would be grid.
https://jsfiddle.net/vbs3f6mw/2/

.wrape {
  position: relative;
  width: 266px;
  overflow: hidden;
  margin: 45px 0 0 0;
  border-radius: 25px;
  background-position: 0 -168px;
  background-size: 100% 196.557%;
}

.wrape .nav {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.wrape .nav li {
  margin: 0;
  padding: 0;
  background: blue;
}

.wrape .nav li a {
  display: grid;
  width: 50px;
  height: 50px;
  margin: 0 4px 12px 0;
  color: transparent;
  background: rgba(0, 0, 0, 0.2);
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

Yes that’s about it although you could replace all the margins and use flexbox to align them using space-between.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
.wrape {
  position: relative;
  overflow:hidden;
  width: 266px;
  margin: 45px 0 0 0;
  border-radius: 25px;
  background-position: 0 -168px;
  background-size: 100% 196.557%;
  background-color: blue;
}

.wrape .nav {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
  align-content:space-between;
  min-height:174px;
}

.wrape .nav li {
  margin: 0;
  padding: 0;
}

.wrape .nav li a {
  display: flex;
  width: 50px;
  height: 50px;
  color: transparent;
  background: rgba(0, 0, 0, 0.2);
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrape .nav li a:hover {
  border: 3px solid #5c91dd;
}

.wrape .nav li:nth-of-type(n+11) a {
}

.wrape .nav li:nth-of-type(5n) a {
  margin-right: 0;
}

.wrape .nav li:nth-of-type(8) a {
  opacity: 0;
  border: none;
  background: none;
}

.wrape .nav li:nth-of-type(1) a { border-top-left-radius: 25px;}
.wrape .nav li:nth-of-type(5) a { border-top-right-radius: 25px;}
.wrape .nav li:nth-of-type(7) a { background: rgba(170, 0, 255, 0.5);}
.wrape .nav li:nth-of-type(9) a { background: rgba(29, 161, 242, 0.5);}
.wrape .nav li:nth-of-type(10) a {background: rgba(170, 255, 0, 0.5);}
.wrape .nav li:nth-of-type(11) a {border-bottom-left-radius: 25px;  background: rgba(255, 170, 0, 0.5);}
.wrape .nav li:nth-of-type(12) a {background: rgba(255, 0, 170, 0.5);}
.wrape .nav li:nth-of-type(13) a {background: rgba(44, 117, 255, 0.5);}
.wrape .nav li:nth-of-type(14) a { background: rgba(224, 17, 95, 0.5);}
.wrape .nav li:nth-of-type(15) a {border-bottom-right-radius: 25px;background: rgba(243, 243, 21, 0.5);}

.wrape .playButton {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0.7);
  cursor: pointer;
  fill: #e0115f;
}

.wrape .play,
.wrape .pause {
  position: absolute;
  top: 0;
  left: 6px;
  bottom: 0;
  right: 0;
  margin: auto;
}

.wrape .pause {
  left: 0;
}

.wrapf {
  position: relative;
  cursor: pointer;
  margin: 45px 0 0 0;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/K7OzsxI.png") no-repeat 0 0;
  background-size: cover;
}

.wrapf svg {
  vertical-align: top;
}

.wrapf .lines::before,
.wrapf .lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 83px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.wrapf .lines::after {
  left: 174px;
}

.wrapf .stack {
  position: relative;
  stroke-width: 6px;
  stroke: #89cff0;
}

.wrapf .play,
.wrapf .pause {
  position: absolute;
  top: -2px;
  left: 14px;
  bottom: 0;
  right: 0;
  margin: auto;
  fill: #f3f315;
}

.wrapf .pause {
  left: 10px;
}

a:focus {
  outline: 0;
}

.hide {
  display: none;
}


</style>
</head>

<body>
<div class="wrape">
  <ul class="nav">
    <li><a href="http://www.reuters.tv/" target="_blank" title="Reuters TV"></a></li>
    <li><a href="https://www.youtube.com/user/NewsyHub/videos" target="_blank" title="Newsy"></a></li>
    <li><a href="https://www.youtube.com/user/voxdotcom/videos" target="_blank" title="Vox"></a></li>
    <li><a href="" target="_blank" title="Google Documents"></a></li>
    <li><a href="" target="_blank" title="Radio Gadget"></a></li>
    <li><a href="" target="_blank" title=""></a></li>
    <li><a href="http://hi5.1980s.fm/played.html" target="_blank" title="1980s.fm: Last Played"></a></li>
    <li><a> Audio Player</a></li>
    <li><a href="http://213.239.206.179:8488/played.html?sid=1" target="_blank" title="Blu Blu Lounge: Last Played "></a></li>
    <li><a href="https://www.radiobells.com/playlist/svoefm/" target="_blank" title="СВОЕFM: Last Played"></a></li>
    <li><a href="https://www.radiobells.com/playlist/soundparkdeep/" target="_blank" title="SOUNDPARK DEEP: Last Played"></a></li>
    <li><a href="http://s5.onweb.gr:8488/played.html" target="_blank" title="Cavo Paradiso: Last Played"></a></li>
    <li><a href="https://onlineradiobox.com/us/retrohitmix/playlist/?cs=us.retrohitmix" target="_blank" title="Retro Hit Mix: Last Played"></a></li>
    <li><a href="https://www.radiobells.com/playlist/rockfm90/" target="_blank" title="ROCK FM 90s: Last Played"></a></li>
    <li>
      <a href="http://46.105.118.14:15500/played.html" target="_blank" title="BeMy80s: Last Played"></a>
    </li>
  </ul>
  <div class="playButton" data-audio="http://jfm1.hostingradio.ru:14536/rock90.mp3">
    <svg class="play" width="38" height="40" viewbox="0 0 85 100">
      <title>Play</title>
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z" />
    </svg>
    <svg class="pause hide" width="36" height="40" viewbox="0 0 60 100">
      <title>Pause</title>
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z" />
    </svg>
  </div>
</div>

</body>
</html>

Both methods are ok but space-between takes care of the space for you. It’s no better or worse just a different way and saves a little code.

The same setup would work with grid also.
https://jsfiddle.net/c1xs74qf/7/

  display: grid;
  grid-template-columns: repeat(5, 1fr);
  justify-content:space-between;
  align-content:space-between;
  min-height:174px;
1 Like

Updated***

This can be removed for the grid code.

justify-content:space-between;
https://jsfiddle.net/c1xs74qf/11/

.wrape .nav {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* justify-content:space-between; */
  align-content: space-between;
  min-height: 174px;
}
1 Like

This code uses Grid, am I able to get it working without this margin?
The flex code has it removed.

https://jsfiddle.net/zufjqtc3/5/

.wrape .nav li:nth-of-type(n+11) a {
  /*margin: 0 4px 0 0; */
}

https://jsfiddle.net/zufjqtc3/4/

.wrape .nav li:nth-of-type(n+11) a {
 margin: 0 4px 0 0;
}

Fixed.

Added
grid-gap: 4px;

https://jsfiddle.net/nf04ju2r/

.wrape .nav {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-gap: 4px;
  grid-template-columns: repeat(5, 1fr);
  /* justify-content:space-between; */
  align-content: space-between;
  min-height: 174px;
}

What’s the reason why this property doesn’t work?

Isn’t it supposed to work inside grid?

justify-content:space-between;
https://jsfiddle.net/2eks0hrx/2/

.wrape .nav {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  justify-content:space-between; 
  align-content: space-between;
  min-height: 174px;
}

Here it works fine with flex.
https://jsfiddle.net/tpyd894j/

.wrape .nav {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
  min-height: 174px;
}

It does work see your other thread that I just replied to for an example.

The reason it doesn’t appear to work is that the list elements are set to 5 across and take up 1fr each which means there is no gap to justify.

Your anchor elements are inside those list items and just sit in the grid and not specifically affected by grid rules.

I see.
https://jsfiddle.net/c5zsj0L4/1/

.wrape .nav {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, auto));
  justify-content: space-between;
  align-content: space-between;
  min-height: 174px;
}
1 Like