articles Flexbox/d'ancrage du flotteur en haut

-1

Considérons cet exemple: articles Flexbox/d'ancrage du flotteur en haut

Notez que ce 4 élément est poussé vers le haut au lieu de l'alignement avec le 3ème point. Je ne peux pas y arriver en utilisant le align-items: flex-end de flexbox, ni avec les flotteurs. Je suis conscient d'y parvenir en utilisant la maçonnerie/isotope, mais je voudrais éviter d'utiliser javascript juste pour cette mise en page.

Est-il possible de réaliser en utilisant seulement CSS?

Source

2017-07-20 qtgye

Avez-vous besoin IE/support de bord? –

je pense que vous avez ajouté la ligne séparée, mais n'ajoutez pas de flex à ces lignes - https://jsfiddle.net/ouu6kh61/, si ajouté flex aux lignes https://jsfiddle.net/ouu6kh61/1/ – bhv

Leur est à peu près seulement 2 façons, en utilisant Flexbox, où vous donnez une hauteur au parent ou les enveloppez dans 2 colonnes: https://jsfiddle.net/d0z0p76q/ ... Et en utilisant un wrapper, vous n'avez même pas besoin de Flexbox: https: //jsfiddle.net/rxxommjg/ – LGSon

séparés par des rangées et ajouter à flex que les lignes aussi

.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>

Source

2017-07-20 04:56:47 bhv

Oui, il est possible via 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>

Si vous avez besoin du support IE \ Edge, vous devez utiliser l'ancienne syntaxe de la grille. Vous pouvez simuler grid-gap en utilisant des colonnes et des lignes de grille supplémentaires. Démo:

.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>

Source

2017-07-20 05:06:46

articles Flexbox/d'ancrage du flotteur en haut

Répondre

Questions connexes