По какой причине flex-wrap не работает?

avatar
Nuclear
1 июля 2021 в 16:11
31
1
0

Я просмотрел другие вопросы на этом веб-сайте, и ни один из них не был похож на мою проблему, применяя flex-direction:row; не помогло, применение всех видов ширины (min-width, max-width) также не помогло. Я использую неправильные единицы измерения для стилизации элементов в контейнере?

Моя цель состоит в том, чтобы содержимое помещалось в новую строку. HTML и CSS:

body {
    margin: 0;
    padding: 0;
    background-color: #eeeeee;
}
h1, h5 {
    padding: 10px;
    margin: 0;
}

.pre-header {
    text-align: center;
}

#header-content1-1 {
    font-size: 1.15em;
    margin: 0;
    padding: 0;
}

hr {    
    margin-top: 20px;
    margin-bottom: 3px;
}

.container {
    display: flex;
    background-color: cornflowerblue;
    justify-content:space-between;
    max-width: 80%;
    margin: auto;
    align-items: center;
    height: 40vh;
    flex-wrap: wrap;
    

}

.flex-item {
    background-color: red;
    line-height: 9vh;
    width: 13%;
    text-align:center;
    flex-shrink: 3;

}
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="description" content="Find out who was Avicii!">
      <link rel="stylesheet" href="style.css">
      <title>David</title>
  </head>
  <body>
    <header>
    <div class="pre-header">
        <h1 id="header-content1">Avicii - Tim Bergling</h1>
        <h5 id="header-content1-1">Swedish DJ, remixer, record producer, musician, and songwriter</h5>
    </div>
    </header>
<main>
<hr>
<div class="container">
    <div class="flex-item">E</div>
    <div class="flex-item">R</div>
    <div class="flex-item">I</div>
    <div class="flex-item">N</div>
    <div class="flex-item">N</div>
    <div class="flex-item">N</div>
    <div class="flex-item">N</div>
</div>
</main>

<footer>

</footer>
</body>
</html>
Источник
Tushar Shahi
1 июля 2021 в 16:14
0

У вас есть 7 элементов и ширина составляет 13%. Суммарно до 91%, так что это на той же линии. Изменить ширину на что-то вроде 22%?

Nuclear
1 июля 2021 в 17:40
0

Если я изменю его на 22%, он будет выглядеть не так хорошо, было бы лучше, если бы я использовал другие единицы измерения? Или есть лучший способ изменить ширину содержимого, в то время как веб-сайт остается отзывчивым?

Tushar Shahi
1 июля 2021 в 17:48
0

% ширина в одну сторону. Возможно, вы захотите изменить этот% с помощью медиа-запросов. Вы также можете использовать ширину в пикселях с несколькими медиа-запросами.

Nuclear
1 июля 2021 в 20:53
0

Спасибо большое! Я только что изменил ширину, и есть ли другой способ избежать необходимости достигать 100% при объединении всех элементов и по-прежнему заставлять элемент переноситься в новую строку или это единственный способ?

Tushar Shahi
2 июля 2021 в 05:45
0

Я нашел несколько рабочее решение. Взглянуть.

Ответы (1)

avatar
Tushar Shahi
2 июля 2021 в 05:45
0

Одним из предложенных способов, упомянутых в комментариях, является наличие соответствующей ширины (в вашем случае 22%), чтобы в сумме до 100% некоторые элементы отображались в следующей строке. Можно также добавить поле (например, margin: 0% 5%), чтобы увеличить ширину.

Есть один способ сделать это вручную, но вам придется добавить что-то похожее на разрывы в коде HTML. Вот решение, вдохновленное этим.

<div class="container">
    <div class="flex-item">E</div>
    <div class="flex-item">R</div>
    <div class="flex-item">I</div>
    <div class="flex-item">N</div>
    <div class="flex-item">N</div>
  <div class="flex-item break"></div>
    <div class="flex-item f2">N</div>
    <div class="flex-item f2">N</div>
</div>


.break {
  flex-basis: 100%;
  height: 0;
}

Это использует flex-basis. Взгляните на этот codepen для демонстрации.

Существует также возможность добавить еще один уровень div внутри div-контейнеров в качестве родительских для вашего flex-элемента. Но в целом я бы посоветовал использовать динамическую ширину и не использовать эти методы, поскольку они только добавят сложности, когда ваше количество блоков является динамическим и, вероятно, также потребует некоторых Js.