柔性盒與框大小：邊框不工作，因爲邊框（顯然）

我試圖用Flexbox從頭開始創建表，並且我想用屬性flex實現rowspan和colspan。但是，這是行不通的，因爲我的邊界，即使邊界框設置柔性盒與框大小：邊框不工作，因爲邊框（顯然）

我的結果是：

/* Styles go here */ 
 

 
*{ 
 
    box-sizing: border-box; 
 
} 
 

 
.table{ 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 100%; 
 
} 
 
.table > caption{ 
 
    align-self: flex-end; 
 
} 
 
.row, .header{ 
 
    display: flex; 
 
    flex-direction: row; 
 
    width: 100%; 
 
    flex: 1; 
 
} 
 

 
.header{ 
 
    font-weight: bold; 
 

 
} 
 

 
.header > .col{ 
 
    justify-content: center; 
 
} 
 

 
.col{ 
 
    display: flex; 
 
    width: 100%; 
 
    border: 1px solid black; 
 
    flex: 1; 
 
} 
 

 
.row > .col{ 
 
    justify-content: flex-end; 
 
}

<div class="table"> 
 
    <caption>Im a title</caption> 
 
    <div class="header"> 
 
    <div class="col">Number 1</div> 
 
    <div class="col">Number 2</div> 
 
    <div class="col">Number 3</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col" style="flex:2;">1</div> 
 
    <div class="col" style="flex:0.5;">2</div> 
 
    <div class="col" style="flex:0.5;">3</div> 
 
    </div> 
 

 
    <div class="row"> 
 
    <div class="col">Yep should be</div> 
 
    <div class="col">5</div> 
 
    <div class="col">6</div> 
 
    </div> 
 

 
    <div class="row"> 
 
    <div class="col">7</div> 
 
    <div class="col">this is a different</div> 
 
    <div class="col">9</div> 
 
    </div> 
 
</div>

A plnkr to my problem

我看到這個問題flex-box box-sizing: border-box not working 和this one（和其他許多人），但他們不是我的具體問題。（以防萬一這是一個角度的組件不應該但可以）。

來源

2017-08-10 Me the scripter

爲什麼不使用表格標籤？ – zynkn

@YoungKyunJin我有風格與角度的問題，https://stackoverflow.com/questions/45595659/html-table-in-conflict-with-angular-component-header-and-component-body/45596300?noredirect=1 ＃comment78152273_45596300 –

– Vega

.col{ 
... 
     margin: 0 -2px -2px 0; 
... 
}

其中2px是您的邊框寬度的兩倍。 Plunker

來源

2017-08-10 09:19:37 Vega

柔性盒與框大小：邊框不工作，因爲邊框（顯然）

回答

相關問題