Search code examples
htmlcssstylus

evenly distribute an arbitrary number of elements in an HTML container

Want to be able to

  1. set the width of a container element in an HTML element arbitrarily

  2. given X subelements in the container, distribute those subelements evenly within the container

like so:

enter image description here

Would like to know how to do this both in vanilla CSS and also in Stylus

Solution

  • Use flexbox:

    .container{
display:flex;
justify-content:space-between;
}

    You can use space-between or space-around.