

### 前提・実現したいこと

Flexを採用しdivをメニューのように整列させていますがうまく並びません

### 発生している問題・エラーメッセージ

[code]

    エラーメッセージは特段発生されておりません
    
[/code]

### 該当のソースコード

[code]

    <div class="fluid-wrap">
      <div class="el"></div>
      <div class="el"></div>
    </div>
    
    
    body {
      margin: 0;display: flex;justify-content: center;
    }
    
    .fluid-wrap {
      width: 80%;
      background: brown;
      height: 100vh;  display: flex;
    
      flex-wrap: wrap;
    }
    
    div>div {
        flex: 100%;
    }
    
    .el {
      height: 20px;
      background: #ffa;
    }
    
[/code]

### 試したこと

align-itemsが関係しているかと思っい、alignをstartに修正しましたが特別な変化が見れませんでした

### 補足情報（FW/ツールのバージョンなど）

sass:4.11.0  
windows:10


CC BY-SA 4.0
2019-06-12T11:08:32.863
55723
2019-06-12T11:38:26.470
34681
question
css sass
項目間に余白が残り続けてしまいます...。


今回の場合、flex アイテムの配置ではなく、 **flex アイテム間の余白の扱いが問題** です。つまり、`align-items`
プロパティではなく、`align-content` プロパティの値を考えなければなりません。

[CSS Flexible Box Layout Module Level 1](https://www.w3.org/TR/css-flexbox-1/)
によれば、`align-content` プロパティの初期値は **stretch** です。この値では、交叉軸での各アイテムの合計が flex
コンテナの寸法になるように、余白が均等に挿入されます。

> ### § 8.4. Packing Flex Lines: the align-content
> property[[1]](https://www.w3.org/TR/css-flexbox-1/#align-content-property)
>
>   * Name: align-content
>   * Value: flex-start | flex-end | center | space-between | space-around |
> stretch
>   * **Initial: stretch**
>   * Applies to: multi-line flex containers
>   * Inherited: no
>   * Percentages: n/a
>   * Computed value: specified keyword
>   * Canonical order: per grammar
>   * Animation type: discrete
>

そのため、質問者さんの実現したいことを行なうには、以下のように CSS を修正する必要があります。

[code]

    body {
      margin: 0;
      display: flex;
      justify-content: center;
    }
    
    .fluid-wrap {
      width: 80%;
      background: brown;
      height: 100vh;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;  /* 追加 */
    }
    
    div>div {
      flex: 100%;
    }
    
    .el {
      height: 20px;
      background: #ffa;
    }
[/code]

[code]

    <div class="fluid-wrap">
      <div class="el"></div>
      <div class="el"></div>
    </div>
[/code]


CC BY-SA 4.0
2019-06-12T11:38:26.470
55725
2019-06-12T11:38:26.470
2020-06-17T08:14:45.997
-1
32986
55723
answer