2017-03-29 22 views
1

私は、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コンテナを色付けしました):

enter image description here


フレックスボックスを追加する私は私が読んだものに基づいて考えました。display:flex; flexwrapして表示する:flex;フレックス方向:列; justify-content:スペース間。 item_bulletsは機能しますが、それを除外する方法を見つけようとした後でも、ヘッダーテキストの位置を自由に変えるだけでした。

左の&の項目を格納するために別の内部divを追加しましたが、リスト項目を垂直方向に空白/整列させることはありません。私はSusyとFlexboxを一緒に使用するといくつかの合併症があると想定していますが、プロジェクト全体がSusyと一緒に行われているので、私はアイデアを持っていた人よりももっと賢い人がほしいと思っていました。

答えて

0

あなたがしようとしていることを正確に追跡するのは非常に難しいので、完全なコードソリューションを提供することはできませんが、floatプロパティを出力するspan mixinから問題が発生していると思います。 display:flexの設定と競合します。代わりにspan関数を使用して、誤って他のプロパティを設定することなく幅を設定してみてください。

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

span(full)はほとんど常に役に立たないことにも注意してください。ブロック要素のデフォルトの幅は100%なので、span(full)は冗長になります。

関連する問題