Как получить div под другим div в flexbox - PullRequest
Новая
       7

Как получить div под другим div в flexbox

0 голосов
/ 24 сентября 2019

На домашней странице, созданной во flexbox, я столкнулся с проблемой, которую, к сожалению, не могу решить в CSS.Мне также интересно, выполнимо ли это вообще только в CSS.Если нет, то мне нужно будет найти решение в JS.

Сайт сначала мобильный.Во флекс-контейнере есть элемент H2, 3 деления: .intro, .image и .text.В .text есть параграфы и кнопка.

В запросах для мобильных устройств и планшетов все работает нормально, за исключением версии для настольного компьютера, где div .text должен идти под div .intro, оба из которых идут вправо..image Div.Левый и правый должны быть на 50% оба.Вот код: 

<!DOCTYPE html>
<html>
<head>
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;  
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    font-weight: bold;
    text-align: center;
}

.flex-container > * {
    padding: 10px;
    flex: 1 100%;
}

.text {
    text-align: left;
    background: cornflowerblue;
}

.intro {
    background: yellow;
}

.image {
    background: moccasin;
    height: 200px;
}

@media all and (min-width: 600px) {
    .image { flex: 1 0px; }
    .text    { flex: 1 0px; }
    .image { order: 1; } 
    .text    { order: 2; }
}

@media all and (min-width: 769px) {
    .flex-container :not(.image){
    -webkit-flex-flow: column nowrap;
    flex-flow: column nowrap;
}
    .intro { flex: 1 50%; }
    .image { flex: 12 0px; }
    .text    { flex: 1 50%; }
    .image { order: 1; }
    .intro { order: 2; }
    .text    { order: 3; }
}
</style>
</head>
<body>
    <h2>Title</h2>
    <div class="flex-container">
        <div class="intro">
            <p>Intro: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis.</p>
        </div>
    <div class="image">Image</div>
        <div class="text">
            <p>Text: Cras luctus nibh lectus, in ullamcorper ex tempor eleifend. Nulla bibendum, eros a consequat vestibulum, orci massa fermentum quam, sed commodo nunc ex vitae nisl.</p>
            <button>click me</button>
        </div>
    </div>
</body>
</html>

Вот как это должно выглядеть: как должен выглядеть запрос медиа-десктопа

1 Ответ

1 голос
/ 24 сентября 2019

если у вас ничего нет о сетке, вы можете использовать ее для макета рабочего стола: 

.flex-container {
  font-weight: bold;
  text-align: center;
}

.flex-container>* {
  padding: 10px;
  flex: 1 100%;
}

.text {
  text-align: left;
  background: cornflowerblue;
}

.intro {
  background: yellow;
}

.image {
  background: moccasin;
  height: 200px;
}

@media all and (min-width: 600px) {
  .flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
  }
  .image {
    flex: 1 0px;
  }
  .text {
    flex: 1 0px;
  }
  .image {
    order: 1;
  }
  .text {
    order: 2;
  }
}

@media all and (min-width: 769px) {
  
  .flex-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .intro,
  .text {
    grid-column: 2;
  }
  .image {
    grid-row:1 / span 2
  }
}
<h2>Title</h2>
<div class="flex-container">
  <div class="intro">
    <p>Intro: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis.</p>
  </div>
  <div class="image">Image</div>
  <div class="text">
    <p>Text: Cras luctus nibh lectus, in ullamcorper ex tempor eleifend. Nulla bibendum, eros a consequat vestibulum, orci massa fermentum quam, sed commodo nunc ex vitae nisl.</p>
    <button>click me</button>
  </div>
</div>

полезная ссылка: https://css -tricks.com / snippets / css / complete-guide-grid /

...