Перемещение среднего столбца в начало на мобильных устройствах с помощью flex box

#css #flexbox

Вопрос:

У меня есть следующий HTML (упрощенный):

 <div class='outer'>
   <div class='nav-prev'></div>
   <div class='content'></div>
   <div class='nav-next'></div>
</div>

Мой текущий CSS:

 .outer {
  display:flex;
}
.content {
  flex-grow:1;
}

Это дает мне макет из трех столбцов для рабочего стола с левыми и правыми кнопками навигации (в .nav-prev и .nav-next divs). Что-то вроде:

 < CONTENT >

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

 CONTENT
 <   >

Я не могу понять, возможно ли это с помощью flex. Я знаю, что могу изменять flex-direction: и переупорядочивать элементы с order: помощью, но я не думаю, что смогу поместить .nav-prev и .nav-next ниже .content и рядом друг с другом без дополнительных разделителей контейнеров, которые были бы несовместимы с представлением рабочего стола с 3 столбцами.

Очевидно, что у меня может быть два набора кнопок навигации, отображаемых и скрытых по мере необходимости, но мне было интересно, есть ли волшебный гибкий способ добиться такого поведения без удвоения кнопок.

1. Если вы можете использовать display: grid . Я могу показать вам, как это сделать.

2. Я могу использовать display: grid , если он имеет эквивалент flex-grow для содержимого в режиме 3 столбцов. Я раньше не использовал display: grid . (Или, может быть, вы говорите, переключиться на сетку для мобильных устройств?)

3. попробуйте использовать absolute свойство position для кнопки навигации для мобильных устройств. Нравится @media (max-width: 767px) { .nav-prev{ position:absolute; bottom:0; left:0; } .nav-next{ position:absolute; bottom:0; right:0; } }

4. @jerry — Я не могу поверить, что я не думал об использовании absolute, это работает отлично — если вы дадите мне ответ, я приму его! Спасибо

5. @Ben Holness это всегда происходит :-). вы повсюду ищете отвертку, которая находится только в ваших руках.

Ответ №1:

попробуйте использовать абсолютное position свойство для кнопки навигации для мобильных устройств. Нравится @media (max-width: 767px) { .nav-prev{ position:absolute; bottom:0; left:0; } .nav-next{ position:absolute; bottom:0; right:0; } }

Ответ №2:

Согласно вашему комментарию:

Вы можете использовать display: grid; в мобильной версии. (используйте @media запросы)

ОБРАТИТЕ ВНИМАНИЕ, ЧТО text-align: center; и border я добавил ТОЛЬКО для демонстрационных целей.

 .outer {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
text-align: center;
}

.content { grid-area: 1 / 1 / 2 / 3; border: 1px solid #767676;}
.nav-prev { grid-area: 2 / 1 / 3 / 2; border: 1px solid #767676;}
.nav-next { grid-area: 2 / 2 / 3 / 3; border: 1px solid #767676;}

  <div class="outer">
<div class="nav-prev">PREV</div>
<div class="content">CONTENT</div>
<div class="nav-next">NEXT</div>
</div>

НА СЛУЧАЙ, если вы хотите использовать display: grid; и в настольной версии. Это будет ваш код для рабочего стола:

 .outer {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
text-align: center;
}

.nav-prev { grid-area: 1 / 1 / 2 / 2; border: 1px solid #767676;}
.content { grid-area: 1 / 2 / 2 / 3; border: 1px solid #767676;}
.nav-next { grid-area: 1 / 3 / 2 / 4; border: 1px solid #767676;}

  <div class="outer">
<div class="nav-prev">PREV</div>
<div class="content">CONTENT</div>
<div class="nav-next">NEXT</div>
</div>

1. Я попробовал это, и это сработало, хотя есть некоторые проблемы, которые мне нужно было бы решить (проблемы с интервалами), однако идея абсолютного позиционирования — гораздо более простое решение. Хотя спасибо!