Замена таблиц на flexbox

27.12.2018

Давно на смену табличной верстке пришли другие технологии, но иногда ее еще используют т.к. "под рукой нет простого и понятного примера замены".

Поэтому ниже простая демонстрация замены таблицы на flexbox.

Для начала пример обыкновенной таблицы:

 
<table>
    <tr>
        <td>Left 1</td>
        <td>Center 1</td>
        <td>Right 1</td>            
    </tr>
    <tr>
        <td>Left 2</td>
        <td>Center 2</td>
        <td>Right 2</td>            
    </tr>
    <tr>
        <td>Left 3</td>
        <td>Center 3</td>
        <td>Right 3</td>            
    </tr>
</table>

Пример таблицы с привычной для DIV'ов группировкой элементов

 
<style type="text/css">
.soflex1
{
    flex-direction: row;
    display: flex;
    justify-content: space-between;
}
</style>

<div class="soflex1">
    <div>
        <div>Left 1</div>
        <div>Left 2</div>
        <div>Left 3</div>
    </div>
    <div>
        <div>Center 1</div>
        <div>Center 2</div>
        <div>Center 3</div>
    </div>
    <div>
        <div>Right 1</div>
        <div>Right 2</div>
        <div>Right 3</div>
    </div>
</div>

Пример таблицы с привычной для TABLE'ов группировкой элементов

 
<style type="text/css">
.soflex2 > div
{
    display: flex;
    justify-content: space-between;
}
</style>

<div class="soflex2">
    <div>
        <div>Left 1</div>
        <div>Center 1</div>
        <div>Right 1</div>
    </div>
    <div>
        <div>Left 2</div>
        <div>Center 2</div>
        <div>Right 2</div>
    </div>
    <div>
        <div>Left 3</div>
        <div>Center 3</div>
        <div>Right 3</div>
    </div>
</div>

Весь код разом (без justify-content: space-between;):

01.html (Download)

 <!DOCTYPE HTML>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title></title>

<style type="text/css">
table td,
.soflex1 div div,
.soflex2 div div
{
    border: 1px solid #a9a6a3;
    padding: 3px;
}


.soflex1
{
    flex-direction: row;
    display: flex;
}

.soflex2 > div
{
    display: flex;

}
</style>

</head>
<body>
<div id="soTest">
    <table>
        <tr>
            <td>Left 1</td>
            <td>Center 1</td>
            <td>Right 1</td>            
        </tr>
        <tr>
            <td>Left 2</td>
            <td>Center 2</td>
            <td>Right 2</td>            
        </tr>
        <tr>
            <td>Left 3</td>
            <td>Center 3</td>
            <td>Right 3</td>            
        </tr>
    </table>

    <hr />
    
    <div class="soflex1">
        <div>
            <div>Left 1</div>
            <div>Left 2</div>
            <div>Left 3</div>
        </div>
        <div>
            <div>Center 1</div>
            <div>Center 2</div>
            <div>Center 3</div>
        </div>
        <div>
            <div>Right 1</div>
            <div>Right 2</div>
            <div>Right 3</div>
        </div>
    </div>

    <hr />
    
    <div class="soflex2">
        <div>
            <div>Left 1</div>
            <div>Center 1</div>
            <div>Right 1</div>
        </div>
        <div>
            <div>Left 2</div>
            <div>Center 2</div>
            <div>Right 2</div>
        </div>
        <div>
            <div>Left 3</div>
            <div>Center 3</div>
            <div>Right 3</div>
        </div>
    </div>
    
</div>


</body>
</html>

Бонус

Иногда нужно повлиять на отображение "колонок" в зависимости от ширины экрана:

 
.soflex111
{
    flex-direction: row;
    display: flex;
    justify-content: space-between;
}

@media only screen and (max-width: 800px)
{
    .soflex111
    {
        flex-direction: column;
    }
}

Категории: HTML, CSS

Пометки: flexbox table