Не понимаю, почему без “flex-wrap” ломается код и не работает “align-content”, оно (flex-wrap) ведь отвечает только за порядок следования…?
.palette {
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
/flex-wrap: wrap-reverse; /
}
div > div {
width: 20px;
}
.color-1 {
order: 7;
}
.color-2 {
order: 6;
}
.color-4 {
order: 5;
}
.color-6 {
order: 4;
}
Ineska
15.Август.2017 20:59:32
2
За порядок следования отвечает часть “reverse”. А за что отвечает “wrap”?
wrap в переводе - обертка, по смыслу - “перенос”. Факт в том что если убрать перенос (не связанный совершенно параметр) , то все падает. При чем, если заменить ‘align-content’ на ‘align-items’ то частично все же работать будет…
Ineska
16.Август.2017 12:34:04
4
David_Shiko:
div > div {
width: 20px;
}
Это правило лишнее в вашем коде. Вы ищете ошибку не в том месте.
Ну я как бы сделал, просто не очень понял как:))
А правило написал, т.к. жс (который, как я понял, автоматически уменьшает задействованные дивы, не сработал.) Но это же правило во всяком случае ничего не ломает…?
Ineska
17.Август.2017 07:18:10
6
Нет там никакого js. Есть стили, которые от вас скрыты. Посмотрите через инструменты разработчика в браузере.
.palette {
display: flex;
flex-direction: column;
flex-wrap: wrap-reverse;
justify-content: center;
align-items: center;
align-content: center;
}
.color-1 {
order: 4;
}
.color-2 {
order: 3;
}
.color-3 {
order: -3;
}
.color-4 {
order: 2;
}
.color-6 {
order: 1;
}
Romzes
22.Январь.2018 19:54:01
8
.palette {
display:flex;
flex-direction:column;
justify-content:center;
flex-wrap:wrap-reverse;
align-content:center;
align-items:center;
}
/*черный*/
.color-1 {
order:7;
}
/*синий*/
.color-2 {
order:5;
}
/*зеленый*/
.color-3 {
order:0;
}
/*желтый*/
.color-4 {
order:3;
}
/*коричневый*/
.color-5 {
order:0;
}
/*розовый */
.color-6 {
order:2;
}
/*фиолетовый*/
.color-7 {
order:1;
}
Romzes
22.Январь.2018 19:57:14
9
Если интересно еще почитать про flex-box
1 лайк
Сделал вот так!
.palette {
display: flex;
flex-direction: column; /* располагаем эл-ты в колонку */
align-content: center; /* ВСЕ СОДЕРЖИМОЕ КОНТЕЙНЕРА ровняем по центру (доп ось)*/
flex-wrap: wrap-reverse; /* разрешаем перенос (получается 2 колонки), и добавляем '-reverse' - меняются местами колонки */
justify-content: center; /* ВСЕ СОДЕРЖИМОЕ КОНТЕЙНЕРА ровняем по центру (главная ось)*/
}
.color-1 {
order: -1;
}
.color-2 {
order: -2;
}
.color-3 {
order: -7;
}
.color-4 {
order: -3;
}
.color-5 {
order: -6;
}
.color-6 {
order: -4;
}
.color-7 {
order: -5;
}
.palette {
display: flex;
align-items: center;
flex-wrap: wrap-reverse;
flex-direction: column;
align-content: center;
justify-content: center;
}
.color-1 {
order: 7;
}
.color-2 {
order: 6;
}
.color-4 {
order:5;
}
.color-6 {
order: 4;
}
.palette {
display: flex;
flex-wrap: wrap-reverse;
justify-content: center;
align-content: center;
}
.color-1 {
order: 8;
}
.color-3 {
order: 7;
}
.color-5 {
order: 6;
}
Самое короткое решение на мой взгляд