How to use Bootstrap flexbox utilities?

Bootstrap's flexbox tool simplifies the creation of responsive layouts with predefined utility classes, without writing custom CSS. 1. Use .d-flex to turn elements into elastic containers, supporting responsive variants such as d-md-flex; 2. Use .flex-row, .flex-column, etc. to control the spindle direction, and can be combined with responsive breakpoints; 3. Align items along the spindle through the .justify-content-class, such as start, center or between; 4. Use .align-items-class to align on the cross axis, or use .align-self-* to set alignment for a single project; 5. Use .flex-wrap to control line breaks to achieve multi-line layout; 6. Use .flex-grow-1 and .flex-shrink-1 to control project scaling; 7. Common use cases include horizontal navigation, centered content and responsive card layout, where .flex-fill can make the project divide space evenly. Comprehensive use of these classes can quickly build complex layouts without the need for additional CSS.

Bootstrap's flexbox utilities make it easy to build flexible and responsive layouts without writing custom CSS. These utility classes are based on the CSS Flexbox model and can be applied directly in your HTML. Here's how to use them effectively:

1. Enable Flex Behavior on a Container

To turn an element into a flex container, use the .d-flex class:

 <div class="d-flex">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

This makes the <div> a flex container, and its children become flex items.

You can also use responsive variants like:

• d-sm-flex
• d-md-flex
• d-lg-flex
• d-xl-flex

For example, show as flex only on medium screens and up:

 <div class="d-md-flex">
  <!-- content -->
</div>

2. Control Flex Direction

Use direction classes to define the main axis of the flex container:

• .flex-row – left to right (default)
• .flex-row-reverse – right to left
• .flex-column – top to bottom
• .flex-column-reverse – bottom to top

 <div class="d-flex flex-row">
  <div>First</div>
  <div>Second</div>
</div>

Responsive versions are available too:

 <div class="d-flex flex-md-row flex-column">
  <!-- Stacks on small screens, horizontal on medium -->
</div>

3. Justify Content (Main Axis Alignment)

Align items along the main axis with .justify-content-* :

• .justify-content-start – items aligned to the start (default)
• .justify-content-end – aligned to the end
• .justify-content-center – centered
• .justify-content-between – space between items
• .justify-content-around – space around items
• .justify-content-evenly – evenly distributed

Example:

 <div class="d-flex justify-content-between">
  <div>Left</div>
  <div>Right</div>
</div>

4. Align Items (Cross Axis Alignment)

Align items along the cross axis (vertical when row, horizontal when column):

• .align-items-start – aligned to the top/start
• .align-items-end – aligned to the bottom/end
• .align-items-center – centered cross-axis
• .align-items-baseline – aligned by text baseline
• .align-items-stretch – stretch to fill container (default)

 <div class="d-flex align-items-center" style="height: 200px;">
  <div>This is vertically centered</div>
</div>

For per-item control, use .align-self-* on individual items:

 <div class="d-flex">
  <div class="align-self-start">Top</div>
  <div class="align-self-center">Middle</div>
  <div class="align-self-end">Bottom</div>
</div>

5. Control Wrapping

By default, flex items try to stay in one line. Use wrapping utilities to allow line breaks:

• .flex-nowrap – single line (default)
• .flex-wrap – allow wrapping
• .flex-wrap-reverse – wrap in reverse order

 <div class="d-flex flex-wrap">
  <div>Item 1</div>
  <div>Item 2</div>
  <!-- many items... -->
</div>

6. Grow and Shrink Flex Items

Control how items grow or shrink to fill available space:

• .flex-grow-1 – item grows to fill space
• .flex-grow-0 – item does not grow (default)
• .flex-shrink-1 – item shrinks if needed
• .flex-shrink-0 – item does not shrink

Example: Make one item take up remaining space

 <div class="d-flex">
  <div>Fixed</div>
  <div class="flex-grow-1">This will grow</div>
</div>

7. Common Use Cases

Horizontal navigation

 <nav class="d-flex justify-content-between">
  <a>Home</a>
  <a>About</a>
  <a>Contact</a>
</nav>

Centered content in a box

 <div class="d-flex justify-content-center align-items-center" style="height: 300px;">
  <p>Centered content</p>
</div>

Responsive card layout

 <div class="d-flex flex-wrap">
  <div class="flex-fill p-2">Card 1</div>
  <div class="flex-fill p-2">Card 2</div>
  <div class="flex-fill p-2">Card 3</div>
</div>

Note: .flex-fill makes items grow equally to fill the row.

Bootstrap's flex utilities are powerful and eliminate the need for custom CSS in most layout scenarios. Just remember:

• Always start with .d-flex
• Use responsive prefixes when needed
• Combine alignment, direction, and spacing utilities as required

Basically, you can handle most layouts with just a few classes—no extra CSS needed.

The above is the detailed content of How to use Bootstrap flexbox utilities?. For more information, please follow other related articles on the PHP Chinese website!