位置の使用：フレックスコンテナ内の相対

Question

私はそのテキストと画像のようなポストのプレビューをいくつかのフィルタを使って作成しています。

問題は、全体のdivを1300pxではなく、650pxにしたいということです。

ただし、この方法ではdisplay: flexを使用することはできません。また、divとテキストのdivと同じ高さのimgでdivを使用することはできません。

この問題はcss（jsなし）でのみ解決できますか？ http://codepen.io/anon/pen/RGwOgN?editors=1111

.post { 
 
    width: 650px; 
 
    padding: 25px 25px; 
 
    z-index: 10; 
 
    position: relative; 
 
    color: white; 
 
} 
 
.flex-row { 
 
    display: flex; 
 
    width: 1300px; /* here is a problem */ 
 
} 
 
.back-img { 
 
    width: 650px; 
 
    background-size: cover; 
 
    position: relative; 
 
    z-index: 0; 
 
    left: -650px; 
 
    filter: blur(3px); 
 
    -webkit-filter: blur(3px); 
 
    -moz-filter: blur(3px); 
 
    -o-filter: blur(3px); 
 
    -ms-filter: blur(3px); 
 
    filter: url(#blur); 
 
    overflow: hidden; 
 
}

<div class="flex-row"> 
 
    <div class="post"> 
 
    <h1>Lorem ipsum</h1> 
 
    <h2>text here</h2> 
 
    <p class="lead">text hete</p> 
 
    </div> 
 
    <div class="back-img" style="background-image: linear-gradient(
 
     rgba(0, 0, 0, 0.3), 
 
     rgba(0, 0, 0, 0.3) 
 
    ),url(http://unsplash.com/photos/g-AklIvI1aI/download)"> 
 
    <div></div> 
 
    </div> 
 
</div>

ご覧のように、それが正常に動作しますが、親要素（flex-rowが）サイズ* 2に設定されている場合にのみ、理由は別の方法、：ここで

はコードがあります子要素のサイズは自動的に縮小されます。

Answer 1

相対的な配置は、要素を通常のフローに保ちます。つまり、それらを配置した後も元の位置はまだスペースを占めています。

絶対配置は、要素を通常のフローから削除します。これらの要素はスペースを取らないため、周囲のレイアウトを妨げることなく並べ替えることができます。

これはあなたのために働く必要があります。

.flex-row { 
 
    display: flex; 
 
    width: 650px;      /* 1 */ 
 
    position: relative;     /* 2 */ 
 
} 
 
.post { 
 
    width: 100%; 
 
    padding: 25px 25px; 
 
    z-index: 10; 
 
    color: white; 
 
} 
 
.back-img { 
 
    position: absolute;     /* 3 */ 
 
    height: 100%; 
 
    width: 100%; 
 
    background-size: cover; 
 
    z-index: 0; 
 
    filter: blur(3px); 
 
    -webkit-filter: blur(3px); 
 
    -moz-filter: blur(3px); 
 
    -o-filter: blur(3px); 
 
    -ms-filter: blur(3px); 
 
    filter: url(#blur); 
 
    overflow: hidden; 
 
}

<div class="flex-row"> 
 
    <div class="post"> 
 
    <h1>Lorem ipsum dolor</h1> 
 
    <h2>Lorem ipsum dolor sit amet, cu melius feugiat delenit mei. Sea cu tale etiam definitiones. An pro scribentur omittantur, ei sea utinam hendrerit. Has ad dico illud fierent. Vis tale modus ridens te. 
 

 
Vix viris zril forensibus eu, dolor expetendis dissentiunt duo in. Vis id ludus theophrastus. Debitis tibique necessitatibus quo ea. At movet bonorum intellegat eos. Nec ne ubique erroribus. Rebum accusata est ad.</h2> 
 
    <p class="lead">{{post.summary}}</p> 
 
    </div> 
 
    <div class="back-img" style="background-image: linear-gradient(
 
     rgba(0, 0, 0, 0.3), 
 
     rgba(0, 0, 0, 0.3) 
 
    ),url(http://unsplash.com/photos/g-AklIvI1aI/download)"> 
 
    <div></div> 
 
    </div> 
 
</div>

http://codepen.io/anon/pen/XjWQxo

注：

1. 1300pxから変更一次容器幅650px
に10
2. make primary container the bounding box (nearest positioned ancestor) for absolute positioning of children
3. 画像はアウトフロー採取し、親DIVの完全な幅と高さを占めている