Как выровнять теги div по вертикали на мобильном устройстве и по горизонтали на больших экранах в CSS?

Question

У меня есть три тега div, 1 родитель и 2 дочерних. Родительский элемент div должен занимать всю ширину страницы и высоту содержимого (то есть 2 дочерних элемента div). 2 дочерних элемента div должны располагаться горизонтально на больших экранах (то есть на ноутбуках, настольных компьютерах ...) и занимать 50% ширины родительского элемента и расширяться в соответствии с содержимым.

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

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

.parent {
  display: flex;
  padding: 20px;
}

.child1 {
  display: inline-block;
  width: 50%;
}

.child2 {
  display: inline-block;
  width: 50%;
}

Answer 1

flex и grid могут позволить вам сбросить точку разрыва медиазапроса.

С помощью медиазапроса вы можете переключиться обратно на display:block;

Для информации: поскольку вы используете flex для родительского элемента, отображаемое значение для дочерних элементов не будет иметь никаких эффектов, кроме ширины: 50% может быть слишком большим, если используются поля, отступы или границы. Размер коробки может быть вашим другом здесь. С flex, вы можете использовать flex:1; для равномерного распыления детей, независимо от количества, границ, отступов или полей.

примеры с сеткой, flex и переключением обратно на блок с помощью медиазапроса. Точка останова установлена ​​в демо около 620px, обновите значения. используется для ваших нужд .

/* the flex container without mediaquerie */

div[class] {
  display: flex;
  min-height: 20vh;
  flex-wrap: wrap;
  /* needed to stack children once to big */
}

div[class] div {
  flex: 1;
  min-width: 300px;
  /* 2 children + margin and borders makes a break point at around 620px */
  background: lightblue;
}

div div {
  border: solid;
  margin: 3px;
  background: tomato;
}

div[id] {
  min-height: 20vh;
  display: grid;
  grid-gap: 3px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  /* again a break point at about 620px when 2 children no need of mediaquerie */
}

div[id][class] div {
  background: lightgreen;
}


/* remove the grid system at about 620px */

@media screen and (max-width: 621px) {
  div[id],
  div[class] {
    min-height: 30vh;
    /* has a meaning with a grid system */
  }
  div[id][class] {
    display: block;
    /* looses the grid system, back to classic layout see min-height behavior not resizing  children */
    border: solid;
  }
}

<div class>
  <div>1</div>
  <div>2</div>
</div>
<div id>
  <div>1</div>
  <div>2</div>
</div>
<div id class>
  <div>1</div>
  <div>2</div>
</div>

несколько полезных ссылок:

• https://css -tricks.com / сниппеты / CSS / а-руководство к Flexbox /

• https://css -tricks.com / сниппеты / CSS / полн-гид-сетка /

• https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

• https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Answer 2

`

.parent {
  display: flex;
  flex-flow: row wrap;
  padding: 20px;
  background: #ccc;
  box-sizing: border-box;
}
.child {
  max-width: 98%;
  flex: 0 0 98%;
  height: 200px;
  background: #333;
  margin: 0 1% 10px;
}

@media (min-width: 480px) {
.child {
  max-width: 48%;
  flex: 0 0 48%;
  margin-bottom: 0;
}
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

`

Answer 3

Используйте media query в тот момент, когда вы хотите разбить два дочерних элемента div, чтобы они занимали 50% ширины:

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

Ресурс MDN

@media screen and (min-width: 600px) {
// Add your styling here.
}

См. Ниже пример кода.

@media screen and (min-width: 600px) {
  .parent {
    display: flex;
  }
  .child {
    width: 50%;
  }
}

// Color styling
.parent {
  background-color: #ccc;
}

.child {
  background-color: lightblue;
}

.child:last-child {
  background-color: lightgreen;
}

<div class="parent">
  <div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime reprehenderit modi corporis veritatis iste sit, numquam hic velit dolorem recusandae commodi blanditiis animi quisquam temporibus illum id, repellat saepe adipisci eos odit obcaecati atque?
    Nihil expedita ab doloribus cum, iusto suscipit autem quos tempore officiis nesciunt maiores. Quos, labore eum perferendis cupiditate veritatis excepturi, tenetur quasi perspiciatis eius suscipit distinctio inventore adipisci asperiores incidunt numquam
    fugiat autem minus quae. Possimus fugiat eos consequuntur iusto et nisi earum obcaecati qui accusantium tenetur totam animi debitis minima accusamus cum quas, amet architecto quam sequi quisquam eum dolorum exercitationem rerum adipisci, esse! Voluptates.</div>
  <div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, enim reprehenderit asperiores sapiente blanditiis odit. Possimus vel porro in eligendi vitae officiis placeat odit asperiores illo consequatur, quos enim nam quam natus pariatur,
    sed autem excepturi temporibus, consequuntur beatae eos. Exercitationem voluptatum, aliquam harum delectus provident laudantium perferendis atque aliquid!</div>
</div>

Answer 4

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

/* For visual only, don't mind this */

.parent {
  width: 100%;
}

.child {
  height: 200px;
  background-color: salmon;
  margin: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 30px;
}





/* Layout */

.parent {
  display: flex;
}

.child {
  flex-basis: 50%;
}

@media only screen and (max-width: 580px) {
  .parent {
    flex-wrap: wrap;
  }
  .child {
    flex-basis: 100%;
  }
}

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
</div>

Answer 5

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

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  padding: 20px;
}

<div class="parent">
  <div>
    child1
  </div>
  <div>
    child2
  </div>
</div>