div не сгибает обертку - PullRequest
Новая
       4

div не сгибает обертку

0 голосов
/ 04 декабря 2018

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

* {
  padding: 0;
  margin: 0;
}

.container-top {
  background-color: green;
  color: white;
}

.container-top-context {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto;
}

.container-top-context h1 {
  font-size: 70px;
  word-spacing: 0.3em;
}

.container-top-context h2 {
  font-size: 20px;
  word-spacing: 0.2em;
}

.logo {
  background-color: yellow;
  height: 100px;
  width: 100px;
  margin-bottom: 10px;
}

.container-testimony-context {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.box-1 {
  flex: 1;
  background-color: #EF5350;
  color: #FFCDD2 padding:5px;
  text-align: center;
}

.box-2 {
  flex: 1;
  background-color: #AB47BC;
  color: #E1BEE7;
  padding: 5px;
  text-align: center;
}

.box-3 {
  flex: 1;
  background-color: #29B6F6;
  color: #B3E5FC;
  padding: 5px;
  text-align: center;
}

.box-4 {
  flex: 1;
  background-color: #66BB6A;
  color: #C8E6C9;
  padding: 5px;
  text-align: center;
}
<!DOCTYPE html>
<html>

<head>
  <title>my flex box</title>
</head>

<body>


  <div class="container-top">
    <div class="container-top-context">
      <h1>Road of Kalibaenan</h1>
      <h2>Gives exact direction to unusual creatures</h2>
      <div class="logo"></div>
    </div>
  </div>
  <div class="container-testimony-context">
    <div class="box-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="box-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="box-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="box-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

  </div>


</body>

</html>

1 Ответ

0 голосов
/ 04 декабря 2018

Он изгибается по назначению, только по одному за один раз и с очень маленьким размером экрана.

Чтобы лучше это контролировать и сразу переключить переключатель flex-direction, попробуйте использовать медиа-запрос, например, обновленный пример.ниже: 

* {
  padding: 0;
  margin: 0;
}

.container-top {
  background-color: green;
  color: white;
}

.container-top-context {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto;
}

.container-top-context h1 {
  font-size: 70px;
  word-spacing: 0.3em;
}

.container-top-context h2 {
  font-size: 20px;
  word-spacing: 0.2em;
}

.logo {
  background-color: yellow;
  height: 100px;
  width: 100px;
  margin-bottom: 10px;
}

.container-testimony-context {
  display: flex;
  flex-wrap: wrap;
}

.box-1 {
  flex: 1;
  background-color: #EF5350;
  color: #FFCDD2 padding:5px;
  text-align: center;
}

.box-2 {
  flex: 1;
  background-color: #AB47BC;
  color: #E1BEE7;
  padding: 5px;
  text-align: center;
}

.box-3 {
  flex: 1;
  background-color: #29B6F6;
  color: #B3E5FC;
  padding: 5px;
  text-align: center;
}

.box-4 {
  flex: 1;
  background-color: #66BB6A;
  color: #C8E6C9;
  padding: 5px;
  text-align: center;
}

@media screen and (max-width: 600px) {
  .container-testimony-context {
    flex-direction: column;
  }
}
<!DOCTYPE html>
<html>

<head>
  <title>my flex box</title>
</head>

<body>


  <div class="container-top">
    <div class="container-top-context">
      <h1>Road of Kalibaenan</h1>
      <h2>Gives exact direction to unusual creatures</h2>
      <div class="logo"></div>
    </div>
  </div>
  <div class="container-testimony-context">
    <div class="box-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="box-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="box-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="box-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

  </div>


</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...