In the container, add class="flex". To adjust the layout you can also add other class attributes within this class, based on what you need. See Options below.
Flexbox is particularly good at distributing space and aligning content. It's best used when:
Flex direction defines which direction the container should stack the flex items.
| Our CSS Classes | Flex items will: |
|---|---|
| default (no additional class) | line up as a row |
| flex-direction-column | line up as a column |
The default is for flex items to continue in the same row indefinitely, but this can make the content overflow your LibGuides box. If you have a lot of content that causes the content to overflow its box, then you need to set flex-wrap.
| Wrap Setting | Browser Will: |
|---|---|
| default (no additional class) | keep listing flex items in the same direction regardless of whether it fits in the box |
| wrap | break the items into multiple lines |
These options tell the browser how to distribute space between and around content items along the main-axis of a flex container. (The default main-axis is the x-axis or horizontal. If you changed the flex-direction to column, then the main-axis becomes the y-axis or vertical.)
| Distributed Alignment | Flex Items Will: |
|---|---|
| space-between | touch the right and left edges of container and divide the remaining space evenly |
| space-around | space elements evenly with half-sized space on either end |
| space-evenly | space elements evenly with equal space around them |
| Packed Alignment | Flex Items Will: |
|---|---|
| center | cluster in the center of the container |
| justify-start | cluster items at the start of the container |
| justify-end | cluster items at the end of the container |
<div class="flex space-between">
<div><p>Lorem ipsum... </p></div>
<div><p>Morbi...</p></div>
<div><p>Vivamus...</p></div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean purus enim, volutpat ac dolor et, sollicitudin vehicula felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras arcu turpis, maximus sit amet blandit quis, tempor id nisi. Vivamus leo mi, porttitor egestas ligula eget, dictum dignissim libero. Donec aliquam semper eros, sit amet feugiat justo ultricies ut. Quisque euismod vestibulum elementum. Morbi vestibulum eros sit amet neque viverra, ut tincidunt erat mollis. Donec suscipit at diam nec imperdiet.
Morbi porta ipsum id dolor convallis mollis. Duis at enim erat. Aliquam commodo vulputate turpis. Nullam eget quam ultrices lectus tempus pulvinar. Maecenas sagittis pretium nibh, quis faucibus ante scelerisque ac. Nullam lobortis, nulla non eleifend varius vehicula.
Vivamus pulvinar tellus eu sapien dignissim lobortis. Integer vestibulum diam sed nunc sodales feugiat. tristique nisl, ornare aliquam turpis.
<div class="flex space-between item-padding-2 item-margin-1">
<div><p>Lorem ipsum... </p></div>
<div><p>Morbi...</p></div>
<div><p>Vivamus...</p></div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean purus enim, volutpat ac dolor et, sollicitudin vehicula felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras arcu turpis, maximus sit amet blandit quis, tempor id nisi. Vivamus leo mi, porttitor egestas ligula eget, dictum dignissim libero. Donec aliquam semper eros, sit amet feugiat justo ultricies ut. Quisque euismod vestibulum elementum. Morbi vestibulum eros sit amet neque viverra, ut tincidunt erat mollis. Donec suscipit at diam nec imperdiet.
Morbi porta ipsum id dolor convallis mollis. Duis at enim erat. Aliquam commodo vulputate turpis. Nullam eget quam ultrices lectus tempus pulvinar. Maecenas sagittis pretium nibh, quis faucibus ante scelerisque ac. Nullam lobortis, nulla non eleifend varius vehicula.
Vivamus pulvinar tellus eu sapien dignissim lobortis. Integer vestibulum diam sed nunc sodales feugiat. tristique nisl, ornare aliquam turpis.
| Option | Add the following as a class... | In this |
|---|---|---|
| flex list with no bullets | flex | ul |
| padding for each child |
item-padding-1 |
container |
| margin around each child |
item-margin-1 |
container |
| border around each child | item-border-black-1 item-border-black-2 item-border-gray-1 item-border-gray-2 |
container |