CODEWITHSUNDEEP
csssassflexboxsusysusy-sass
user7737723
user7737723

Reputation: 11

SASS Susy and Flexbox for vertically aligned LI in Susy Grid

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):

enter image description here

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.

Upvotes: 1

Views: 214

Answers (1)

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

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.

Upvotes: 0

Related Questions