フレックス行の外側のパディング/マージンを設定するにはどうすればよいですか？

Question

私は外側の余白またはパディングをオンにしたいいくつかのフレックス行を持っています。例えば、内容が画面の端から50px以内に届かないようにします。

私はwidth、min-width、およびflex-basisですべてのやり方で試してみました。私が何か正しいものに近づくたびに、何らかの理由でコンテンツの位置がずれることや、ビューポートの外にコンテンツが流出することがあります。

フレックスボックスを使用していない場合、これは単に行の設定margin: auto 50px;で非常に簡単ですが、フレックスボックスでは動作しないようです。私が使用しています

Flexの設定は次のとおりです。この例では

div { 
 
    position: absolute; 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
} 
 
div:nth-of-type(1) { 
 
    top: 10%; 
 
    margin: 0; 
 
} 
 
div:nth-of-type(2) { 
 
    top: 20%; 
 
    margin: auto 50px; 
 
}

<div> 
 
    <p>1</p> 
 
    <p>2</p> 
 
    <p>3</p> 
 
    <p>4</p> 
 
</div> 
 

 
<div> 
 
    <p>1</p> 
 
    <p>2</p> 
 
    <p>3</p> 
 
    <p>4</p> 
 
</div>

jsfiddle

私はいいと中心のすべてを有する第2行はちょうど最初のように動作するのでしょう2番目の行の外側に50pxのマージンを単純に変更して、元のビューポート内の内容で整列します。

更新

また今min-widthまたはflex-basisと外側にその行内の2つの「スペーサー」フレックスアイテムを追加することをいじって試みたが、これはまた、所望の結果を生成しません。

基本的には、境界に到達するのではなく、ビューポートの端から一定の幅を残して、次に特定の点で2つの行に分割するのではなく、すべてを縮小したい。

Answer 1

にですフレックスボックスではないマージンを台無しにする。それはposition: absoluteです。

ドキュメントフローから要素を削除すると、囲み枠のプロパティ（内容、パディング、余白など）は気になりません。それはそれらを正しく通り抜けます。

代替の方法は、各コンテナの最大幅を設定することです。

次に、それらを水平に中央に配置します。

body { 
 
    position: relative; 
 
    height: 100vh; 
 
    margin: 0; 
 
} 
 
div { 
 
    position: absolute; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    width: 80%; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    background-color: yellow; 
 
} 
 
div:nth-of-type(1) { top: 10%; } 
 
div:nth-of-type(2) { top: 25%; } 
 
div > p { 
 
    flex: 1; 
 
    text-align: center; 
 
    border: 1px dashed black; 
 
}

<div> 
 
    <p>1</p> 
 
    <p>2</p> 
 
    <p>3</p> 
 
    <p>4</p> 
 
</div> 
 
<div> 
 
    <p>1</p> 
 
    <p>2</p> 
 
    <p>3</p> 
 
    <p>4</p> 
 
</div>

revised fiddle

Answer 2

まず、いくつかの注意事項：

1. あなたがいることを持っていない限り、あなたのフィドルにしたいアライメントを得るために絶対位置を必要としない他のいくつかの理由があります。
2. justify-contentプロパティが2つあります。 justify-content: centerを削除できます。
3. divの100％幅を指定する必要はありません。フレックスディスプレイを使用すると、それらのdivが自動的に空白を埋めるようになります。
4. また、別のスタイルを上書きしない限り、flex-direction: rowを指定する必要はありません。 Rowがデフォルトです。

CSSを少し簡略化してしまえば、余白やパディングに追加するだけです。 divsにmargin: 50pxのような単純なマージンを付けることができます。あるいは、マークアップ内にコンテナを実際に持たずにコンテンツのグループ全体にボックスの効果を作成する場合は、すべての行に同じ左右を付けることができますマージンは最初のマージンに上マージンを、最後にマージンを下マージンにします。あなたのフィドルからマークアップを使用している後者のシナリオの

例、：

HTML：

<div> 
<p>1</p> 
<p>2</p> 
<p>3</p> 
<p>4</p> 
</div> 

<div> 
<p>1</p> 
<p>2</p> 
<p>3</p> 
<p>4</p> 
</div> 

CSS：

div { 
    display: flex; 
    justify-content: space-between; 
} 
div:nth-of-type(1) { 
    margin: 50px 50px 0 50px; 
} 
div:nth-of-type(2) { 
    margin: 0 50px 50px 50px; 
} 

もっと読み：W3Schools Flexbox guide、 CSS Tricks guide with nice illustrations