БЛОГ НА HUSL


flexbox, не могу выровнить блоки

Автор вопроса: Millennium

В коде элементы никак не хотят стоять в 2 ряда по 4 колонки, никак не понимаю что делать, хочу добиться результата как на картинке.результат 

.container_2 {
  width: 100%;
  max-width: 80%;
  margin-left: 100px;
}

.structure {
  background-color: #2c69a8;
  width: 100%;
  height: 30px;
  position: relative;
}

.structure p {
  text-align: center;
  color: #fff;
  padding-top: 5px;
  font-size: 18px;
  font-family: Franklin Gothic Demi;
}

.structure-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.structure-linear {
  width: 19%;
  margin-bottom: 20px;
}

.structure-text {
  padding: 20px;
  border: 2px solid #2c69a8;
}

.structure-text img {
  width: 220px;
  max-width: 100%;
  height: auto;
}

.structure-text p {
  line-height: 25px;
  font-size: 17px;
  font-family: Franklin Gothic Book;
}

.structure-linear:hover {
  color: #fff;
  background-color: #6995c1;
}
<section>
  <div class="container_2">
    <div class="border">
      <div class="structure">
        <p>Структура</p>
      </div>
      <div class="structure-flex">
        <div class="structure-linear">
          <div class="structure-text">
            <img src="/images/raznoe/raznoe1.jpg" alt="">
            <p>Tempora incidunt r sit amet, cvbfbconsectetur adipisicing elit, sed do eiusmod tempor incididunt u cvbfbconsectetur adipisicing elit.</p>
          </div>
        </div>
      </div>

      <div class="structure-flex">
        <div class="structure-linear">
          <div class="structure-text">
            <img src="/images/raznoe/raznoe1.jpg" alt="">
            <p>Tempora incidunt r sit amet, cvbfbconsectetur adipisicing elit, sed do eiusmod tempor incididunt u cvbfbconsectetur adipisicing elit.</p>
          </div>
        </div>
      </div>

      <div class="structure-flex">
        <div class="structure-linear">
          <div class="structure-text">
            <img src="/images/raznoe/raznoe1.jpg" alt="">
            <p>Tempora incidunt r sit amet, cvbfbconsectetur adipisicing elit, sed do eiusmod tempor incididunt u cvbfbconsectetur adipisicing elit.</p>
          </div>
        </div>
      </div>

      <div class="structure-flex">
        <div class="structure-linear">
          <div class="structure-text">
            <img src="/images/raznoe/raznoe1.jpg" alt="">
            <p>Tempora incidunt r sit amet, cvbfbconsectetur adipisicing elit, sed do eiusmod tempor incididunt u cvbfbconsectetur adipisicing elit.</p>
          </div>
        </div>
      </div>

      <div class="structure-flex">
        <div class="structure-linear">
          <div class="structure-text">
            <img src="/images/raznoe/raznoe1.jpg" alt="">
            <p>Tempora incidunt r sit amet, cvbfbconsectetur adipisicing elit, sed do eiusmod tempor incididunt u cvbfbconsectetur adipisicing elit.</p>
          </div>
        </div>
      </div>

      <div class="structure-flex">
        <div class="structure-linear">
          <div class="structure-text">
            <img src="/images/raznoe/raznoe1.jpg" alt="">
            <p>Tempora incidunt r sit amet, cvbfbconsectetur adipisicing elit, sed do eiusmod tempor incididunt u cvbfbconsectetur adipisicing elit.</p>
          </div>
        </div>
      </div>

      <div class="structure-flex">
        <div class="structure-linear">
          <div class="structure-text">
            <img src="/images/raznoe/raznoe1.jpg" alt="">
            <p>Tempora incidunt r sit amet, cvbfbconsectetur adipisicing elit, sed do eiusmod tempor incididunt u cvbfbconsectetur adipisicing elit.</p>
          </div>
        </div>
      </div>

      <div class="structure-flex">
        <div class="structure-linear">
          <div class="structure-text">
            <img src="/images/raznoe/raznoe1.jpg" alt="">
            <p>Tempora incidunt r sit amet, cvbfbconsectetur adipisicing elit, sed do eiusmod tempor incididunt u cvbfbconsectetur adipisicing elit.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


Источник

Ответы (1 шт):

Автор решения: Фесс Лаеда

Для начала перенесите блоки с классом structure-flex в блок с одним классом, к примеру test которому установим стили:

  display: flex;
  flex-direction: row;
  width: 100%;
  flex-wrap: wrap;

После чего необходимо подобрать ширину карточки с классом structure-flex и добавить свойство с ограничением максимальной ширины, в данном случае max-width: 150px;.

После чего карточки будут отображаться как на изображении в вопросе.

.container_2 {
  width: 100%;
  max-width: 80%;
  margin-left: 100px;
}

.structure {
  background-color: #2c69a8;
  width: 100%;
  height: 30px;
  position: relative;
}

.structure p {
  text-align: center;
  color: #fff;
  padding-top: 5px;
  font-size: 18px;
  font-family: Franklin Gothic Demi;
}

.structure-flex {
  display: flex;
  width: 100%;
  max-width: 150px;
  flex-wrap: wrap;
}

.structure-linear {
  margin-bottom: 20px;
}

.structure-text {
  padding: 20px;
  border: 2px solid #2c69a8;
}

.structure-text img {
  width: 220px;
  max-width: 100%;
  height: auto;
}

.structure-text p {
  line-height: 25px;
  font-size: 17px;
  font-family: Franklin Gothic Book;
}

.structure-linear:hover {
  color: #fff;
  background-color: #6995c1;
}

.test {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex-wrap: wrap;
}
<section>
  <div class="container_2">
    <div class="border">
      <div class="structure">
        <p>Структура</p>
      </div>
      <div class="test">
        <div class="structure-flex">
          <div class="structure-linear">
            <div class="structure-text">
              <img src="/images/raznoe/raznoe1.jpg" alt="">
              <p>Tempora incidunt r sit amet, cvbfbconsectetur adipisicing elit, sed do eiusmod tempor incididunt u cvbfbconsectetur adipisicing elit.</p>
            </div>
          </div>
        </div>
        <div class="structure-flex">
          <div class="structure-linear">
            <div class="structure-text">
              <img src="/images/raznoe/raznoe1.jpg" alt="">
              <p>Tempora incidunt r sit amet, cvbfbconsectetur adipisicing elit, sed do eiusmod tempor incididunt u cvbfbconsectetur adipisicing elit.</p>
            </div>
          </div>
        </div>
        <div class="structure-flex">
          <div class="structure-linear">
            <div class="structure-text">
              <img src="/images/raznoe/raznoe1.jpg" alt="">
              <p>Tempora incidunt r sit amet, cvbfbconsectetur adipisicing elit, sed do eiusmod tempor incididunt u cvbfbconsectetur adipisicing elit.</p>
            </div>
          </div>
        </div>
        <div class="structure-flex">
          <div class="structure-linear">
            <div class="structure-text">
              <img src="/images/raznoe/raznoe1.jpg" alt="">
              <p>Tempora incidunt r sit amet, cvbfbconsectetur adipisicing elit, sed do eiusmod tempor incididunt u cvbfbconsectetur adipisicing elit.</p>
            </div>
          </div>
        </div>
        <div class="structure-flex">
          <div class="structure-linear">
            <div class="structure-text">
              <img src="/images/raznoe/raznoe1.jpg" alt="">
              <p>Tempora incidunt r sit amet, cvbfbconsectetur adipisicing elit, sed do eiusmod tempor incididunt u cvbfbconsectetur adipisicing elit.</p>
            </div>
          </div>
        </div>
        <div class="structure-flex">
          <div class="structure-linear">
            <div class="structure-text">
              <img src="/images/raznoe/raznoe1.jpg" alt="">
              <p>Tempora incidunt r sit amet, cvbfbconsectetur adipisicing elit, sed do eiusmod tempor incididunt u cvbfbconsectetur adipisicing elit.</p>
            </div>
          </div>
        </div>
        <div class="structure-flex">
          <div class="structure-linear">
            <div class="structure-text">
              <img src="/images/raznoe/raznoe1.jpg" alt="">
              <p>Tempora incidunt r sit amet, cvbfbconsectetur adipisicing elit, sed do eiusmod tempor incididunt u cvbfbconsectetur adipisicing elit.</p>
            </div>
          </div>
        </div>
        <div class="structure-flex">
          <div class="structure-linear">
            <div class="structure-text">
              <img src="/images/raznoe/raznoe1.jpg" alt="">
              <p>Tempora incidunt r sit amet, cvbfbconsectetur adipisicing elit, sed do eiusmod tempor incididunt u cvbfbconsectetur adipisicing elit.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.