Гибкие элементы не будут правильно оборачиваться и сжиматься - PullRequest
Новая
       14

Гибкие элементы не будут правильно оборачиваться и сжиматься

1 голос
/ 09 марта 2019

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

.new-collection-wrapper {
  background-color: #f1f1f1;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.new-collection-card {
  width: 80%;
  margin: 5em 0;
  display: flex;
  align-items: center;
}

.new-collection-card-img img {
  height: 400px;
  width: auto;
}

.new-collection-content {
  height: 400px;
  color: #f1f1f1;
  background-color: #111111;
  padding: 0 3em;
}

.new-collection-content h3 {
  font-size: 2.5em;
  font-weight: 300;
  text-transform: uppercase;
  line-height: 1.3;
  margin-bottom: .2em;
}

.new-collection-content p {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: .8em;
  letter-spacing: 1px;
}


/* layout for medium screens */

@media screen and (min-width: 810px) {
  .new-collection-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
<main class="new-collection-wrapper">
  <section class="new-collection-card">
    <div class="new-collection-card-img">
      <img src="http://www.petmania.ie/images/default-source/cat/petmania-kitten-1.jpg?sfvrsn=4" alt="new collection" alt="new collection">
    </div>
    <div class="new-collection-content">
      <h3>AW19 collection</h3>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporis, a sequi molestias nam odit sunt. Unde dolore fugit suscipit amet.</p>
      <a href="#" class="call-to-action"><span>JOIN</span></a>
    </div>
  </section>
  <!-- End of New Collection -->
</main>

1 Ответ

1 голос
/ 09 марта 2019

Измените flex-direction для небольших экранов (обратите внимание, что медиазапрос был изменен на @media screen and (max-width: 810px)) на new-collection-card на столбец - см. Демонстрацию ниже: 

.new-collection-wrapper {
  background-color: #f1f1f1;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.new-collection-card {
  width: 80%;
  margin: 5em 0;
  display: flex;
  align-items: center;
}

.new-collection-card-img img {
  height: 400px;
  width: auto;
}

.new-collection-content {
  height: 400px;
  color: #f1f1f1;
  background-color: #111111;
  padding: 0 3em;
}

.new-collection-content h3 {
  font-size: 2.5em;
  font-weight: 300;
  text-transform: uppercase;
  line-height: 1.3;
  margin-bottom: .2em;
}

.new-collection-content p {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: .8em;
  letter-spacing: 1px;
}


@media screen and (max-width: 810px) {
  .new-collection-card { /* change the flex direction */
    flex-direction: column;
  }
}
<main class="new-collection-wrapper">
  <section class="new-collection-card">
    <div class="new-collection-card-img">
      <img src="http://www.petmania.ie/images/default-source/cat/petmania-kitten-1.jpg?sfvrsn=4" alt="new collection" alt="new collection">
    </div>
    <div class="new-collection-content">
      <h3>AW19 collection</h3>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporis, a sequi molestias nam odit sunt. Unde dolore fugit suscipit amet.</p>
      <a href="#" class="call-to-action"><span>JOIN</span></a>
    </div>
  </section>
  <!-- End of New Collection -->
</main>
...