Css 用于Susy栅格中垂直对齐LI的SASS Susy和Flexbox

我已经看了十几个关于垂直对齐项目的各种堆栈问题，以及一些带有对齐/使用SASS Susy教程的网站。似乎我的用例是独一无二的，我只是没有技能去解决它

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

HTML

这是容器元素的核心。在flexwrap中，我有两列（左和右）

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

现在，在没有任何flexbox的情况下，我使用了Susy（我在这里为div容器着色以进行标记）：

---

现在添加flexbox，我的想法是基于我读到的添加显示：flex；到flexwrap，然后显示：flex；弯曲方向：立柱；证明内容：之间的空间；项目_项目符号可以工作，但它所做的只是灵活定位我的标题文本，即使在试图找到排除它的方法之后

---

因此，我添加了另一个内部div来容纳左右项，但它从不垂直分隔/对齐列表项。我假设同时使用Susy和Flexbox会有一些复杂的情况，但是整个项目都是用Susy完成的，所以我希望有人比我想象的更聪明。

很难准确地理解您要做的事情，所以我没有给出完整的代码解决方案，但我猜部分问题来自

span

mixin输出

float

属性，这将与

display:flex

设置冲突。请尝试使用

span

功能设置宽度，而不要意外设置其他属性

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

---

还值得注意的是，

span（full）

几乎总是无用的。块元素默认为100%宽度，因此

span（full）

成为多余的膨胀。

很难准确地理解您要做的事情，因此我没有给出完整的代码解决方案，但我猜部分问题来自

span

混合输出

float

属性，这将与

显示：flex

设置冲突。请尝试使用

span

功能设置宽度，而不要意外设置其他属性

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

还值得注意的是，

span（full）

几乎总是无用的。块元素默认为100%宽度，因此

span（完整）

成为冗余膨胀

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

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

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