Flexbox布局中无法切换左右Div位置的问题求助

你的布局中Flex容器main下的left和right两个Div无法调换位置，可通过以下几种方式解决：

方法1：直接调整HTML结构顺序 #

把HTML中right Div移到left Div前面，这是最直观的方式：

<main class="main">
    <div class="right">
        <div class="how-it-works-image-container">
            <img src="/Users/miguel/Desktop/Website/hiwfinal.png" alt="How It Works" class="how-it-works-image">
        </div>
    </div>
    <div class="left">
        <div class="about-us-text">
            <h3>About Us</h3>
        </div>
        <div class="map-section">
            <h3>Where to find us...</h3>
            <div class="map-container">
                <iframe src="https://www.google.com/maps/embe..."></iframe>
            </div>
        </div>
    </div>
</main>

方法2：通过Flex容器属性反转排列方向 #

给.main添加flex-direction: row-reverse，无需修改HTML即可反转子元素顺序：

.main {
    display: flex;
    flex-direction: row-reverse; /* 新增这一行 */
}

.left, .right {
    width: 50%;
    padding: 0 30px;
    box-sizing: border-box;
}

/* 其他原有CSS保持不变 */

方法3：用order属性单独控制元素顺序 #

如果不需要整体反转，只想调整个别元素的位置，可以给两个Div设置order属性，数值越小越靠前：

.main {
    display: flex;
}

.left {
    width: 50%;
    padding: 0 30px;
    box-sizing: border-box;
    padding-right: 20px;
    order: 2; /* 让left排在后面 */
}

.right {
    width: 50%;
    padding: 0 30px;
    box-sizing: border-box;
    padding-left: 20px;
    order: 1; /* 让right排在前面 */
}

/* 其他原有CSS保持不变 */

以上三种方法任选其一即可实现位置切换，根据你的实际需求选择最合适的方式。

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