Replacing float with flex. grid code

asasass · August 12, 2019, 3:16am

How would I replace this float with flex?

.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?


.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;
}

PaulOB · August 12, 2019, 4:20pm

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.

asasass · August 12, 2019, 4:46pm

The same setup would work with grid also.

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

asasass · August 12, 2019, 4:49pm

Updated***

This can be removed for the grid code.

justify-content:space-between;

.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;
}

asasass · August 13, 2019, 12:54am

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

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

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

asasass · August 13, 2019, 4:32am

Fixed.

Added
grid-gap: 4px;

.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;
}

asasass · August 13, 2019, 4:09pm

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

Isn’t it supposed to work inside grid?

justify-content:space-between;

.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.

.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;
}

PaulOB · August 13, 2019, 5:47pm

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.

asasass · August 13, 2019, 7:09pm

I see.

.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;
}

system · November 13, 2019, 2:09am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.