Replacing float with flex

HTML-CSS
1

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

Set the parent container to display flex and set flex-wrap to wrap.

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


.wrape .nav li {
  margin: 0;
  padding: 0;
  /* float: left; */
  background: blue;
}
1 Like