私は、SASS Susyとの調整/作業のためのチュートリアルを使って、項目を垂直に整列させることについて、たぶん私のユースケースはユニークで、私はそれを解決するスキルを持っていないようです。SASS SusyとFlexboxはSusyグリッドの垂直方向に配置されたLIのためのものです
私はフルサイズのコンテナを持っており、その中にラッパーがあります。コンテナは、サセイ・スパン・フルを使用します。これは、サイト・コンテナとフレックス・ラップのちょうど全幅が、実際のコンテンツの幅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); }
。フレックスラップの内側には、2列(左右)があります。
HTML(知らないペーストビンが許可されているが、私のコードはここで働いていない)
<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);
}
}
私はスージーでこれを持っている任意のフレキシボックスなし(私は、マークアップのために、ここでのdivコンテナを色付けしました):
フレックスボックスを追加する私は私が読んだものに基づいて考えました。display:flex; flexwrapして表示する:flex;フレックス方向:列; justify-content:スペース間。 item_bulletsは機能しますが、それを除外する方法を見つけようとした後でも、ヘッダーテキストの位置を自由に変えるだけでした。
左の&の項目を格納するために別の内部divを追加しましたが、リスト項目を垂直方向に空白/整列させることはありません。私はSusyとFlexboxを一緒に使用するといくつかの合併症があると想定していますが、プロジェクト全体がSusyと一緒に行われているので、私はアイデアを持っていた人よりももっと賢い人がほしいと思っていました。