Как сделать flex по ширине выравнивание первой строки, а вторая строка выравнивалась сначала?

Question

[kimqar_ver]

Как сделать flex по ширине выравнивание первой строки, а вторая строка выравнивалась сначала?

Comments

[Максим]

высшая категория же от 10 лет стажа по специальности

[ilia4163]

а ты как думаешь?

[ilia4163]

але клоун задай justify-content: space-between; flex-wrap: wrap;

[kimqar_ver]

ilia4163, ты кто такой, дурачек? лучше ответь нормально на вопрос, при space-between вторая строка тоже будет выравнена по ширине -__-

Answer 1

[Lord_Dantes]

display: flex;
align-items: flex-start;
flex-wrap: wrap;
justify-content: flex-start;

Comments

[kimqar_ver]

нужно сделать чтобы если сверху падал блок вниз, то верхние становились по ширину контейнера, я не знаю как это сделать, Ваш метод просто врапает их вниз с flex-start расположением

[Rustam Bainazarov]

kimqar_ver, это невозможно. CSS понятия не имеет, был ли у вас перенос или нет. Либо один метод выравнивания, либо другой.

[kimqar_ver]

Рустам Байназаров, То есть это невозможно чисто физически сделать? Например гридами? Просто веб-дизайнер говорит, что нужно делать так чтобы они по ширине выравнивались

[Lord_Dantes]

kimqar_ver, невозможно их переносить и одновременно автоматом ширину. Можно сделать ширину автоматом но без переноса.

[Igor]

1) Разбить вывод меню на блоки (по строкам, до N элементов в строке)
2) Использовать комбинации с трюками для -margin и +margin, в соответствии с блоками (основной и дочерние)

3) Или, то-то в таком духе:

.mp-category {
display: flex;
flex-wrap: wrap;
margin-left: -6px;
margin-right: -6px;
}

.mp-category_item {
width: calc(20% - 28px);
margin-left: 6px;
margin-right: 6px;
margin-bottom: 12px;
}

Answer 2

[Igor]

1) Разбить вывод меню на блоки (по строкам, до N элементов в строке)
2) Использовать комбинации с трюками для -margin и +margin, в соответствии с блоками (основной и дочерние)

3) Или, то-то в таком духе:

.mp-category {
display: flex;
flex-wrap: wrap;
margin-left: -6px;
margin-right: -6px;
}

.mp-category_item {
width: calc(20% - 28px);
margin-left: 6px;
margin-right: 6px;
margin-bottom: 12px;
}