Дочерние элементы не встают как родительские

Question

    /* Container
===================*/
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/*===== Article =====*/

.article__image {
    position: absolute;
    width 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -90%);
}

.article {
    margin-top: 80px;
    margin-left: 20px;
    margin-right: 100px;
    margin-bottom: 10px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
    height: 600px;
    width: 500px;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    background: rgb(97,7,244);
    background: linear-gradient(90deg, rgba(97,7,244,1) 0%, rgba(140,14,230,1) 100%);
    justify-content: center;
    align-items: center;
    transition: .3s linear;
}

.article:hover {
    box-shadow: 1px 1px 10px rgba(0, 0, 0, .3);
}

.container {
    padding: 10px;
    width: 400px;
    height: 50px;
}

.article__title {
    cursor: default;
    color: #fff;
    font-size: 26px;
    margin-top: 70px;
    margin-left: 100px;
    transition: 0.3s linear;
}

.article__title:hover {
    transform: scale(1.1);
    text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
}

.article__text {
    color: #fff;
    font-size: 17px;
    margin-top: 10px;
}


/*/===== Article =====*/

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Проекты</title>
</head>

<body>
    <div class="back">
        <a href="../index.html" class="back__text">Назад</a>
    </div>
    
    <article class="article">
        <div class="container">
                <img src="../assets/img/ava.jpg" alt="" class="article__image">
                <h1 class="article__title">Lorem ipsum.</h1>
                <p class="article__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At distinctio, nulla soluta voluptatem in nemo sequi amet! Optio, repellendus! Excepturi reiciendis, perspiciatis voluptatum impedit expedita quo vero inventore ipsa, sint.</p>
        </div>
    </article>
    
    <article class="article">
        <div class="container">
                <img src="../assets/img/ava.jpg" alt="" class="article__image">
                <h1 class="article__title">Lorem ipsum.</h1>
                <p class="article__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At distinctio, nulla soluta voluptatem in nemo sequi amet! Optio, repellendus! Excepturi reiciendis, perspiciatis voluptatum impedit expedita quo vero inventore ipsa, sint.</p>
        </div>
    </article>
    
    <article class="article">
        <div class="container">
                <img src="../assets/img/ava.jpg" alt="" class="article__image">
                <h1 class="article__title">Lorem ipsum.</h1>
                <p class="article__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At distinctio, nulla soluta voluptatem in nemo sequi amet! Optio, repellendus! Excepturi reiciendis, perspiciatis voluptatum impedit expedita quo vero inventore ipsa, sint.</p>
        </div>
    </article>
    
    <article class="article">
        <div class="container">
                <img src="../assets/img/ava.jpg" alt="" class="article__image">
                <h1 class="article__title">Lorem ipsum.</h1>
                <p class="article__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At distinctio, nulla soluta voluptatem in nemo sequi amet! Optio, repellendus! Excepturi reiciendis, perspiciatis voluptatum impedit expedita quo vero inventore ipsa, sint.</p>
        </div>
    </article>

Мне нужно, чтобы элементы переносились на новую строку и сохраняли свои свойства центрирования, а этого не происходит, почему? (они просто "улетают")

Answer 1

У вас не хватает центрирования у body: justify-content:center;

Я убрал для наглядности конские маргины у блоков .article и сделал их поменьше. Все прекрасно центрируется.

body {
  display: flex;
  min-height: 100vh;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  justify-content: center;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  box-shadow: 0 0 10px red inset;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

p {
  margin: 0 0 10px;
}


/* Container
===================*/

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}


/*===== Article =====*/

.article__image {
  position: absolute;
  width 300px;
  height: 300px;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -90%);
}

.article {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  justify-content: center;
  align-items: center;
  margin-top: 80px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  box-shadow: 1px 1px 10px rgb(0 0 0 / 10%);
  height: 600px;
  width: 300px;
  background: rgb(97, 7, 244);
  transition: .3s linear;
}

.article:hover {
  box-shadow: 1px 1px 10px rgba(0, 0, 0, .3);
}

.container {
  padding: 10px;
  width: 400px;
  height: 50px;
}

.article__title {
  cursor: default;
  color: #fff;
  font-size: 26px;
  text-align: center;
  display: flex;
  align-items: center;
  margin-top: 70px;
  margin-left: 100px;
  transition: 0.3s linear;
}

.article__title:hover {
  transform: scale(1.1);
  text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
}

.article__text {
  color: #fff;
  font-size: 17px;
  margin-top: 10px;
  text-align: center;
}


/*/===== Article =====*/

<!DOCTYPE html>
<html>


<body>
  <div class="back">
    <a href="../index.html" class="back__text">Назад</a>
  </div>

  <article class="article">
    <div class="container">
      <img src="../assets/img/ava.jpg" alt="" class="article__image">
      <h1 class="article__title">Lorem ipsum.</h1>
      <p class="article__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At distinctio, nulla soluta voluptatem in nemo sequi amet! Optio, repellendus! Excepturi reiciendis, perspiciatis voluptatum impedit expedita quo vero inventore ipsa, sint.</p>
    </div>
  </article>

  <article class="article">
    <div class="container">
      <img src="../assets/img/ava.jpg" alt="" class="article__image">
      <h1 class="article__title">Lorem ipsum.</h1>
      <p class="article__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At distinctio, nulla soluta voluptatem in nemo sequi amet! Optio, repellendus! Excepturi reiciendis, perspiciatis voluptatum impedit expedita quo vero inventore ipsa, sint.</p>
    </div>
  </article>

  <article class="article">
    <div class="container">
      <img src="../assets/img/ava.jpg" alt="" class="article__image">
      <h1 class="article__title">Lorem ipsum.</h1>
      <p class="article__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At distinctio, nulla soluta voluptatem in nemo sequi amet! Optio, repellendus! Excepturi reiciendis, perspiciatis voluptatum impedit expedita quo vero inventore ipsa, sint.</p>
    </div>
  </article>

  <article class="article">
    <div class="container">
      <img src="../assets/img/ava.jpg" alt="" class="article__image">
      <h1 class="article__title">Lorem ipsum.</h1>
      <p class="article__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At distinctio, nulla soluta voluptatem in nemo sequi amet! Optio, repellendus! Excepturi reiciendis, perspiciatis voluptatum impedit expedita quo vero inventore ipsa, sint.</p>
    </div>
  </article>

</body>

</html>

Один нюанс: ссылка "Назад" у вас точно такой же элемент, как и .article, и тоже занимает место, что влияет на центрирование. Поэтому лучше все блоки .article обернуть в какой-нибудь еще блок, к которому и применять то, что вы задали для <body>.

Апдейт для максимум двух блоков в строку:

.text {
  background: white;
  padding: 10px;
}

h1 {
  background: pink;
  text-align: center;
}

.block {
  padding: 10px;
  max-width: 200px;
  background: magenta;
  display: inline-block;
  margin: 10px;
}

.container {
  max-width: 50%;
  min-width: 50%;
  box-sizing: border-box;
  border: 1px solid red;
  display: flex;
}

.container:nth-of-type(odd) {
  justify-content: flex-end;
}

.papa {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

<div class="papa">
  <div class="container">
    <div class="block">
      <h1>Header</h1>
      <div class="text">Lorem ipsim dolor sit amet... Lorem ipsim dolor sit amet... Lorem ipsim dolor sit amet... Lorem ipsim dolor sit amet...</div>
    </div>
  </div>
  <div class="container">
    <div class="block">
      <h1>Header</h1>
      <div class="text">Lorem ipsim dolor sit amet... Lorem ipsim dolor sit amet... Lorem ipsim dolor sit amet... Lorem ipsim dolor sit amet...</div>
    </div>
  </div>
  <div class="container">
    <div class="block">
      <h1>Header</h1>
      <div class="text">Lorem ipsim dolor sit amet... Lorem ipsim dolor sit amet... Lorem ipsim dolor sit amet... Lorem ipsim dolor sit amet...</div>
    </div>
  </div>
  <div class="container">
    <div class="block">
      <h1>Header</h1>
      <div class="text">Lorem ipsim dolor sit amet... Lorem ipsim dolor sit amet... Lorem ipsim dolor sit amet... Lorem ipsim dolor sit amet...</div>
    </div>
  </div>
  <div class="container">
    <div class="block">
      <h1>Header</h1>
      <div class="text">Lorem ipsim dolor sit amet... Lorem ipsim dolor sit amet... Lorem ipsim dolor sit amet... Lorem ipsim dolor sit amet...</div>
    </div>
  </div>
  <div class="container">
    <div class="block">
      <h1>Header</h1>
      <div class="text">Lorem ipsim dolor sit amet... Lorem ipsim dolor sit amet... Lorem ipsim dolor sit amet... Lorem ipsim dolor sit amet...</div>
    </div>
  </div>
  <div class="container">
    <div class="block">
      <h1>Header</h1>
      <div class="text">Lorem ipsim dolor sit amet... Lorem ipsim dolor sit amet... Lorem ipsim dolor sit amet... Lorem ipsim dolor sit amet...</div>
    </div>
  </div>
  <div class="container">
    <div class="block">
      <h1>Header</h1>
      <div class="text">Lorem ipsim dolor sit amet... Lorem ipsim dolor sit amet... Lorem ipsim dolor sit amet... Lorem ipsim dolor sit amet...</div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Дочерние элементы не встают как родительские

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