Использование Flex Box для упорядочивания материала в блоке HTML CSS

Я пытаюсь сделать так, чтобы изображения появлялись в моей готовой коробке, которую я создал. Прямо сейчас они слишком широкие и отображаются за пределами моей ширины 50em. Кроме того, они довольно большие по высоте, и я не знаю, является ли это просто изменением изображения или кода. Я использую для этого флексбокс.

Прямо сейчас, без изображений, кажется, что все они находятся в одной строке от использования переноса, но как только изображения добавлены, он перестает работать правильно.

main{
    width:50em;
    border-style:solid;
    display:flex;
}

.images{
    display: flex;
    flex-direction: row;
    flex: 1 1 25em;
    flex-wrap: wrap;
    flex-grow: 1;
}

<!DOCTYPE html>
<html>

<head>
    <!-- A meta element naming the Unicode character set you want the browser to use (UTF-8). -->
    <meta charset = "UTF-8">
    <!-- A link to reset -->
    <link rel = "stylesheet" type = "text/css" href = "https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <link rel = "stylesheet" href = "flex.css">
</head>
    
<body>
    <main class = "wrapper">
        
        <header id = "images">
            <img src = "student-misc-02.jpg" alt = "student1">
            <img src = "student-misc-06.jpg" alt = "student1">
            <img src = "student-misc-08.jpg" alt = "student1">
            <img src = "student-misc-12.jpg" alt = "student1">
            <img src = "student-misc-19.jpg" alt = "student1">
            <img src = "student-misc-20.jpg" alt = "student1">
        </header>    
        
    </main>
    
</body>

</html>

вам нужно 3 столбца? И вы использовали #images в качестве идентификатора в заголовке HTML. Но используют как класс .images в коде CSS.

— 02.05.2019 20:55

@IcaroHeimig Я пытался сделать по 3 картинки в строке, как вы сделали ниже.

— 02.05.2019 21:08

html css flexbox

02.05.2019 20:34

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я исправил код CSS, чтобы он соответствовал вашему коду HTML. Кроме того, в некоторых из ваших правок вы отображали как 3 столбца, последнее правило CSS пытается воспроизвести макет этих 3 столбцов.

main {
  width: 50em;
  border-style: solid;
  display: flex;
}

/* fix the selector to match yout html code using id, not class */
#images {
  display: flex;
  flex-direction: row;
  flex: 1 1 25rem;
  flex-wrap: wrap;
  flex-grow: 1;
}

/* If you need the three columns as your original question */
#images img {
  width: 33%; 
  margin: auto;
}

<!DOCTYPE html>
<html>

<head>
  <!-- A meta element naming the Unicode character set you want the browser to use (UTF-8). -->
  <meta charset = "UTF-8">
  <!-- A link to reset -->
  <link rel = "stylesheet" type = "text/css" href = "https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel = "stylesheet" href = "flex.css">
</head>

<body>
  <main class = "wrapper">

    <header id = "images">
      <img src = "http://lorempixel.com/400/200" alt = "student1">
      <img src = "http://lorempixel.com/400/200" alt = "student1">
      <img src = "http://lorempixel.com/400/200" alt = "student1">
      <img src = "http://lorempixel.com/400/200" alt = "student1">
      <img src = "http://lorempixel.com/400/200" alt = "student1">
      <img src = "http://lorempixel.com/400/200" alt = "student1">
    </header>

    <section class = "title">
      <!--<h1>XD Rountable 2019 Event Calendar</h1>-->
    </section>

    <footer>
    </footer>

  </main>

</body>

</html>

02.05.2019 21:02

Другие вопросы по теме

Настроить Viewbox так, чтобы встроенный SVG «привязывался» к размеру содержащего его элемента?

Абзацы перекрываются с сеткой css

Bootstrap: пусть текст обтекает поле ввода текста

Как я могу сделать прямоугольники, заполненные определенным процентом синего, используя css или bootstrap 3?

Увеличение высоты в направлении сверху

Как центрировать слайдер по вертикали и горизонтали посередине страницы - CSS, HTML

Нежелательный столбец CSS Grid добавляется автоматически

Css пунктирная линия рядом с div?

Как правильно расположить меню по центру?

Table Odd Even tr backgroundcolor для определенного класса

Использование Flex Box для упорядочивания материала в блоке HTML CSS

Ответы 1

Другие вопросы по теме

Похожие вопросы