使用uk-flex-row-reverse时行布局内容对齐异常问题

问题根源 #

你遇到的内容重叠，核心原因是**uk-flex-row-reverse仅反转了flex子元素的排列顺序，但子元素内部的布局规则没有自动适配反向布局**：

• 第二个section中，文本容器的uk-width-4-5类默认向左收缩（占父容器4/5宽度），但在uk-flex-row-reverse布局下，文本子元素已被放到flex容器右侧，这个向左收缩的规则会导致文本内容溢出到左侧图片区域，造成重叠。
• 另外你的flex容器里重复写了uk-flex类（比如<div class="uk-flex uk-flex-middle uk-flex uk-flex-row-reverse">），冗余代码可能干扰布局计算。

修复方案 #

1. 调整文本容器的对齐方向 #

给第二个section里的uk-width-4-5容器添加uk-margin-left-auto类，让文本容器在反向布局中向右对齐，占据右侧可用空间，避免和左侧图片重叠：

修改后的第二个section代码：

<section class="uk-section uk-background-muted">
    <div class="uk-container uk-container-large">
        <div class="uk-flex uk-flex-middle uk-flex-row-reverse">
            <div class="uk-width-expand">
                <h2 class="uk-text-purple uk-text-boldest uk-h1 uk-margin-remove-top">
                    Security you can count on                   
                </h2>
                <div class="uk-text-bold uk-width-4-5 uk-margin-left-auto">
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</p>
                </div>
            </div>
            <div class="uk-width-1-3">
                <img src="/site/assets/files/1386/1600x900.svg">
            </div>
        </div>
    </div>
</section>

2. 清理冗余flex类 #

把flex容器中重复的uk-flex删除，保持类名简洁：
原代码：

<div class="uk-flex uk-flex-middle uk-flex uk-flex-row-reverse">

修改为：

<div class="uk-flex uk-flex-middle uk-flex-row-reverse">

补充说明 #

如果需要响应式适配，可以把uk-width-4-5替换为uk-width-4-5@m，确保移动端时文本容器自动占满宽度，避免布局错乱。

内容的提问来源于stack exchange，提问作者1878castle