/* Horizontal & vertical */ html [vn-horizontal], vn-horizontal, .vn-horizontal, html [vn-vertical], vn-vertical, .vn-vertical { display: flex; } html [vn-horizontal], vn-horizontal, .vn-horizontal { flex-direction: row; } vn-horizontal[reverse] { flex-direction: row-reverse; } html [vn-vertical], vn-vertical, .vn-vertical { flex-direction: column; } vn-vertical[reverse] { flex-direction: column-reverse; } html [wrap] { flex-wrap: wrap; } html [wrap-reverse] { flex-wrap: wrap-reverse; } /* Horizontal & vertical childs */ html [vn-auto], html [vn-none], html [vn-one], html [vn-two], html [vn-three], html [vn-four], html [vn-five], html [vn-six], html [vn-seven], html [vn-eight], html [vn-nine], html [vn-ten], html [vn-eleven], html [vn-twelve]{ flex-basis: 0.000000001px; } html [vn-auto], vn-auto, .vn-auto { flex-basis: auto; } html [vn-none], vn-none, .vn-none { flex: none; } html [vn-one], vn-one, .vn-one { flex: 1; } html [vn-two], vn-two, .vn-two { flex: 2; } html [vn-three], vn-three, .vn-three { flex: 3; } html [vn-four], vn-four, .vn-four { flex: 4; } html [vn-five], vn-five, .vn-five { flex: 5; } html [vn-six], vn-six, .vn-six { flex: 6; } html [vn-seven], vn-seven, .vn-seven { flex: 7; } html [vn-eight], vn-eight, .vn-eight { flex: 8; } html [vn-nine], vn-nine, .vn-nine { flex: 9; } html [vn-ten], vn-ten, .vn-ten { flex: 10; } html [vn-eleven], vn-eleven, .vn-eleven { flex: 11; } html [vn-twelve], vn-twelve, .vn-twelve { flex: 12; }