ブートストラップ4フレックスボックスグリッドで12列のグリッドから抜け出すには？

Question

私はブートストラップ4がフレックスボックスをグリッドシステムに採用すると聞き、私は本当に興奮しました。私はこれが、フレックスボックスが知られている素早く便利な要素のサイジングを展開すると考えました。しかし、それは現在の12 colグリッドシステムにいくつかの（主要な）機能性を加えるだけであるようです。

ブートストラップ4では、12カラム以外のレイアウトで列幅を関連付けるのは簡単ですか？単にflex-grow、flex-shrinkとflex-basis等フレックスアイテムのプロパティを使用して分割する水平方向のスペースを指定することにより、相互に関連することができる方法フレックスボックス同様

。

[1：5] [----- 3：5 -----] [1：5]

これはCOL2項目を簡単flex:3;で行われるであろう。しかし、まだブートストラップ4では不可能と思われますか？多分私は何かを欠いているでしょうか？

Answer 1

ブートストラップ4にはフレックスボックスがあり、12単位のグリッドに基づいています。 flex-basisとflex-growが

自動レイアウト列...列が定義された列単位の周りに残りのスペースに消費することができ、新たなauto-layout columnsによって利用される：SASSを使用して http://codeply.com/go/JbGGN4Ok3A

は、あなたが番号を変更することができます変数の$grid-columnsを使用してグリッド列のあなたの例では、10ユニットのグリッドが動作します。自動レイアウトでこれを組み合わせて、あなたが得ることができます：

[1：5] [----- 3：5 -----] [1：5]

SASS

$enable-flex:true; 
    $grid-columns: 10; 
    $grid-gutter-width: 15px; 

HTML

<div class="row"> 
     <div class="col-xs"> 
       1:5 
     </div> 
     <div class="col-xs-6"> 
       3:5 
     </div> 
     <div class="col-xs"> 
       1:5 
     </div> 
</div> 

http://codeply.com/view/WG1jllYC2K

注：$grid-gutter-width変数を使用して、列間の間隔を変更することもできます。

ブートストラップ4のよう

UPDATE（アルファ6）自動レイアウト.colは、今ではあなたはハーフユニット列のレイアウトを作成することができることをフレックスは、成長のために使用されています。 2.5--7--2.5のレイアウトは数学的には1.5--3.5--1.5（10ユニット）に非常に近いので、カスタムSASS 10ユニットグリッドではなく別のオプションになる可能性があります。 http://www.codeply.com/go/kBqRVNPE6E