help about this flex box big

hello
9 Replies
NIMA
NIMA8mo ago
this is what i want to make
NIMA
NIMA8mo ago
but this is what i make how can i fix it to look like first one <div class="flex-container"> <div class="flex-items"> .flex-container { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; border: 1px solid gree; }
.flex-items:nth-child(1) { display: block; flex-grow: 0; flex-shrink: 1; flex-basis: auto; align-self: auto; order: 0; } 8 child ,,,
clevermissfox
clevermissfox8mo ago
you want flex-direction: row not column, column stacks the children and row puts them next to each other. you dont have to declare flex-direction for row as thats the default when using display: flex. so just take off the flex-direction property.you can also take off
display: block;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
align-self: auto;
order: 0;
display: block;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
align-self: auto;
order: 0;
as these are all defaults
NIMA
NIMA8mo ago
if i fix it with grid u think its betther? .parent { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(5, 1fr); grid-column-gap: 5px; grid-row-gap: px; }
clevermissfox
clevermissfox8mo ago
grid would work too although depending on the parents size, the 1fr unit may be too large for the rows. would have to see your code in a codepen to tell for sure grid or flex would be fine
NIMA
NIMA8mo ago
i fix it with grid it work fix
Want results from more Discord servers?
Add your server