[Web] CSS Flex to Table

CSS: Flex
w3schools CSS Flexbox

基本教學可參考這兩篇

Flexbox Froggy

圖解：CSS Flex 屬性一點也不難

簡介：用 flex 表現出 table 的格式

CSS 設定

<style>
.rowFlex {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
}
 
.rowFlex .item,
.rowFlex .doubleItem {
    /*border: 1px solid #32383e;*/
    border-color: #32383e;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    text-align: center;
}
 
.item {
    flex: 1 0 10%;
}
 
.doubleItem {
    flex: 2 0 20%;
}
 
.hiddenItem {
    flex: 1 0 10%;
}
 
.bold {
    font-weight: bold;
}
 
.divTop {
 width: 50%;
}
 
</style>

正常 Table

1

2

3

4

<div class='divTop'>
 <div class='rowFlex'>
     <div class='item bold'>1</div>
     <div class='item bold'>2</div>
 </div>
 <div class='rowFlex'>
     <div class='item'>3</div>
     <div class='item'>4</div>
 </div>
</div>

Row Span Table

1

3

4

<div class='divTop'>
 <div class='rowFlex'>
     <div class='doubleItem bold'>1</div>
 </div>
 <div class='rowFlex'>
     <div class='item'>3</div>
     <div class='item'>4</div>
 </div>
</div>

Column Span Table

1

2

4

<div class='divTop'>
 <div class='rowFlex'>
     <div class='item bold'>1</div>
     <div class='item'>
   <div class='rowFlex'>
    <div class='item'>2</div>
   </div>
   <div class='rowFlex'>
    <div class='item'>4</div>
   </div>
  </div>
 </div>
</div>

Sparse Table

1

4

<div class='divTop'>
 <div class='rowFlex'>
     <div class='doubleItem bold'>1</div>
 </div>
 <div class='rowFlex'>
     <div class='hiddenItem'></div>
     <div class='item'>4</div>
 </div>
</div>

參考

圖解：CSS Flex 屬性一點也不難
Flexbox in CSS
Flexbox Froggy
深入解析 CSS Flexbox