6

次の HTML があるとします。

<div class="outer">
  <div>
    <div class="inner">A</div>
  </div>
</div>
<div class="outer">
  <div class="inner">B</div>
</div>

および次の CSS (接頭辞なし):

.outer {
  display: box;
  box-orient: vertical;

  height: 100px;
  width: 100px;

  background: red;
  margin: 10px;
}

.inner {
  height:     50px;
  margin-top: 10px;
  background: green;
}

AとB

ここにCodePenがあります。

Aでラップされている<div>ため、マージンは無視されます。

Q:フレックス ボックス モデルで (マージン)Bに対する の動作を実現するにはどうすればよいですか?A

注: div ラッパーは、複数レベルの深さになる可能性があります

ターゲティング: 最新の Chrome/Safari/iOS

ご助力ありがとうございます！

編集：@ JoséCaboのおかげで、私はこれを思いつきました：

.outer {
  display: flex;
  flex-direction: column;

  height: 100px;
  width: 100px;

  background: red;
  margin: 10px;
}

.inner {
  height:     50px;
  margin-top: 10px;
  background: green;
}

コードペン

クロム： クロム

サファリ： サファリ

残念ながら、@cimmanon が述べたように Safari では機能しないため、まだ助けが必要です。

4

2 に答える 2

6

あなたが見ているものは実際にはFlexboxとは何の関係もありませんが、マージン崩壊と呼ばれるものです

.outer div {
  border: 1px solid;
}

境界線の追加により、マージンが崩壊するのを防ぎました。マージンに依存するのではなく、親コンテナにパディングを配置することをお勧めします。

.outer {
  padding-top: 10px;
}

例：

.wrapper {
  background: #eef;
  border: 1px solid darkgray;
}

.container {
  display: flex;
  flex-wrap: wrap;
  margin: -1em;
}
  
.item {
  flex-grow: 1;
  margin: 1em;
  border: 1px solid black;
  padding: 1em;
  min-width: 6em;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="wrapper">
  <div class='container'>
    <div class='item'>item</div>
    <div class='item'>item</div>
    <div class='item'>item</div>   
    <div class='item'>item</div>
    <div class='item'>item</div>
    <div class='item'>item</div>    
  </div>
  </div>
</body>
</html>

ここで、すべてのプレフィックスをカバーするには、次のようなものが必要です。

.outer {
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100px;
  width: 100px;
  background: red;
  margin: 10px;
}
于 2013-02-24T23:14:07.913 に答える
3

最後に、適切な解決策を思いつきました（特定の問題に対して）。

.outer {
  display: flex;
  flex-direction: column;

  height: 100px;
  width: 100px;

  background: red;
  margin: 10px;
}

.inner {
  height: 50px;
  margin-top: 10px;
  background: green;
  display: inline-block;
  width: 100%;
}

コードペン

display: inline-blockonを使用し.innerてマージンの崩壊を無効にし、失われた幅を で補正していwidth: 100%ます。

すべての功績は、私を正しい「マージン崩壊」の方向に向けてくれたシマノンに行きます

于 2013-02-24T23:58:18.870 に答える