 |
VOOZH | about |
|
VOOZH | about |
Bootstrap 5 Flex offers utility classes for creating flexible layouts using Flexbox, ensuring responsiveness across screen sizes. To start, wrap desired elements in a flex container with classes like .container or .row. Then, use flex utility classes to control item layout.
| Aspect | Description |
|---|---|
| Flex Direction | Controls flex item arrangement direction. The default is a row for horizontal alignment. |
| Justify Content | Align flex items along the main axis: flex-start, center, flex-end, space-around, or space-between. |
| Align Items | Changes flex item alignment on the cross-axis (vertical/horizontal depending on flex-direction). |
| Align Self | Adjusts single flex item alignment on the cross-axis, independently from others in the container. |
| Fill | Forces flex items into equal widths while utilizing all available horizontal space. |
| Grow and Shrink | Determines flex item growth and shrinkage relative to others in container based on available space. |
| Auto Margins | Utility classes for adding auto margins to flex items, aiding in various layout alignments. |
| Wrap | Alters how flex items wrap in container: no wrap, wrap, or wrap in reverse direction. |
| Order | Changes visual order of specific flex items using integer values, altering item sequencing. |
| Align Content | Controls flex item alignment on cross-axis in multiline flex containers. |
| Media Object | Combines .media and .media-body classes for consistent alignment of media objects with content. |
| Sass | Software as a service (SaaS) for building responsive web apps using Bootstrap 5. |
Syntax:
<div class="d-flex p-2 ">
....
</div>
justify-content in Bootstrap 5 Flex is a property that aligns flex items along the main axis. It controls how the space is distributed between and around flex items, allowing for various alignments like center, start, end, space-between, and more.
Syntax:
<div class="d-flex justify-content-center">
...
</div>
Example: In this example, we have a container with a flex container inside it. The flex container has three flex items, each with a different background color. We're using the "justify-content-center" and "align-items-center" classes to center the flex items both horizontally and vertically within the flex container.
Output:
In Bootstrap 5 Flex, flex-direction is a property that determines the direction in which flex items are laid out. It allows for both horizontal (row) and vertical (column) orientations.
Syntax:
<div class="d-flex flex-column">
...
</div>
<div class="d-flex flex-column-reverse">
...
</div>
Example: In this example, we are using flex-column to set our items (1,2, and 3) in the vertical direction and we use flex-column-reverse to set the item(4,5 and 6) vertically from the opposite side.
Output:
.png){kind=link}