web-dev-qa-db-ja.com

justify-contentを壊す疑似要素：flexboxレイアウトのスペース間

親div内に3つのdivがあります。

display: flex;
justify-content: space-between;

ただし、親divには:afterがあり、3つのdivが親divのエッジに出ないようにします。 flexbox :beforeと:afterを無視する方法はありますか？

codepen.io

.container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-top: 50px;
  background: gray;
}

.container div {
    background: red;
    height: 245px;
    width: 300px;
  }
.container:before {
    content: '';
    display: table;
  }
.container:after {
    clear: both;
    content: '';
    display: table;
  }
<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>
htmlcsscss3flexboxpseudo-element
14
Landon Call

短い答え

CSSには、現在、擬似要素がjustify-content: space-between計算に影響するのを防ぐ100％信頼できる方法はありません。

説明

フレックスコンテナ上の::beforeおよび::after擬似要素は、フレックスアイテムになります。

仕様から：

4。フレックスアイテム

フレックスコンテナの各インフロー子は、フレックスアイテムになります。

言い換えると、通常のフロー内にある（つまり、絶対に配置されていない）フレックスコンテナの各子は、フレックスアイテムと見なされます。

すべてではないにしても、ほとんどのブラウザはこれを解釈して、擬似要素を含めます。 ::before擬似は最初のflexアイテムです。 ::afterアイテムは最後です。

Firefoxのドキュメントから、このレンダリング動作をさらに確認します。

インフロー::afterおよび::before疑似要素がflexアイテムになりました （ bug 867454 ）。

問題の解決策の1つは、絶対配置で通常のフローから疑似要素を削除することです。ただし、この方法はすべてのブラウザーで機能するとは限りません。

justify-contentをめちゃくちゃにする擬似要素の図については、私の回答を参照してください。

16
Michael_B

これが継承されたプロパティである場合、単にオーバーライドします

.container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-top: 50px;
  background: gray;
}

.container div {
    background: red;
    height: 245px;
    width: 100px;
}

/* definitions from a framework */
.container:before {
    content: '';
    display: table;
  }
.container:after {
    clear: both;
    content: '';
    display: table;
  }

/* definitions override */
.container.flexcontainer:before, 
.container.flexcontainer:after {
   display: none;  
}
<div class="container flexcontainer">
  <div></div>
  <div></div>
  <div></div>
</div>
4
vals

親div内に別のdivをネストし、すべてのフレックスコードを指定したため、擬似要素は影響しません。

2
Landon Call

これを行う必要がある場合は、フレックスアイテムの自動マージン動作を利用できます。また、最初のflexの子の左マージンと最後のflexの子の右マージンをゼロにする必要があります。以下のコードペンを参照してください。

フレックスボックスと自動マージン： https://www.w3.org/TR/css-flexbox-1/#auto-margins

Codepenデモ： http://codepen.io/anderskleve/pen/EWvxqm

.container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-top: 50px;
  background: gray;

  div {
    background: red;
    height: 245px;
    width: 300px;
    margin: 0 auto;
  }

  div:first-child {
    margin-left: 0;
  }

  div:last-child {
    margin-right: 0;
  }

  &:before {
    content:'';
    display: table;
  }

  &:after {
    clear: both;
    content: '';
    display: table;
  }
}
0
anderskleve