kdcsライブラリー

親要素にdisplay: flexを指定している中にある子要素はflexアイテムとなり、さまざまなプロパティが用意されている。

order … 順序の指定（子要素を任意の順で並べ替えられる）

flex-grow … 子要素の伸びる比率（初期値 0）
【 1 を指定すると、「余白があれば、その分だけ広がる」という意味になる】
flex-shrink … 子要素の縮む比率（初期値 1）
【 0 を指定すると、「絶対に縮まない」という意味になる】
flex-basis … 子要素のベースとなる幅の指定（初期値 auto）
【pxや%で指定する】

上記の3つは「flex-grow flex-shrink flex-basis」の順でまとめて指定できる
例：flex: 0 1 30%;

その他、
align-self … 子要素の垂直方向の揃え（初期値 auto）

flexを使ったレスポンシブレイアウトの例
asideの幅を全幅の30%で最小幅を250pxとし、残りのスペースをmainで使うという指定

html ---------------------------
<div id="wrapper">
<div class="contentBox">
<div class="main">main</div>
<div class="aside">aside</div>
</div>
</div>

css ----------------------------
#wrapper {
    max-width: 1240px;
    width: 100%;
}
.contentBox {
    display: flex;
    flex-wrap: wrap;
}
.main {
    flex: 1; /* aside指定値(flexやmin-width)以外で伸縮 */
    min-width: 0; /* オーバーフロー防止 */
}
.aside {
    flex: 0 0 30%; /* 初期値・縮まない・幅30%を基本に */
    min-width: 250px; /* 最小幅を250pxに固定 */
}

メディアクエリでモバイル対応させる場合
※contentBox内を縦表示にしてmainとasideの幅を100%にする

@media (max-width: 780px) {
.contentBox {
  flex-direction: column;
  }
#main, .main {
  width:100%;
  min-width: unset;
  flex: 0;
  }
#aside {
  width: 100%;
  min-width: unset;
  flex: 0 1 auto;
  }
}