如何设置页面宽度变量并实现1840px以下文本块上移？

Hey Jesse, let's work through your responsive layout problem and get that text block shifting up when the screen drops below 1840px. Here's a step-by-step solution tailored to your issue:

1. Fix the Overlap & Get the Text Block to Shift Up #

It sounds like your flex-wrap: wrap isn't kicking in because your flex child elements might have fixed widths or the container isn't set up to allow proper wrapping. Let's adjust this with media queries and refined flex properties:

First, let's assume your core HTML structure looks like this:

<div class="content-container">
  <div class="text-block">Your left-side text content</div>
  <div class="image-group">
    <!-- 4 images arranged in your grid -->
  </div>
</div>

Adjust Your Base CSS #

Start with a flexible foundation that allows wrapping when space runs out:

.content-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem; /* Adds spacing to prevent immediate overlap */
  align-items: flex-start;
}

.text-block {
  flex: 1 1 600px; /* Let text block grow/shrink, with a minimum width of 600px */
}

.image-group {
  flex: 1 1 800px; /* Let image group grow/shrink, with a minimum width of 800px */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

Add the Media Query for <1840px Screens #

Now force the text block to move above the images when the screen hits your threshold:

@media (max-width: 1840px) {
  .content-container {
    flex-direction: column; /* Stack elements vertically so text sits on top */
  }

  .text-block, .image-group {
    flex: 1 1 100%; /* Force both elements to take full container width */
  }
}

If you don't want full vertical stacking (just the text to shift up while keeping some side-by-side space), tweak the media query to use the order property instead:

@media (max-width: 1840px) {
  .text-block {
    order: -1; /* Moves the text block before the image group in the layout */
    flex: 1 1 100%;
  }
}

Pro tip: Double-check for min-width properties on your text block or images—these can lock elements into fixed sizes and prevent flex-wrap from working as expected.

2. Set Up a Dynamic Page Width Variable for JavaScript Control #

To create a reusable page width variable you can modify with JS, use CSS custom properties (variables):

Step 1: Define the Variable in CSS #

:root {
  --page-width: 100%; /* Default value */
}

/* Use the variable wherever you need page-wide width control */
.content-container {
  width: var(--page-width);
  max-width: 1920px; /* Optional: Limit maximum container width */
  margin: 0 auto;
}

Step 2: Modify the Variable with JavaScript #

You can now update this variable dynamically whenever needed:

// Example 1: Set page width to 90% of the viewport
document.documentElement.style.setProperty('--page-width', '90%');

// Example 2: Set page width to match the current window width
const currentWindowWidth = window.innerWidth + 'px';
document.documentElement.style.setProperty('--page-width', currentWindowWidth);

3. Why Your Original flex-wrap: wrap Didn't Work #

Common culprits for flex-wrap failure:

• Flex child elements have fixed widths (e.g., width: 900px) instead of flexible values like flex-basis or percentages.
• The flex container has a fixed width that doesn't shrink with the screen, preventing wrapping.
• CSS specificity issues: Another rule is overriding your flex-wrap: wrap declaration (use browser dev tools to inspect and confirm).

内容的提问来源于stack exchange，提问作者Jesse van Leeuwen