CSS3 Flexbox for tree data (pedigree)?

I would like to layout a pedigree using CSS3 but nested flexboxes do not work like expected, see http://jsfiddle.net/JPT223/hm6qke7w/2/ If you move the separator to the right, you see that data is already organised into 3 columns. fine. But I don’t know how to implement these columns itself as containers again.

output eg.
tree

from http://thecodeplayer.com/walkthrough/css3-family-tree but from left to right instead of top to bottom and ancestors instead of children.

data

    <pedigree>
    <gen0>    
      <individual>
        <ind_num>1</ind_num>
        <ind_name>Individual</ind_name>
        <ind_birth>19 Nov</ind_birth>
      </individual>
    </gen0>    
    <gen1>
      <individual>
        <ind_num>2</ind_num>
        <ind_name>Father</ind_name>
        <ind_birth>1 Mar</ind_birth>
      </individual>
      <individual>
        <ind_num>3</ind_num>
        <ind_name>Mother</ind_name>
        <ind_birth>10 Sep</ind_birth>
      </individual>
    </gen1>    
    <gen2>
      <individual>
        <ind_num>4</ind_num>
        <ind_name>Grandfather</ind_name>
        <ind_birth>1 Nov</ind_birth>
      </individual>
      <individual>
        <ind_num>5</ind_num>
        <ind_name>Grandmother</ind_name>
        <ind_birth>9 Feb </ind_birth>
      </individual>
      <individual>
        <ind_num>6</ind_num>
        <ind_name>Grandfather</ind_name>
        <ind_birth>5 Jan</ind_birth>
      </individual>
      <individual>
        <ind_num>7</ind_num>
        <ind_name>Grandmother</ind_name>
        <ind_birth>15 Nov</ind_birth>
      </individual>
    </gen2>    
    </pedigree>

css

    pedigree {
      border: 1px solid green;

      /* flex container */
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-direction: row;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-align-content: flex-start;
      -ms-flex-line-pack: start;
      align-content: flex-start;
      -webkit-align-items: flex-start;
      -ms-flex-align: start;
      align-items: flex-start;
    }

    individual {
      border: 1px solid red;

      /* flex item */
      -webkit-order: 0;
      -ms-flex-order: 0;
      order: 0;
      -webkit-flex: 0 1 auto;
      -ms-flex: 0 1 auto;
      flex: 0 1 auto;
      -webkit-align-self: auto;
      -ms-flex-item-align: auto;
      align-self: auto;

    /*
      position: absolute;
      top: 50%;
      transform: translateY(-50%);*/
    }

    gen0 gen1 gen2 gen3 {
      border: 1px solid blue;

      /* flex item */
      -webkit-order: 0;
      -ms-flex-order: 0;
      order: 0;
      -webkit-flex: 0 1 auto;
      -ms-flex: 0 1 auto;
      flex: 0 1 auto;
      -webkit-align-self: center;
      -ms-flex-item-align: center;
      align-self: center;

      /* flex container */
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-align-content: flex-start;
      -ms-flex-line-pack: start;
      align-content: flex-start;
      -webkit-align-items: flex-start;
      -ms-flex-align: start;
      align-items: flex-start;
    }

    ind_num ind_name ind_birth ind_marriage ind_death {
      border:none;
      float: none;
    }

    ind_name {
      font-weight: bold;
    }


Source: css3

Leave a Reply