Using flexbox to rearrange portal components

Flexbox (Flexible Box Layout) is one of the most efficient and responsive ways to organize content in web development. In Microsoft Power Pages, Flexbox can be especially powerful for creating dynamic layouts, responsive designs, and mobile-friendly component arrangements without relying heavily on custom JavaScript.

Below is a comprehensive guide (~1000 words) to help you rearrange portal components using Flexbox, including practical examples and tips for usage in Power Pages.

---

1. Why Flexbox in Power Pages?

Power Pages allows injecting custom HTML, CSS, and JavaScript. Using Flexbox:

• Makes layouts adaptive and mobile-friendly.
• Helps align, space, and reorder components easily.
• Reduces the need for media queries in simple responsive cases.
• Allows clean UI without bloated CSS.

---

2. Basic Flexbox Syntax

Flexbox is applied by setting display: flex; on a container. The children become flexible items.

Example:

<div class="flex-container">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
</div>

CSS:

.flex-container {
  display: flex;
  gap: 20px;
}

.box {
  flex: 1;
  padding: 20px;
  background: #f1f1f1;
  text-align: center;
}

---

3. Power Pages Use Case: Reorder Components

Imagine a page with 3 sections: a form, a map, and a sidebar. You want them side-by-side on desktop, but stacked on mobile.

HTML:

<div class="layout">
  <div class="form-section">Form</div>
  <div class="map-section">Map</div>
  <div class="sidebar">Sidebar</div>
</div>

CSS:

cssCopyEdit.layout {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.form-section,
.map-section,
.sidebar {
  flex: 1 1 100%;
}

@media (min-width: 768px) {
  .form-section {
    order: 1;
    flex: 2;
  }

  .map-section {
    order: 2;
    flex: 3;
  }

  .sidebar {
    order: 3;
    flex: 1;
  }
}

✔ Result: On desktop, the layout flows side-by-side with designated flex sizes. On mobile, all stack vertically.

---

🔹 4. Aligning Items Vertically or Centered

Flexbox allows vertical and horizontal centering with minimal CSS.

.centered-layout {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

This is useful for portal landing pages, modals, or thank-you screens.

---

5. Wrapping and Spacing Flex Items

To allow components to wrap when space is limited:

.flex-wrap-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

• gap provides spacing without extra margin hacks.
• wrap ensures layout doesn’t break on smaller screens.

---

6. Conditional Reordering with Media Queries

You may want different orderings on mobile vs. desktop.

.component {
  order: 1;
}

@media (max-width: 600px) {
  .component {
    order: 3;
  }
}

This is helpful for reordering a contact form to appear below a map on mobile, even if it’s defined first in the markup.

---

7. Combining Flexbox with Power Pages Forms or Lists

Let’s say you have a custom web page with:

• A Power Pages Web Form
• A list of FAQs
• A Contact Us card

Use Flexbox to arrange:

HTML:

<div class="flex-layout">
  <div class="portal-form"> {% entityform name:"ContactForm" %} </div>
  <div class="faq-list"> {% weblist name:"FAQList" %} </div>
  <div class="contact-card">Contact info</div>
</div>

CSS:

.flex-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.portal-form, .faq-list, .contact-card {
  flex: 1 1 300px;
}

This allows the layout to gracefully adapt on all screen sizes.

---

8. Responsive Columns with Equal Height

Flexbox naturally aligns and stretches child components:

.equal-height {
  display: flex;
  gap: 1rem;
}

.equal-height > div {
  background: #fff;
  padding: 20px;
  flex: 1;
}

Perfect for cards, team member profiles, or feature lists.

---

9. Centered Form with Max Width

To center a portal form:

.form-wrapper {
  display: flex;
  justify-content: center;
}

.form-wrapper .form-content {
  max-width: 600px;
  flex: 1;
}

Use with:

<div class="form-wrapper">
  <div class="form-content">
    {% entityform name:"RequestForm" %}
  </div>
</div>

---

10. Flexbox for Nav Menus and Headers

Use Flexbox in your custom headers:

<div class="header">
  <div class="logo">Logo</div>
  <nav class="menu">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Support</a>
  </nav>
</div>

CSS:

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu a {
  margin-left: 20px;
}

---

11. Accessibility Considerations

• Flexbox does not alter semantic order, so screen readers still read based on HTML sequence.
• If you visually reorder items, double-check with a screen reader.

---

12. Debugging Tips

• Use DevTools > Layout > Flexbox overlays in Chrome or Edge.
• Always test across screen sizes and orientations.