CODEWITHSUNDEEP
javascripthtmlcssflexbox
Mustang Maniac
Mustang Maniac

Reputation: 61

how to remove spaces in between flexitems in flex box model

I need to remove spaces between the flex-item in flex-box model. please check my pen

i want 6th element to be aligned right next to 2nd element similarly 7th element next to 3rd and similarly 8th element next to 4th

i dont want any space between those elements. by any chance can i acheive this using flex-box model ?

any help is appreciated.

thanks,

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  flex-flow:column wrap;
  height:600px;
}

.flex-item {
  background: tomato;
  padding: 10px;
  border: 5px solid red;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  width:100px;
  height:100px;
}

.flex1{
  width:600px;
}
<ul class="flex-container">
  <li class="flex-item flex1">1</li>
  <li class="flex-item flex2">2</li>
   <li class="flex-item flex3">3</li>
  <li class="flex-item flex4">4</li>
   <li class="flex-item flex5">5</li>
  <li class="flex-item flex6">6</li>
  <li class="flex-item flex1">7</li>
  <li class="flex-item flex2">8</li>
   <li class="flex-item flex3">9</li>
  <li class="flex-item flex4">10</li>
   <li class="flex-item flex5">11</li>
  <li class="flex-item flex6">12</li>
  <li class="flex-item flex1">13</li>
  <li class="flex-item flex2">14</li>
   <li class="flex-item flex3">15</li>
  
</ul>

Upvotes: 4

Views: 3201

Answers (2)

zer00ne
zer00ne

Reputation: 43880

It's got a button you click on and it will reorder the flex items randomly. It's not perfect, It doesn't always end up with 3 blocks for the bottom row.

DEMO

HTML

<header>
  <fieldset id="ui">
    <legend><span class="dropcap">F</span><span>lexbox</span> <span class="big">R</span><span>andom</span> <span class="big">O</span><span>rdered</span> <span class="big">G</span><span>rid</span></legend>
    <button id="btn">
      <a href='#'>Shuffle</a>
    </button>
  </fieldset>
</header>
<main id="flexMain" class="flexible">
  <ul id="flexShell">
    <li class="flexItem">01</li>
    <li class="flexItem">02</li>
    <li class="flexItem">03</li>
    <li class="flexItem">04</li>
    <li class="flexItem">05</li>
    <li class="flexItem">06</li>
    <li class="flexItem">07</li>
    <li class="flexItem">08</li>
    <li class="flexItem">09</li>
    <li class="flexItem">01</li>
    <li class="flexItem">11</li>
    <li class="flexItem">12</li>
    <li class="flexItem">13</li>
    <li class="flexItem">14</li>
    <li class="flexItem">15</li>
  </ul>
</main>

CSS

html {
  color: #000;
  font: 600 16px/1.45 Consolas;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  text-decoration: none;
}

body {
  width: 100vw;
  height: 100vh;
  background: #000;
  color: #003F7D;
}

#flexMain {
  display: inline-flex;
  flex-flow: column nowrap;
  jusify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  width: 100vw;
  height: 100vh;
}

#flexShell {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  border: 2px solid blue;
  width: 100%;
  max-height: 100%;
  min-height: 500px;
  padding: -2px;
}

.flexItem {
  display: inline-block;
  height: 100%;
  min-width: 5em;
  min-height: 100px;
}

.flexible * {
  text-align: center;
  outline: 3px solid hsla(60, 20%, 50%, .7);
}

li:nth-of-type(2n) {
  flex: 1 1 25%;
  width: 10em;
  background: hsla(0, 100%, 70%, 1);
  max-width: 60em;
}

li:nth-of-type(2n+1) {
  flex: 1 1 25%;
  width: 10em;
  background: #33FF66;
  max-width: 40em;
}

li:nth-of-type(3n+1) {
  flex: 1 1 50%;
  width: 20em;
  background: hsla(195, 100%, 60%, 1);
  max-width: 80em;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 48px;
  background: transparent;
}

#ui {
  position: relative;
  top: 48px;
  right: 0;
  border: 1px solid #F33;
  width: 100%;
  height: 32px;
  background: hsla(0, 0%, 0%, .3);
  border-radius: 10px;
  display: table;
}

#btn {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 5px;
  border-radius: 6px;
  font-variant: small-caps;
  color: #fc3;
  height: 28px;
  width: 64px;
  background: hsla(0, 0%, 0%, .7);
  border: 1px solid #FC3;
  display: table-cell;
}

legend {
  color: #6A2244;
  font: 600 1.5rem/1.2 "Book Antiqua";
  font-variant: small-caps;
  float: left;
}

.dropcap {
  color: #FD9;
  display: inline;
  float: left;
  font-size: 3.26em;
  line-height: .5em;
  margin: .205em .1em 0 0;
  text-transform: uppercase;
}

.dropcap + span {
  -1em;
}

.big {
  color: #FD9;
  font-size: 2rem;
}

JS

function qa(sel, ele) {
  if (!ele) {
    ele = document;
  }
  return Array.prototype.slice.call(ele.querySelectorAll(sel));
}
var fxArr = qa('.flexItem');
var rand = function(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
var frq = rand(1, 15);

function shuffle(frq, arr) {
  for (var i = 0; i < frq; i++) {
    for (var k = 0; k < arr.length; k++) {
      var n = rand(1, 15);
      var fx = arr[k];
      fx.style.order = n;
    }
  }
}

document.getElementById('btn').addEventListener('click', function(event) {
  event.preventDefault();
  shuffle(frq, fxArr);
}, true);

window.onload = shuffle(frq, fxArr);

Upvotes: 1

xkurohatox
xkurohatox

Reputation: 198

I tried editing your pen for you, but was fruitless.

Personally I think, unfortunately like with many projects you will need to put more work into it than it may first appear is needed.

I'd suggest just using responsive css, you can even use something like bootstrap to hurry up the process, although I don't think doing it by hand should be very difficult.

Good luck!

Upvotes: 0

Related Questions