4

So I've been doing a lot of research and I can't seem to figure the solution I need and I was wondering if someone had the same problem. I've attached a sample of the code.

Basically, How do I get it to justify-content: flex-start on the next line of the wrap? (If that makes sense)

The page would then be responsive to any size of the browser.

<head>
<style>
body{
    margin:0px;
    padding:0px;
}
ul{
    padding:0px;
    margin:0px;
    list-style-type:none;
}

.c
{
    position: relative;
    display: flex;
    height: 100px;
    width: 100px;
    background-color: #000;
}
.c_style
{
    position: relative;
    display: flex;
    justify-content:space-between;
    margin: 0px 40px;
    flex-wrap: wrap;
}
div{
    margin:0px;
}
</style>
</head>    
<body>
<div>
<ul class="c_style">
    <li><div class="c"></div></li>
    <li><div class="c"></div></li>
    <li><div class="c"></div></li>
    <li><div class="c"></div></li>
    <li><div class="c"></div></li>
    <li><div class="c"></div></li>
    <li><div class="c"></div></li>
    <li><div class="c"></div></li>
    <li><div class="c"></div></li>
    <li><div class="c"></div></li>
    <li><div class="c"></div></li>
    <li><div class="c"></div></li>
    <li><div class="c"></div></li>
    <li><div class="c"></div></li>
</ul>
</div>

</body>
TylerH
  • 20,799
  • 66
  • 75
  • 101
PowerCat
  • 93
  • 9
  • Can you please elaborate a bit more what result you're trying to achieve. – Roy Apr 16 '17 at 20:08
  • Ok great, I'm trying to get both lines to line up exactly when they start to wrap, right now space-between gives a great result on the first line, but once it start wrapping, it doesn't look that great on the second line. So I thought maybe there was an :after for a wrap or linebreak. But I can't find one. – PowerCat Apr 16 '17 at 20:31
  • Your only option is: keep `space-between` and use `javascript` on `load` and `resize` events, to count the number of elements on last row and add the correct number of items to markup so the first ones on last row display correctly. You'll need to wipe empty elements on `resize` and debounce adding new ones until `resize` finishes. – tao Apr 16 '17 at 20:59
  • @AndreiGheorghiu - You just went straight over my head, hehe. I'm guessing you saying to count the elements then pass that number into Java? – PowerCat Apr 16 '17 at 21:13
  • I'm saying there's no way to do this with `CSS` alone. You'll need a `javascript` function that will check your layout and *"make it right"*. You need to run this function on two events: `window.load` and `window.resize`. Because `window.resize` can fire up to 100 times per second during a resize of a browser window, you want to limit the times your *"make it right"* function can run/second, by debouncing it. That's the only way to achieve what you want. And `Java != JavaScript` – tao Apr 16 '17 at 21:21
  • Ok, I managed to find the css I needed via one of the links on the suggestion links on the right. http://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid?noredirect=1&lq=1 http://codepen.io/dalgard/pen/Dbnus But thanks for trying to help :) – PowerCat Apr 16 '17 at 21:37
  • That hardly qualifies as a solution, since it does not keep the `space-between` justify rule of your `flexbox` elements, which seemed to have been what you were asking for. It's pretty much like saying the guillotine is effective in getting rid of dandruff. Which happens to be true, but defeats the purpose. – tao Apr 17 '17 at 00:19

0 Answers0