フレキシボックス/フロートアンカー項目が

Question

この例を考えてみましょうトップに。私はflexboxのalign-items: flex-endを使ってこれを達成することはできず、どちらもフロートではできません。

私はこれをmasonry/isotopeを使って実現していますが、私はこのレイアウトのためだけにjavascriptを使用しないでください。

CSSのみを使用することは可能ですか？

行によって別々の

Answer 1

と行も

.top { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.row1, .row2 { 
 
    display: flex; 
 
} 
 

 

 
.box { 
 
    background-color: green; 
 
    margin: 20px; 
 
    padding: 50px; 
 
} 
 

 
.one { 
 
    height: 300px; 
 
} 
 

 
.two, .three, .four { 
 
    height: 140px; 
 
}

<div class="top"> 
 

 
     <div class="row1"> 
 
      <div class="box one">1</div> 
 
      <div class="box two">2</div> 
 
     </div> 
 
     <div class="row2"> 
 
      <div class="box three">3</div> 
 
      <div class="box four">4</div> 
 
     </div> 
 

 
    </div>

Answer 2

はい、それはCSS Grid Layoutを介して可能だということにフレックスを追加します。

.grid { 
 
    display: grid; 
 
    grid-gap: 10px 30px; 
 
    grid-template-rows: auto 1fr auto; 
 
} 
 

 
/* styles just for demo */ 
 
.grid__item { 
 
    background-color: #e0e0e0; 
 
    font-size: 30px; 
 
    padding: 10px; 
 
} 
 

 
.b, .d { 
 
    align-self: flex-start; 
 
} 
 

 
.a { 
 
    grid-row: 1/span 2; 
 
    /* setting height just for demo */ 
 
    height: 200px; 
 
} 
 

 
.b { 
 
    grid-column: 2; 
 
} 
 

 
.c { 
 
    grid-row: 3; 
 
} 
 

 
.d { 
 
    grid-column: 2; 
 
}

<div class="grid"> 
 
    <div class="grid__item a">1</div> 
 
    <div class="grid__item b">2</div> 
 
    <div class="grid__item c">3</div> 
 
    <div class="grid__item d">4</div> 
 
</div>

IE \ Edgeサポートが必要な場合は、古いグリッド構文を使用する必要があります。追加のグリッド列と行を使用してgrid-gapを偽造することができます。デモ：

.grid { 
 
    display: -ms-grid; 
 
    display: grid; 
 
    -ms-grid-columns: 1fr 30px 1fr; 
 
    grid-template-columns: 1fr 30px 1fr; 
 
    -ms-grid-rows: auto 10px 1fr 10px auto; 
 
    grid-template-rows: auto 10px 1fr 10px auto; 
 
} 
 

 
/* styles just for demo */ 
 
.grid__item { 
 
    background-color: #e0e0e0; 
 
    font-size: 30px; 
 
    padding: 10px; 
 
} 
 

 
.b, .d { 
 
    -ms-grid-row-align: start; 
 
    align-self: flex-start; 
 
} 
 

 
.a { 
 
    -ms-grid-row-span: 3; 
 
    grid-row: 1/span 3; 
 
    /* setting height just for demo */ 
 
    height: 200px; 
 
} 
 

 
.b { 
 
    -ms-grid-column: 3; 
 
    grid-column: 3; 
 
} 
 

 
.c { 
 
    -ms-grid-row: 5; 
 
    grid-row: 5; 
 
} 
 

 
.d { 
 
    -ms-grid-column: 3; 
 
    grid-column: 3; 
 
    -ms-grid-row: 3; 
 
    grid-row: 3; 
 
}

<div class="grid"> 
 
    <div class="grid__item a">1</div> 
 
    <div class="grid__item b">2</div> 
 
    <div class="grid__item c">3</div> 
 
    <div class="grid__item d">4</div> 
 
</div>