Flexbox help | JavaScript Mastery - Programming & Coding Community | Page 1

simple folio Oct 5, 2022, 9:16 PM

#

I'm trying to create a nice box around my 2 lists that are nested inside the container called schedule. I would like to accomplish this by using flexbox, but I cant seem to get them look how I want. I'm trying have the boxes next to each other while being the same size and distance apart. I tried using margin on the boxes but this makes the boxes move outside of my container even though I used border box. Can anyone help me figure this out with flexbox?

    margin: 4em 4em 3em 4em;
    grid-area: section2;
    background-color:rgb(47, 47, 47);
    display:flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content:space-between;
    box-sizing: border-box;

}
.schedule ul{
    margin: 1em;
    width: 30%;
    height: 100%;
}
.schedule li{
    list-style-type: none;
    color: white;
    text-align: center;
    background-color: rgb(116, 116, 116);
}```

whole vessel Oct 6, 2022, 12:13 AM

#

simple folio I'm trying to create a nice box around my 2 lists that are nested inside the con...

Can you share the HTML and/or what the output looks like

simple folio Oct 6, 2022, 7:52 PM

#

https://codepen.io/goowie/pen/ZEoMazy

whole vessel Oct 6, 2022, 11:48 PM

#

simple folio https://codepen.io/goowie/pen/ZEoMazy

Is this more what you want?

#

.schedule{
    margin: 4em 4em 3em 4em;
    background-color:rgb(47, 47, 47);
    display:flex;
    flex-wrap: wrap;
    justify-content:space-around;
}

simple folio Oct 7, 2022, 2:36 PM

#

That's the look I was going for. Did you get rid of the grid on the whole page to get that look? Or is it just that class that doesn't have it?

#

Originally I was trying to use the grid for the layout. Then go through and arrange each section with flexbox. Is this the best way to do things? I feel like I might've gotten confused in the process a bit.

#Flexbox help