0

I'm wanting to have a number of elements stacked, and when an element is clicked, content is revealed - which pushes the element below it down

image example

Codepen for example here -
http://codepen.io/ashconnolly/pen/bEZzmj?editors=1100

is this possible in flexbox? I've seen masonry but not sure if it can do what I need it to as it doesn't seem to have an ordering system, nor do I know if changing heights of elements and rerunning masonry is efficient.

I could manually select every element below it (with nth child) and do a transform:translateY() to move it down, and do this for every responsive layout (and add margin to the bottom of the container). But I suspect there is a better way with less manual tweaking.

Important factors
- in the order seen in the Dom (could have lots of elements 20)
- the columns amount / block width to change responsively
- can change height but keep their respective column like order

html -

<div class="box">1<div class="text">Lorem Ipsum  Lorem Ipsum  Lorem Ipsum  Lorem Ipsum Lorem Ipsum  Lorem Ipsum  Lorem Ipsum </div></div>
<div class="box">2<div class="text">Lorem Ipsum  Lorem Ipsum  Lorem Ipsum  Lorem Ipsum Lorem Ipsum  Lorem Ipsum  Lorem Ipsum </div></div>
<div class="box">3<div class="text">Lorem Ipsum  Lorem Ipsum  Lorem Ipsum  Lorem Ipsum Lorem Ipsum  Lorem Ipsum  Lorem Ipsum </div></div>
<div class="box">4<div class="text">Lorem Ipsum  Lorem Ipsum  Lorem Ipsum  Lorem Ipsum Lorem Ipsum  Lorem Ipsum  Lorem Ipsum </div></div>
<div class="box">5<div class="text">Lorem Ipsum  Lorem Ipsum  Lorem Ipsum  Lorem Ipsum Lorem Ipsum  Lorem Ipsum  Lorem Ipsum </div></div>
<div class="box">6<div class="text">Lorem Ipsum  Lorem Ipsum  Lorem Ipsum  Lorem Ipsum Lorem Ipsum  Lorem Ipsum  Lorem Ipsum </div></div>

css-

body { margin: 0; padding: 0; width: 100%; }

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.box {width:33%; height:200px; position:relative;
    background:salmon; float:left;border:10px solid grey;

    &:nth-child(1) {background:red;}
    &:nth-child(2) {background:blue;}
    &:nth-child(3) {background:green;}
    &:nth-child(4) {background:orange;}
    &:nth-child(5) {background:brown;}
    &:nth-child(6) {background:yellow;}

    &:nth-child(2) .text {display:block;color:white;}

    .text {display:none; position: absolute; top:100%;z-index:2;width:100%; background:blue; border: 1px solid grey}
}

@media (max-width:600px) {
    .box {width:50%;}   
}
Ash
  • 228
  • 6
  • 21
  • it could with flexbox as column, but an height is required to break into columns http://codepen.io/anon/pen/PZgoBL?editors=0100 – G-Cyrillus Feb 16 '16 at 19:37
  • @Paulie_D - code added! :) – Ash Feb 17 '16 at 09:18
  • @GCyrillus - thanks for the help, but they need to go from left to right, in order, and be able to change height. – Ash Feb 17 '16 at 09:18
  • Then you probably need - http://stackoverflow.com/questions/8470070/how-to-create-grid-tile-view-with-css – Paulie_D Feb 17 '16 at 12:00
  • @Ash if you need to draw them by rows you understand that if one grows, the whole row does and next row is pushed down, flex, table, inline-block will behave the same. column-css or flex-column are closer to your needs. Mansonry takes in account size of container once to build the grid, if containers are resized later, others will not be pushed – G-Cyrillus Feb 17 '16 at 12:40

0 Answers0