CSS：在柔印盒之間繪製線條

我成功爲我的系譜創建了嵌套柔性盒佈局。但是，我如何畫線？這是可能的使用CSS3，見http://thecodeplayer.com/walkthrough/css3-family-tree但是這個例子沒有解釋任何東西，我不能讓它與我的代碼一起工作。CSS：在柔印盒之間繪製線條

我不確定我的方法是否有意義：它是flexbox中排列成行的flexbox列。

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:nth-child(2n) { 
 
    background-color: #FFE6E6; 
 
} 
 

 
individual { 
 
    margin: 5px; 
 
    border: 1px solid red; 
 
    background-color: #E6E6FF; 
 

 
    /* 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: stretch; 
 
    -ms-flex-item-align: stretch; 
 
    align-self: stretch; 
 
} 
 

 
individual:before, .individual:after{ 
 
    content: ''; 
 
    position: absolute; top: 0; right: 50%; 
 
    border-top: 1px solid #ccc; 
 
    width: 50%; height: 20px; 
 
} 
 
individual:after{ 
 
    right: auto; left: 50%; 
 
    border-left: 1px solid #ccc; 
 
} 
 

 

 
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: stretch; 
 
    
 
    /* 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; 
 
    justify-content: space-around; 
 
} 
 

 
ind_name, ind_birth, ind_marriage, ind_death { 
 
    border:none; 
 
    display:block; 
 
} 
 

 
ind_name { 
 
    font-weight: bold; 
 
} 
 

 
ind_birth:before { 
 
    content: "* "; 
 
} 
 

 
ind_marriage:before { 
 
    content: "oo "; 
 
} 
 

 
ind_death:before { 
 
    content: "+ "; 
 
}

<html> 
 
<body> 
 
    <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> 
 
</body> 
 
</html>

來源

2015-09-09 JPT

我認爲這裏的正確的方法是使用SVG而不是你正在使用的Flexbox的項目。這仍然可以讓您在顯示屏上（通過CSS）和動畫/事件進行很多控制，同時確實可以繪製線條。儘管如此，輔助功能可能會更加複雜。

來源

2015-09-15 07:33:48 manuBriot

OP可以查看使用d3.js繪製家族樹。 – Terry

CSS：在柔印盒之間繪製線條

回答

相關問題