web-dev-qa-db-ja.com

flexboxレイアウトのパディングボトム/トップ

2つのアイテムを含むflexboxレイアウトがあります。それらの1つはpadding-bottomを使用します：

#flexBox {
  border: 1px solid red;
  width: 50%;
  margin: 0 auto;
  padding: 1em;
  display: flex;
  flex-direction: column;
}
#text {
  border: 1px solid green;
  padding: .5em;
}
#padding {
  margin: 1em 0;
  border: 1px solid blue;
  padding-bottom: 56.25%; /* intrinsic aspect ratio */
  height: 0;
}
<div id='flexBox'>
  <div id='padding'></div>
  <div id='text'>Some text</div>
</div>

青の要素 幅に応じてアスペクト比を維持 ページのサイズが変更されたとき。 これはChromeおよびIEで動作し、次のようになります。

padding-bottom in chrome and IE on flexbox layout

ただし、FirefoxおよびEdgeでは、次のようになります（無視します）青いボックスのパディング、これがアスペクト比を維持します）：

padding-bottom in Firefox on flexbox layout

私はflexboxがあまりにも新しいので、これが機能するかどうかを本当に理解します。flexboxのポイントはサイズを変更することですが、私はm固有のパディングを無視し、青い要素に絶対サイズを配置する理由がわからない。

最終的に、FirefoxかChromeが正しいことをしているかどうかさえわからない。Firefoxflexboxエキスパートが助けてくれる？

csscss3paddingflexboxaspect-ratio
73
Simon_Weaver

2018年2月更新

FirefoxおよびEdgeは、フレックス（およびグリッド）アイテムの上部、下部マージン、およびパディングの動作を変更することに同意しています。

[...]例えば左/右/上/下の割合はすべて、横書きモードでの包含ブロックの幅に対して解決されます。 [ ソース ]

これはまだ実装されていません（FF 58.0.2でテスト済み）。

2016年4月更新

（ 2017年5月でも有効 ）

仕様には 更新中 があります：

フレックスアイテムのマージンとパディングの割合は、次のいずれかに対して解決できます。

  • 独自の軸（左/右の割合が幅に対して解決され、上/下が高さに対して解決される）、または
  • インライン軸（左/右/上/下のパーセンテージはすべて幅に対して解決されます）

ソース： CSSフレキシブルボックスレイアウトモジュールレベル1

これは、chrome IE FFおよびEdge（同じ動作を持たない場合でも）が仕様の推奨に従うことを意味します。

仕様も言う：

作成者は、フレックスアイテムのパディングやマージンにパーセンテージを使用することを完全に避ける必要があります。これは、ブラウザによって動作が異なるためです。 [ ソース ]

回避策：

Flexコンテナの最初の子を他の要素でラップし、padding-bottom 2番目の子：

#flexBox {
  border: 1px solid red;
  width: 50%;
  margin: 0 auto;
  padding: 1em;
  display: flex;
  flex-direction: column;
}
#text {
  border: 1px solid green;
  padding: .5em;
}
#padding {
  margin: 1em 0;
  border: 1px solid blue;
}
#padding > div {
  padding-bottom: 56.25%; /* intrinsic aspect ratio */
}
<div id='flexBox'>
  <div id='padding'><div></div></div>
  <div id='text'>Some text</div>
</div>

これを最新のブラウザー（IE、Chrome、FF、およびEdge）でテストしましたが、すべて同じ動作をしています。 2番目の子の構成は「通常と同じ」なので、古いブラウザー（aslo support flexbox layout module ）は同じレイアウトをレンダリングすると思います。

前の答え：

specs によれば、Firefoxには正しい動作があります

説明：

コンテナの幅に従って％マージン/パディングを計算するブロックアイテムとは異なり、フレックスアイテムでは：

フレックスアイテムのマージンとパディングの割合は、それぞれの寸法に対して常に解決されます。ブロックとは異なり、それらは含まれるブロックのインライン次元に対して常に解決するわけではありません。

source dev.w3.org

つまり、padding-bottom/topおよびmargin-bottom/topは、コンテナの高さに従って計算され、非flexboxのような幅ではありませんレイアウト。

親flexアイテムに高さを指定していないため、子の下部のパディングは0pxであると想定されています。
ここに fiddle があり、親の高さが固定されており、display:flex;コンテナ。

100
web-tiki

受け入れられた答えは正しいですが、新しい要素をHTMLに追加する代わりに擬似要素を使用することでソリューションを改善しました。

例： http://jsfiddle.net/4q5c4ept/

HTML：

<div id='mainFlexbox'>
  <div id='videoPlaceholder'>
    <iframe id='catsVideo' src="//www.youtube.com/embed/tntOCGkgt98?showinfo=0" frameborder="0" allowfullscreen></iframe>
  </div>
  <div id='pnlText'>That's cool! This text is underneath the video in the HTML but above the video because of 'column-reverse' flex-direction.    </div>
</div>

CSS：

#mainFlexbox {
  border: 1px solid red;
  width: 50%;
  margin: 0 auto;
  padding: 1em;
  display: flex;
  flex-direction: column-reverse;
}
#pnlText {
  border: 1px solid green;
  padding: .5em;
}
#videoPlaceholder {
  position: relative;
  margin: 1em 0;
  border: 1px solid blue;
}
#videoPlaceholder::after {
  content: '';
  display: block;
  /* intrinsic aspect ratio */
  padding-bottom: 56.25%;
  height: 0;
}
#catsVideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
34
OrganicPanda