Написание кода flexbox для 2-х и 3-х колонок на настольном и мобильном устройствах (перенос)

Мне очень тяжело разобраться в этом CSS-решении flexbox. В основном есть две проблемы: одна с двумя колонками, другая с тремя колонками.

2-Колонка:
Это, я думаю, может быть довольно простым:

3-Колонка:
Это, вероятно, немного сложнее:

Контейнерный класс, ну, в общем, .container, а дочерние - просто .left, .right и .middle. Не уверен, что это актуально, но ширина .container составляет 100% от области просмотра. Вероятно, я должен добавить, что использование Bootstrap невозможно из-за не зависящих от меня причин.

Ответы

Ответ 1

Вот как вы это делаете для трех столбцов. Я только добавляю это, потому что это немного сложнее:

HTML

<div class="container">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>

CSS

.container {
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
    justify-content:flex-start;
    align-items:stretch;
}

.left {order:1; background:red; flex-basis:100%; height:300px}
.middle {order:3; background: green;flex-basis:100%; height:300px;}
.right {order:2; background:yellow;flex-basis:100%; height:300px;}

@media screen and (min-width:600px) {
   .container {
       flex-wrap:nowrap;
   } 

    .left {
        flex-basis:200px;
        order:1;
    }
    .middle {
        flex-basis:1;
        order:2;
    }
    .right {
        flex-basis:200px;
        order:3;
    }
}

И скрипка http://jsfiddle.net/2touox81/

Как вы можете видеть, вы можете установить порядок столбцов для элементов flex.

Надеюсь, что это поможет.

Ответ 2

Я предполагаю, что экран для рабочего стола шире, чем 600 пикселей, мобильный меньше.

Схема с двумя столбцами очень проста:

body {
  display: flex;   /* Magic begins */
  flex-wrap: wrap; /* Allow multiple lines */
}
#left, #right {
  flex: 1 300px;   /* Initial width of 600px/2
                      Grow to fill remaining space */
  min-width: 0;    /* No minimal width */
}

body {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  font-weight: bold;
}
#left, #right {
  flex: 1 300px;
  min-width: 0;
  background: #f55;
  padding: 15px 0;
}
#right {
  background: #57f;
}

<div id="left">Left</div>
<div id="right">Right</div>

Ответ 3

вы ищете отзывчивый дизайн, я полагаю, поэтому вы можете использовать медиа-запросы в своем CSS как

.container
    {
    background-color:red;
    }

@media (max-width: 600px) 
{
    .container
    {
    background-color:blue;
    }

}
@media (max-width: 480px) 
{
    .container
    {
    background-color:green;
    }

}
/* ...etc*/

чтобы проверить ваш отзывчивый дизайн:

в Firefox нажмите F12, а затем нажмите на иконку "режим гибкого дизайна"

в Chrome нажмите F12, затем нажмите значок "Переключить мобильный телефон"

здесь вы можете найти более отзывчивые примеры:

http://navnav.co/

надеюсь, что поможет