#html #css #flexbox
#HTML #css #flexbox
Вопрос:
Первые изображения представляют сетку на ПК: 
вторые изображения представляют сетку на мобильных устройствах:
Как вы можете видеть, мне нужно изменить порядок и сетку. Я пытаюсь использовать flexbox, но мне нужно сгруппировать B amp; C на ПК и получить равную высоту.
Важные условия:
- На ПК высота равна сумме B и C
- На мобильном я получаю порядок: B, A, C
Я знаю, что могу использовать простой двойной блок times B и использовать show / hide, но это неприемлемо в моем проекте.
Комментарии:
1. Я думаю, что лучшее, что вы можете сделать, это с фиксированной высотой в контейнере jsfiddle.net/Lg0wyt9u/1259
2. Но я не знаю высоту этого контейнера. Он может иметь 200px или 1200px.
Ответ №1:
Если я правильно понимаю ваши требования, это будет ответом.
Чтобы было легче видеть, я внес изменения в состояние наведения вместо медиа-запроса.
Хитрость заключается в том, чтобы извлечь макет из flex в версии для ПК
.container {
border: solid 1px black;
margin: 10px;
display: flex;
flex-direction: column;
position: relative;
width: 400px;
}
.container > div {
width: 200px;
font-size: 50px;
}
.a {
background-color: tomato;
eight: 100%;
osition: absolute;
}
.b {
background-color: lightgreen;
height: 140px;
}
.c {
background-color: lightblue;
height: 200px;
order: 3;
}
.container div {
width: 50%;
}
.container .a {
position: absolute;
left: 0px;
top: 0px;
width: 50%;
height: 100%;
}
.container div {
align-self: flex-end;
}
.container:hover .a {
position: static;
height: 130px;
order: 2;
}
.container:hover div {
width: 100%;
} <div class="container">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</div> Ответ №2:
Вот демонстрация, если вы знаете, какова высота внешнего wrapper окна — для иллюстрации это высота окна просмотра в приведенном ниже примере:
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.wrapper {
display: flex;
flex-wrap: wrap;
height: 100vh;
}
.wrapper > div {
border: 1px solid;
width: 50%;
height: 50%;
}
.wrapper > div:first-child {
height: 100%;
}
.wrapper > div:last-child {
margin-left: auto;
position: relative;
top: -50%;
}
@media only screen and (max-width: 650px) {
.wrapper {
display: flex;
flex-direction: column;
flex-wrap: initial;
}
.wrapper > div {
width: 100%;
}
.wrapper > div:first-child {
order: 2;
}
.wrapper > div:last-child {
order: 3;
top: 0;
}
} <div class="wrapper">
<div>A</div>
<div>B</div>
<div>C</div>
</div> Вот демонстрация, когда вы переносите B и C в контейнер. Обратите внимание, что невозможно получить B — A C в мобильном представлении здесь — только A — B C возможно. Смотрите фрагмент ниже:
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.wrapper {
display: flex;
}
.wrapper > div:first-child {
width: 50%;
border: 1px solid;
}
.wrapper > .inner-wrap {
display: flex;
flex-direction: column;
width: 50%;
}
.wrapper > .inner-wrap > div {
width: 100%;
border: 1px solid;
}
@media only screen and (max-width: 650px) {
.wrapper {
display: flex;
flex-direction: column;
}
.wrapper > div:first-child {
width: 100%;
}
.wrapper > .inner-wrap {
width: 100%;
}
} <div class="wrapper">
<div class="content">
<p>A</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
</div>
<div class="inner-wrap">
<div class="content">
<p>B</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
</div>
<div class="content">
<p>C</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
</div>
</div>
</div> Заключение:
Я думаю, если вы не знаете точную высоту flexbox , вы не сможете выполнить порядок в мобильном представлении вместе с макетом на ПК.
Обновление 2019 года
С помощью CSS grids вы можете получить идеальное решение — макет из 2 столбцов для размещения элементов сетки, и вы можете изменить порядок, явно разместив элементы grid-row с помощью (или grid-column ) определений — см. Демонстрацию ниже:
body {
margin: 0;
}
.wrapper {
display: grid; /* grid container */
grid-template-columns: 1fr 1fr; /* 2 column layout */
grid-template-rows: auto 1fr; /* 2 rows */
height: 100vh;
}
.wrapper > div {
border: 1px solid;
/* flexbox for centering */
display: flex;
justify-content: center;
align-items: center;
}
.wrapper > div:first-child {
grid-row: span 2; /* span two rows */
}
@media only screen and (max-width: 800px) {
.wrapper {
grid-template-columns: 1fr; /* one column */
grid-template-rows: auto; /* reset row definiton */
}
.wrapper > div:first-child {
grid-row: 2; /* place in second row */
}
}
/* presentation styles below */
.wrapper div:first-child {
background: #67c36e;
font-size: 5em;
}
.wrapper div:nth-child(2) {
background: #ec897c;
font-size: 2em;
}
.wrapper div:last-child {
background: #7cd0ec;
font-size: 5em;
} <div class="wrapper">
<div>A</div>
<div>B</div>
<div>C</div>
</div> Комментарии:
1. Я не знаю высоты и ищу эту третью ситуацию из вашего заключения. Вы уверены, что это невозможно получить?
2. @kris_IV наткнулся на этот вопрос сегодня, обновлен с помощью CSS grid solution, спасибо! 🙂