HTML5 CSS 3 Flexbox - PullRequest
Новая
       0

HTML5 CSS 3 Flexbox

0 голосов
/ 25 августа 2018

Я пытаюсь создать веб-страницу в HTML5 и CSS3 с помощью PHP и Javascript. Я хотел бы отображать изображения с использованием flexbox - в 3 строки. Каждая строка должна содержать 4 столбца.

Вот мой код: 

<div class="row">
<?php echo "<img   src='assets/img/termekek/$image.png' class='column'   
 >";?>

и КСС 

 .row{
      display:flex;
     }
   .column{
     flex:33.33%;
     padding:5px
     }

Но это не дает желаемого результата.

Может ли кто-нибудь мне помочь?

1 Ответ

0 голосов
/ 25 августа 2018

Я думаю, вам просто не хватает контейнера для строки и столбцов.Контейнер должен иметь display:flex и flex-direction.

Вот пример: 

<body>
    <div class="container">
        <div class="row">
            <div class="column">
            </div>
        </div>
        <div class="row">
            <div class="column">
            </div>
        </div>
        <div class="row">
            <div class="column">
            </div>
        </div>
    </div>
</body>

И CSS будет: 

.container {
    display: flex;
    flex-direction: column;
    height: 100px;
    width: 100%;
}

.row {
    display: flex;
    flex: 1,
    flex-direction: row;
    border: 1px solid black;
    height: inherit;
    width: inherit;
}

.column {
    flex: 1;
    border: 1px solid orange;
}

Пожалуйста, игнорируйте свойства border, height и width.Они использовались для лучшей визуализации элементов на веб-странице

В результате вышло бы контейнер с тремя строками.Теперь, если вы добавите три <div class="column"> в <div class="row">, каждая строка будет содержать четыре столбца.

Есть еще один способ получить тот же шаблон, который включает в себя смену flex-направления между .row и.container.Однако он станет столбцом строк вместо строки столбцов .Просто небольшая деталь, о которой нужно подумать, пока вы создаете свои элементы.

Кстати, я привык использовать flex, следуя этому руководству: https://css -tricks.com / snippets / css / a-руководство к Flexbox / .Взгляните и поиграйте с ним!

Удачного кодирования!:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...