如何使用Flex实现c1/c3左对齐、c2/c4右对齐的布局？

Absolutely! Flexbox is more than capable of handling this layout—you just need to use the order property to rearrange elements visually, even if their DOM order doesn't match. Let's break this down step by step.

First, Adjust the DOM Structure (Critical!) #

Looking at your original HTML, .c1 through .c4 are nested inside each other. Flexbox only works directly with child elements of a flex container, so we’ll pull these elements up to be direct siblings under .content (this is the most straightforward approach—if you absolutely need to keep nesting, we can tweak it, but this is cleaner):

<div class="content">
  <div class="c1">C1 Content</div>
  <div class="c2">C2 Content</div>
  <div class="c3">C3 Content</div>
  <div class="c4">C4 Content</div>
</div>

Implement the Flex Layout for Your Desired Sequence #

Now, turn .content into a flex container and use the order property to enforce your visual sequence (c1 → c3 → c2 → c4):

.content {
  display: flex;
  gap: 1rem; /* Adds spacing between elements—adjust to your preference */
  /* If you want true "left-right alignment" (like groups spaced across the container), uncomment this: */
  /* justify-content: space-between; */
}

/* Define the visual order of each element */
.c1 { order: 1; }
.c3 { order: 2; }
.c2 { order: 3; }
.c4 { order: 4; }

/* Optional: Style boxes for clarity */
.c1, .c2, .c3, .c4 {
  padding: 0.75rem;
  border: 1px solid #ddd;
}

If You Need Grouped Left/Right Alignment #

If "左右对齐" means grouping c1 + c3 on the left and c2 + c4 on the right, nest flex containers to keep groups intact:

<div class="content">
  <div class="left-group">
    <div class="c1">C1</div>
    <div class="c3">C3</div>
  </div>
  <div class="right-group">
    <div class="c2">C2</div>
    <div class="c4">C4</div>
  </div>
</div>

.content {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.left-group, .right-group {
  display: flex;
  gap: 1rem;
}

Why Your First Attempt Might Have Failed #

Chances are you tried to reorder nested elements without making them direct children of a flex container. Flexbox can’t reach into nested containers to reorder elements—only direct children can be controlled with order and flex alignment properties.

No need to fall back on <ul> or <table> here—Flexbox is the perfect tool for this kind of flexible, custom ordering!

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