SASS Susy and Flexbox for vertically aligned LI in Susy Grid

Question

I've looked at about a dozen various stack questions about vertically aligning items and a few websites with tutorials for aligning / working with SASS Susy. It seems perhaps my use case is unique and I just don't have the skills to work it out.

I've got a Full-Width Container and inside that I have a Wrapper. The container uses susy span full because its just full-width of the site container and the flex wrap is width of the actual content 1200px ( hopefully that makes sense ). It might seem redundant in the code but section needs to be full-width for background elements that span the screen and the wrap is the container for the content size throughout the rest of the layout.

HTML

<section class="sectionid section"><div class="flexwrap">All the Code for the children elements here</div></section>

CSS

.section{ @include span(full); }
.flexwrap{ @include container(1200px); }

Thats the core of the elements of the container. Inside the flexwrap I have 2 columns (left and right).

HTML (don't know is pastebin is allowed but my code isn't working on here)

<section class="sectionid section">
<h3>text</h3>
    <div class="flexwrap">
    <div class="item_left">
        <ul class="item_bullets">
        <li><div class="bullet_left">img</div><div class="bullet_right">item</div></li>
        <li><div class="bullet_left">img</div><div class="bullet_right">item</div></li>
        <li><div class="bullet_left">img</div><div class="bullet_right">item</div></li>
        </ul>
        </div>
        <div class="item_right">HEADING & TEXT</div>
    </div>
</section>

CSS

.item_bullets {
        @include span(full);
        margin:0;
        list-style:none;
        li {
            @include span(full);
        }
        .bullet_left {
            @include span(1.5 of 12);
        }
        .bullet_right {
            @include span(9.5 of 12 last);
        }
    }

Now without any flexbox I've got this with Susy (I've colored the div containers here for the markup):

---

Now adding flexbox I thought based on what I read adding display:flex; to flexwrap and then display:flex; flex-direction:column; justify-content:space-between; to item_bullets would work, but all it did was flex position my header text even after trying to find ways to exclude it.

So I added another inner div to just house the left & right items, but it never vertically spaces / aligns the list items. I assume using Susy and Flexbox together there are some complications but the whole project has been done with Susy so I was hoping someone more clever than I had an idea.

Answer 1

It's very hard to follow exactly what you are trying to do, so I acn't give a full code solution, but I'd guess that part of your problem comes from the span mixin outputting a float property, which will conflict with display:flex settings. Try using the span function instead, to set widths without accidentally setting other properties.

.bullet_left {
  width: span(1.5 of 12);
}

It's also worth noting that span(full) is almost always useless. Block elements default to 100% width, so span(full) becomes redundant bloat.