4

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>
Mustang Maniac
  • 61
  • 1
  • 8
  • I'm pretty sure you can't do that. I think you're actually looking for a floating behaviour – Thomas Jensen Jul 28 '15 at 14:43
  • I assume same. Im trying to build windows 8 home page. which has fixed height for each group [see that in this fiddle but it works on IE11 only] (http://jsfiddle.net/heLptzcr/14/). in this child elements have fixed width if i change the width the layout is not fluid. I think we cant achieve desired layout using floated elements – Mustang Maniac Jul 28 '15 at 14:54
  • Basically a container of fluid widgets? I think I would go about it like this: 1. Define a grid system (e.g. 10x10 pixels) 2. Calculate minimum size of each widget/element and round up to fit with grid units 3. Write a good-enough algorithm to stack elements But it's really not the way the web works. – Thomas Jensen Jul 28 '15 at 15:21
  • @ThomasJensen: Okay. Thanks – Mustang Maniac Jul 28 '15 at 16:37
  • Wait a minute @user4709780, I like this challenge. Give me 24 hours because I got some work to do. Btw, if you want more members to take your question seriously, I suggest you change your name from "user4709780" to something that shows you put some thought into it. – zer00ne Aug 07 '15 at 03:51
  • So is your objective is to have 2 columns..what goes next to item 1... item 15? – zer00ne Aug 07 '15 at 04:32
  • @zer00ne: Hey, Thanks for trying it. My objective is to make a windows 8 home screen. if you have IE11 installed please try this [pen](http://codepen.io/anon/pen/qdKYaL). that pen is working only on IE 11. – Mustang Maniac Aug 09 '15 at 01:54
  • wht i was trying to do is. I was trying to build a windows 8 tile based home screen. but it should expand dynamically for each group in the above pen you can able to see some groups if i add an item to each group, that particular group has to expand. – Mustang Maniac Aug 09 '15 at 01:56
  • @zer00ne I dont know why that pen isnt working in chrome/ firefox. its working perfectly in IE. that is one more strange issue i found. – Mustang Maniac Aug 09 '15 at 01:57
  • @Mustang Maniac Ok, it's not exactly what you asked for, but close enough for a good start in the right direction. See my answer. – zer00ne Aug 09 '15 at 08:59

2 Answers2

1

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);
zer00ne
  • 41,936
  • 6
  • 41
  • 68
0

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!

xkurohatox
  • 198
  • 1
  • 1
  • 16