membuat tabel presisi dengan flex

<!DOCTYPE html>
<html>
<title>Misael</title>
<head>
<style type="text/css">
.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;

    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}

.flex-item {
    background: red;
    width: 200px;
    height: 200px;
    margin: 20px;
    text-align: center;
}
</style>
</head>
<body>

            <ul class="flex-container">
                <li class="flex-item">
                    <h1>TEST</h1>
                </li>
                <li class="flex-item">
                    <h1>TEST</h1>
                </li>
                <li class="flex-item">
                    <h1>TEST</h1>
                </li>
                <li class="flex-item">
                    <h1>TEST</h1>
                </li>
                <li class="flex-item">
                    <h1>TEST</h1>
                </li>
                <li class="flex-item">
                    <h1>TEST</h1>
                </li>
            </ul>


</body>
</html>