<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
<title>Flexbox test 1</title>
</head>
<body>
<h1>Flexbox test 1</h1>
<div id="t1" class="test">
<table>
<thead>
<tr>
<th>Prénom</th>
<th>Nom</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Marcel</td>
<td>Aimé</td>
<td>Voir | Editer</td>
</tr>
<tr>
<td>Robert</td>
<td>Pirate</td>
<td>Voir | Editer</td>
</tr>
</tbody>
</table>
</div>
<div id="t2" class="test">
<div class="table">
<div class="row">
<div class="cell">ID </div>
<div class="cell">Nr </div>
<div class="cell">Header 1 </div>
<div class="cell span4-5"> Header 2 </div>
</div>
<div class="row">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
</div>
<div class="row">
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell span3-5">Content</div>
</div>
<div class="row">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell span3-4">Content</div>
<div class="cell">Content</div>
</div>
</div>
</div>
<div id="t3" class="test">
<div class="container">
<div class="item">Left<br>high</div>
<div class="item">Middle/Left - is wider</div>
<div class="item">Middle/Right</div>
<div class="item">Right</div>
<div class="item">Left</div>
<div class="item">Middle/Left</div>
<div class="item">Middle/Right</div>
<div class="item">Right</div>
<div class="item">Left</div>
<div class="item">Middle/Left</div>
<div class="item">Middle/Right<br>higher<br>higher</div>
<div class="item">Right</div>
</div>
</div>
<div id="t4" class="test">
<div class="thegrid">
<!-- [HEAD] -->
<div class="head">Column 1</div>
<div class="head">Column 2</div>
<div class="head">Column 3</div>
<div class="head">Column 4</div>
<!-- [ROWS] -->
<div class="cell">Row 1 col 1</div>
<div class="cell">Row 1 col 2</div>
<div class="cell">Row 1 col 3</div>
<div class="cell">Row 1 col 4</div>
<!-- [ROWS] -->
<div class="cell">Row 2 col 1</div>
<div class="cell">Row 2 col 2</div>
<div class="cell">Row 2 col 3</div>
<div class="cell">Row 2 col 4</div>
</div>
</div>
</body>
</html>