CSSは：私の問題だ行

Question

で最後の要素を削除します。私はフレックスコンテナ内のもののリストを持っており、それらが 問題の下の画面に示されているようなセパレータで分割されている

、ときあなたですウィンドウのサイズを変更してサイズを小さくすると、別の行に移動し、行の最後の部分にある区切り文字を取り除き、残りの部分がうまく中央揃えになるようにしたいと考えています。

ところで私は区切り文字を作るために余白を使用しようとしましたが、divのあらゆるサイズでそれらをセンタリングするのに問題がありました。

どのようにヒントをCSSで達成するには？

私は今あなたが要素をターゲットと自分のスタイルを変更するには、各ブレークポイントでnth-of-type()を使用することができます

@import "compass/css3"; 
 

 
.flex-container { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    
 
    -webkit-flex-flow: row wrap; 
 
justify-content: space-around; 
 
    align-items: center; 
 
    
 
} 
 

 
.flex-item { 
 

 

 
    padding: 5px; 
 
    margin-top: 10px; 
 
    min-width:100px; 
 
    line-height: 150px; 
 
    color: blaclk; 
 
    font-weight: bold; 
 
    font-size: 1.5em; 
 
    text-align: center; 
 
    opacity: 0.7; 
 
    
 

 
} 
 
.flex-item img{ 
 
    width: 100%; 
 
} 
 

 

 

 
.separator{ 
 
    background: rgb(127, 0, 0); 
 
    background: rgba(192,192,192,.5); 
 
    width: 1px; 
 
height: 100px; 
 

 

 
}

<div class="flex-container"> 
 
<div class="flex-item " ><center><p> 1 </p></center></div> 
 
    <div class="separator"></div> 
 
<div class="flex-item " ><center><p> 2 </p></center></div> 
 
    <div class="separator"></div> 
 
<div class="flex-item " ><center><p> 3 </p></center></div> 
 
    <div class="separator"></div> 
 
<div class="flex-item " ><center><p> 4 </p></center></div> 
 
</div>

Answer 1

別のブラウザなどで変化する可能性のあるあらゆる状況を定義するためのクエリ）、ここではjs（jQuery）の使用を提案します。以下の例を参照してください。

ファンクションseparatorHandler()を作成し、各アイテムの先頭位置を確認します。新しい行にある最後のアイテムよりも高い場合は、前のセパレータを非表示にします。それはHTML5で廃止され

を使用しないでください：

も<center>はもはや単なるCSSだけ言ってtext-align: center;

$(window).resize(function() { 
 
    separatorHandler(); 
 
}).trigger('resize'); 
 

 
function separatorHandler() { 
 
    var lastItemTop = $('.flex-item').first().position().top; 
 
    $('.flex-item').each(function() { 
 
    if ($(this).position().top > lastItemTop) { 
 
     lastItemTop = $(this).position().top; 
 
     $(this).prev('.separator').hide(); 
 
    } else { 
 
     $(this).prev('.separator').show(); 
 
    } 
 
    }); 
 
}

@import "compass/css3"; 
 
.flex-container { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-flow: row wrap; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
} 
 

 
.flex-item { 
 
    padding: 5px; 
 
    margin-top: 10px; 
 
    min-width: 250px; 
 
    line-height: 150px; 
 
    color: blaclk; 
 
    font-weight: bold; 
 
    font-size: 1.5em; 
 
    text-align: center; 
 
    opacity: 0.7; 
 
} 
 

 
.flex-item img { 
 
    width: 100%; 
 
} 
 

 
.flex-item:nth-child(2n) { 
 
    background: red; 
 
} 
 

 
.separator { 
 
    background: rgb(127, 0, 0); 
 
    background: rgba(192, 192, 192, .5); 
 
    width: 5px; 
 
    height: 100px; 
 
} 
 

 
.centered { 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="flex-container"> 
 
    <div class="flex-item "> 
 
    <div class="centered"> 
 
     <p> 1 </p> 
 
    </div> 
 
    </div> 
 
    <div class="separator"></div> 
 
    <div class="flex-item "> 
 
    <div class="centered"> 
 
     <p> 2 </p> 
 
    </div> 
 
    </div> 
 
    <div class="separator"></div> 
 
    <div class="flex-item "> 
 
    <div class="centered"> 
 
     <p> 3 </p> 
 
    </div> 
 
    </div> 
 
    <div class="separator"></div> 
 
    <div class="flex-item "> 
 
    <div class="centered"> 
 
     <p> 4 </p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

ていたコードです。私はブレークポイントを知らない... https://codepen.io/sheriffderek/pen/53eda10aa154e6383be6be62ce324d95?editors=1100

が、ポイントはあり、

：

私が、スタイラスでそれを書いたこのペンでは約推論する方が簡単かもしれ、それは幅に依存することを意味します。私は はかなりいくつかの点で、このような状況

にそれを使用する方法を理解していない - レイアウトの特定の部分で、あなたがコントロールを取ると、意思決定をしなければなりません。ブレークポイントとは何ですか？なぜ、画面サイズとコンテンツに基づいてレイアウトを変更するのが適切なのですか？コンピュータとフレックスボックスは本当にクールですが、ロジックシステムを構築して解釈することができなければ、価値がありません。ブラウザは、「正しい」と思われるときにだけ、枠線をいつ枠に入れるかを決めることはできません。私はこれが理想的ではないことを知っていますが、それは他の方法がないので、私が生産で使用することになります。 JavaScriptでカラムをチェックしてクラスを適用することもできますが、これはこれと同じです。

.thing-list { 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
} 
.thing { 
    flex-basis: 100%; 
} 
.thing:not(:last-of-type) { 
    border-bottom: 5px solid #00f; 
} 
@media (min-width: 700px) { 
    .thing { 
    flex-basis: 50%; 
    } 
    .thing:not(:last-of-type) { 
    border-bottom: 0; 
    } 
    .thing:nth-of-type(2n+1) { 
    border-right: 5px solid #800080; 
    } 
} 
@media (min-width: 1000px) { 
    .thing { 
    flex-basis: 25%; 
    } 
    .thing, 
    .thing:nth-of-type(2n+1) { 
    border-right: 5px solid #008000; 
    } 
    .thing:nth-of-type(4n + 4) { 
    border-right: 0; 
    } 
} 

Answer 3

あなたは純粋なCSSのソリューションに興味があるなら、私はその目的のためにセパレータのため:after疑似クラスを使用することをお勧めします。次に:after疑似要素の表示を削除するためのセレクタ。:last-of-typeと:nth-child

純粋なCSSソリューションです。あなたが必要とするすべてのメディアクエリを指定する必要があるため、少し実用的ではありません（ただし、もちろん機能します）。 JavaScriptを使用する方がずっと簡単です。

CSS：

.flex-container { 
    display: flex; 
    /* ... */ 
    flex-flow: row wrap; 
} 

.flex-item { 
    display: block; 
    /* ... */ 
    position: relative; 
} 

.flex-item:after { 
    content: ""; 
    display: block; 
    background-color: white; 
    width: 2px; 
    height: 100%; 
    position: absolute; 
    right: -20px; 
    top: 0; 
} 

/* funny part */ 
.flex-item:last-of-type:after { 
    display: none; 
} 
@media (max-width: 365px) { 
    .flex-item:after { 
     display: none; 
    } 
} 
@media (min-width: 366px) and (max-width: 549px) { 
    .flex-item:nth-child(2n):after { 
     display: none; 
    } 
} 
@media (min-width: 550px) and (max-width: 727px) { 
    .flex-item:nth-child(3n):after { 
     display: none; 
    } 
} 

とHTML：

<div class="flex-container"> 
    <div class="flex-item"><p>Foo</p></div> 
    <div class="flex-item"><p>Bar</p></div> 
    <div class="flex-item"><p>Bar</p></div> 
    <div class="flex-item"><p>Bar</p></div> 
</div> 

ここでの作業フィドルだ：あなたはメディアを使用する場合を除き、私はそれが非常に難しい（だと思う純粋なCSSでhttps://jsfiddle.net/9wrL5oeL/