Flexbox flex-direction设置异常：屏幕宽度<700px时元素消失

Hey there! Let's work through this Flexbox issue you're facing—sounds like a classic media query or base setup gotcha. When your screen drops below 700px, not only isn't the flex direction switching to column, but all elements are disappearing? Let's break down the most likely culprits and fix them step by step:

1. You might have messed up the media query syntax or placement #

This is the #1 reason media queries fail. First, double-check that your media query is written correctly and placed after your base Flexbox styles (CSS uses cascading, so later rules override earlier ones).

Wrong placement example (media query gets overridden):

@media (max-width: 700px) {
  .flex-container { flex-direction: column; }
}

.flex-container {
  display: flex;
  flex-direction: row;
}

Correct setup:

/* Base styles first */
.flex-container {
  display: flex;
  flex-direction: row;
}

/* Media query comes AFTER base styles */
@media (max-width: 700px) {
  .flex-container {
    flex-direction: column;
  }
}

Also make sure you didn't skip parentheses around the condition, or misspell max-width (like maxwidth)—tiny typos break everything!

2. Your flex container isn't properly initialized #

If you forget to set display: flex; on the parent container, the flex-direction property does nothing at all. Worse, without that base rule, your block elements might collapse or behave unexpectedly, leading to them seeming "invisible".

Always start with this base for your container:

.flex-container {
  display: flex;
  flex-direction: row; /* Default, can be omitted but explicit is clearer */
  min-height: 100vh; /* Optional but prevents container from collapsing to 0 height */
  gap: 1rem; /* Optional, adds space between items */
}

3. Your flex items have no defined size (causing them to disappear) #

When switching to flex-direction: column, the main axis becomes vertical. If your items don't have a height or flex grow property, they might shrink to 0 height and look like they're gone. Add a flex property to your items to give them space in the container:

.flex-item {
  flex: 1; /* Makes items grow to fill available space vertically in column mode */
  padding: 2rem; /* Adds visible content space */
  background: #f0f0f0; /* Helps you see the items */
}

4. Check for accidental overflow or visibility rules #

Double-check that neither your container nor items have overflow: hidden; or visibility: hidden; rules that might kick in at smaller screen sizes. Sometimes these get added unintentionally in other CSS rules.

Full working example #

Here's a complete index.html snippet that should work as expected:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Column Test</title>
  <style>
    .flex-container {
      display: flex;
      flex-direction: row;
      min-height: 100vh;
      gap: 1rem;
      padding: 1rem;
      box-sizing: border-box;
    }

    .flex-item {
      flex: 1;
      padding: 2rem;
      background: #eee;
      border-radius: 4px;
    }

    @media (max-width: 700px) {
      .flex-container {
        flex-direction: column;
      }
    }
  </style>
</head>
<body>
  <div class="flex-container">
    <div class="flex-item">First Block Element</div>
    <div class="flex-item">Second Block Element</div>
  </div>
</body>
</html>

Just copy this into your index.html, adjust styles as needed, and it should switch to column layout below 700px without hiding elements.

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