Master Uniapp Flex Layout: Quick Multi‑Platform Styling Guide

Core Goal

Learn Uniapp styling conventions with a focus on Flex layout, enabling rapid creation of common page layouts (navigation bars, lists, button groups) that adapt to multiple platforms.

Prerequisites

Familiarity with basic Vue syntax, ability to edit the style section of .vue files, and understanding of the static folder.

1. Three Essential Uniapp Styling Rules

Use rpx instead of px – rpx automatically scales to different screen sizes (≈0.5 px based on a 750 px design), eliminating manual ratio calculations.

Scope styles to a page by adding the scoped attribute to the style tag, preventing style leakage between components.

CSS and SCSS are both supported without extra configuration; start with plain CSS and later adopt SCSS for easier style authoring.

Note: Uniapp does not support @import for external CSS files.

2. Hands‑On Flex Layout (Three High‑Frequency Scenarios)

Scenario 1 – Horizontal Centering (e.g., navigation title, centered button)

Template markup:

<template>
  <view class="container">
    <button class="btn">Horizontal Center Button</button>
  </view>
</template>

Scoped style:

<style scoped>
.container {
  display: flex;               /* enable Flex */
  justify-content: center;    /* horizontal centering */
  margin-top: 50rpx;           /* top offset, responsive */
}
.btn {
  width: 200rpx;
  height: 80rpx;
}
</style>

Result: the button appears centered horizontally on both H5 and mini‑program builds.

Scenario 2 – Vertical Centering (e.g., login button, centered message)

Reuse the template from Scenario 1 and adjust the container style:

.container {
  display: flex;
  justify-content: center;   /* horizontal */
  align-items: center;       /* vertical */
  height: 100vh;            /* full viewport height */
  background-color: #f5f5f5;
}

Result: the button is positioned at the exact center of the screen, adapting to any screen size.

Scenario 3 – Even Distribution (e.g., top navigation icons, bottom tab bar)

Template markup with three placeholder icons:

<template>
  <view class="nav-container">
    <view class="nav-item">Home</view>
    <view class="nav-item">Category</view>
    <view class="nav-item">Me</view>
  </view>
</template>

Scoped style:

.nav-container {
  display: flex;
  justify-content: space-around; /* even spacing */
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}
.nav-item {
  width: 80rpx;
  height: 80rpx;
  background-color: #4cd964;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 24rpx;
}

Result: three circular buttons are evenly spaced across the top, automatically adjusting spacing for different screen widths.

3. Core Flex Properties to Remember

justify-content – controls horizontal arrangement. Common values: center, space-around, flex-start (default), flex-end.

align-items – controls vertical arrangement. Common values: center, flex-start (default), flex-end.

flex-direction – determines the main axis direction. Common values: row (default, horizontal) and column (vertical).

4. Common Pitfalls for Beginners

Pitfall 1: Using px leads to broken multi‑platform adaptation. Solution: Replace all dimensions with rpx, except rare cases like a 1 px border.

Pitfall 2: Forgetting the scoped attribute causes style conflicts. Solution: Add scoped to every page’s style tag.

Pitfall 3: Flex layout not taking effect. Solution: Ensure the parent container has display: flex and that no other styles (e.g., conflicting margins or paddings) hide the flex items.