フレックスボックスとパディング

私は、ちょうど魔法のKittenCornsとCSSアニメーションに関する私の前の記事が18分読むために働いたのを見ました.これは明らかに人々が全体を読むことを得るためにひどいです.私が私自身の記事を読んでいるものである良いもの、huh?
とにかく、これは私の仲間との議論から外れた本当に短いものです.何故なら、友達はカジュアルな会話で話すからです.
しかし、私はそれが人々が入るかもしれないかなり一般的な問題であるので、ここに書いています.

シナリオ

あなたがスクロールの水平オーバーフロー動作でFlexコンテナーにパディングを適用しようとした場合、あなたのコンテナのフレックス端側にパディングが適用されないことに気づくかもしれません.

これは、このような状況下でブラウザによってフレックス項目に割り当てられている利用可能なスペースです.フレックスコンテナーのブロックを含むブロックの幅は、マージン、境界線、および水平方向のパディングをマイナスにします.
仕様の関連するセクションはCSS Flexible Box Layout Module Level 1: 9.2 Line Sizing
更新:私のオリジナルの説明がなぜ開始パディングがあるが、エンドパディングがない理由を本当に説明しなかった点を上げました.そしてさらに掘ると、Web compatの制約を考慮してオーバーフローするコンテンツの扱い方について長年の論争を見つけました.
これはFlexboxレイアウトにのみ影響する問題ではありませんが、ブロックやインラインの子と同様にスクロールコンテナにも影響します.CSS 2.1はオーバーフローに関して明確でありませんでした、そして、それはおそらく異なったふるまいを実行している異なるブラウザーベンダーに帰着しました.例えば、WebKitは持っていましたブロック子供とインライン子供のための異なる方針.
Gitthub問題から[css-overflow-3] Clarify padding-bottom in overflow content , コメントします

I think historically the issue is that browsers didn't want to trigger scrollbars for overflow: auto unless visible content was overflowing the inner border edge, so they didn't count padding.

問題はまだ解決されておらず、興味のある方は以下のリンクを読んでください.

Bug 748518 padding-bottom/right(block-end/inline-end) is ignored with overflow:auto/scroll because it extends in from the border-box rather than out from the scrollable area

[css-grid-1] Include padding in scrollable overflow area

[css-overflow-3] Clarify padding-bottom in overflow content

CSS Overflow Module Level 3

Bug 1527949 Implement whatever more-interoperable behavior the CSSWG comes up with, for making "end" padding scrollable on scrollable elements

しかし、パッドを有するスクロール容器の項目を有することは比較的一般的な状況であり、所望の効果を達成するために2、3の回避策がある.両方の回避策はハッキングの種類です.ここにいくつかの項目を基本的なフレックスコンテナのマークアップです.

<div class="flex">
  <div class="flex__item card">
    <img src="http://placekitten.com/150/150">
    <div class="card__txt">
      <h3>Sleep more</h3>
    </div>
  </div>
  <div class="flex__item card">
    <img src="http://placekitten.com/150/150">
    <div class="card__txt">
      <h3>Sleep more</h3>
    </div>
  </div>
  <!–– repeat for like 10 more cards ––>
</div>

境界線使用

つのオプションは、それがコンテナのアイテムのまわりで詰め物のように見えるように境界の上にスタイルを作ることです.

.border {
  border: 1em #4abc41 solid;
}

この解決策の潜在的な欠点は、スクロールバーの位置です.オペレーティングシステムによって、これは問題であるかもしれません.例えば、Windows(以下に示すスクリーンショット)では、それはかなり明白です.Androidでは、スクロールバーはかろうじて目立つ.

この機会に話をしたいCSS Scrollbars Module Level 1 現在、エディタのドラフトです.これは、スクロールバースタイリングのための2つの新しいCSSプロパティを紹介します.scrollbar-color and scrollbar-width . Firefoxはバージョン64以降でサポートしています.
詳細な情報をIssue № 1022 of Web Platform News .

擬似要素の後に

もう一つのオプションは、利用することです::after フレックスコンテナ上の擬似要素.::before and ::after は生成された内容であり、関連する要素の内部に挿入される.つまり、Flexコンテナ内の子要素としてレンダリングされます.

.pseudo-elem {
  padding: 1em;

  &::after {
    content: '';
    padding: 0.5em;
  }
}

あなたは、上のパディングを確認する必要があります::after 擬似要素は、Flexコンテナで使用されるパディングの半分です.

ラッピング

私は、これが短いと約束しました.とにかく、あなたがコードを見て、それを回避したい場合.またはより良い、回避策のリストに追加してくださいので、自由にしてください.そして、あなたのソリューションを私にping!