Неправильное использование Flex-Wrap?

Question

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

Мой вопрос прост;

• Это правильное использование?
• Если да, то, что я могу сделать не так, что не дает мне результат, к которому я стремлюсь?
• Если нет, что бы вы порекомендовалиЯ смотрю на использование?

Ниже приведен фрагмент раздела, рассматриваемый div помечен subscriber-panel, и следует помнить, что высота не обязательно точна в фрагменте, но все равноЯ просто хочу, чтобы меня указали в правильном направлении!

Заранее спасибо, пожалуйста, прокомментируйте, если необходима дополнительная информация.

/* Content Section */

#content {
  height: 50vh;
}

#content-container {
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
}

#content-container>div {
  flex: 1;
  text-align: center;
}

.panel {
  background: rgba(0, 0, 0, .6);
}

#subscriber-panel {}

.subscriber {
  display: flex;
  flex-wrap: wrap;
}

.username {
  flex: 1;
  font-size: 120%;
}

.subage {
  flex: 1;
  font-size: 80%;
}

#clips-panel {}

#box3 {}

<section id="content">
  <div id="content-container" class="container">
    <div id="subscriber-panel" class="panel">
      <h1>Subscribers</h1>
      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>



    </div>
    <div id="clips-panel" class="panel">
      <h1>Trending Clips</h1>
    </div>
    <div id="box3" class="panel">
      <h1>Box 3</h1>
    </div>
  </div>
</section>

Пока я продолжаю поиск, кажется, что отсутствие max-width определенно было проблемой, но с момента установки 200px оно просто кажется, что естьбольшое поле в конце subscriber div, которое не дает контейнеру достаточно места для упаковки предметов.

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

Answer 1

С W3School Свойство flex-wrap указывает, следует ли переносить гибкие элементы. items означает дочерние элементы согнутого контейнера.

ВсеВы должны сделать это:

#subscriber-panel{
  display:flex;
  flex-wrap:wrap;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* Content Section */

#content {
  height: 50vh;
}

#content-container {
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
}

#content-container>div {
  flex: 1;
  text-align: center;
}

.panel {
  background: rgba(0, 0, 0, .6);
}



.subscriber {
  display: flex;
}

.username {
  flex: 1;
  font-size: 120%;
}

.subage {
  flex: 1;
  font-size: 80%;
}

/* Added */

#subscriber-panel{
  display:flex;
  flex-wrap:wrap;
}
h1{
  width:100%;
}

<section id="content">
  <div id="content-container" class="container">
    <div id="subscriber-panel" class="panel">
      <h1>Subscribers</h1>
      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png" style="height:70px;width:70px;"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png" style="height:70px;width:70px;"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png" style="height:70px;width:70px;"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png" style="height:70px;width:70px;"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png" style="height:70px;width:70px;"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png" style="height:70px;width:70px;"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png" style="height:70px;width:70px;"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png" style="height:70px;width:70px;"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>



    </div>
    <div id="clips-panel" class="panel">
      <h1>Trending Clips</h1>
    </div>
    <div id="box3" class="panel">
      <h1>Box 3</h1>
    </div>
  </div>
</section>

Answer 2

Это не совсем то, как я собирался выровнять, поэтому, если у кого-то есть понимание того, как я могу добиться того, что было изложено в исходном чертеже, тобыло бы здорово, но на данный момент он функционален и работает для меня, так что ради заполнителя это нормально.

Я просто упаковал содержимое flex в новый контейнер.

#content {
  height: 50vh;
}

#content-container {
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
}

#content-container>div {
  flex: 1;
  text-align: center;
}

.panel {
  background: rgba(0, 0, 0, .6);
}

#subscriber-panel {
  height: 100%;
  width: auto;
  margin: 0;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  max-width: 600px;
  height: 400px;
  justify-content: left;
}

.subscriber {
  display: inline-block;
  flex: 1;
}

.sub-avatar {
  margin: 0;
}

.username {
  flex: 1;
  font-size: 120%;
  margin: 0;
}

.subage {
  flex: 1;
  font-size: 80%;
  margin: 0;
}

<div id="content-container" class="container">
  <div id="subscriber-panel" class="panel">
    <h1>Subscribers</h1>
    <div class="flex-container">
      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>
      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>
      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>
      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>
      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>
    </div>
  </div>

Во фрагменте могут быть некоторые избыточности, но должно быть достаточно ясно, что я сделал.