SASS Susy和Flexbox用于在Susy Grid中垂直对齐LI

Question

我已经查看了十几个关于垂直对齐项目的各种堆栈问题以及一些网站，其中包含用于与SASS Susy对齐/协作的教程。 似乎我的用例是独特的，我只是没有技巧来解决它。

我有一个全宽容器，里面有一个包装器。 容器使用susy span full，因为它只是站点容器的全宽度和flex包装是实际内容的宽度1200px（ 希望这是有意义的 ）。 它在代码中似乎是多余的，但是对于跨越屏幕的背景元素，部分需要是全宽度的，并且包裹是整个布局的其余内容的内容大小的容器。

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); }

这是容器元素的核心。 在flexwrap内部我有2列（左和右）。

HTML（不知道是不允许使用pastebin但是我的代码不在这里工作）

<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);
        }
    }

现在没有任何flexbox我和Susy一起得到了这个（我在这里为div标记了div容器）：

---

现在添加flexbox我根据我读到的内容添加了display：flex; flexwrap然后显示：flex; 挠曲方向：柱; 证明内容：空间之间; to item_bullets可以工作，但它所做的就是在我试图找到排除它的方法之后将我的标题文本弹性定位。

所以我添加了另一个内部div来容纳左右项，但它从不垂直空格/对齐列表项。 我假设一起使用Susy和Flexbox有一些并发症，但整个项目已经完成了Susy所以我希望有人比我有一个想法更聪明。

Answer 1

很难完全遵循你想要做的事情，所以我没有提供完整的代码解决方案，但我猜你的部分问题来自于输出float属性的span mix，这将与display:flex冲突display:flex设置。 请尝试使用span函数来设置宽度，而不会意外地设置其他属性。

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

值得注意的是， span(full)几乎总是无用的。 块元素默认为100％宽度，因此span(full)变为冗余膨胀。