Flexbox 布局，桌面两列，移动一列

Question

带有 flexbox 问题的简单布局：

桌面布局要求

• 两个响应列
• 第一列，宽度的 30%
• 宽度为 70% 的第二列

移动布局要求

• 单个响应列
• 100% 宽度的第一行（这是桌面上的第一列）
• 宽度为 100% 的第二行（这是桌面上的第二列）

到目前为止我所得到的：

当我切换到mobile（例如通过按钮单击下面的代码片段）模式时，我flex-direction: column在 flex 容器上设置。它似乎工作。

#flexContainer {
  display: flex;
}

#flexItem1 {
  background-color: lightblue;
  flex: 30%;
}

#flexItem2 {
  flex: 70%;
  background-color: lightgreen;
}

---

笔记：

这个问题是关于需要更改哪些 CSS flexbox 属性才能从桌面布局转到移动布局。这与如何检测窗口大小或如何设置媒体查询无关。如果我写的方式没有说清楚，我很抱歉。

---

题

有没有更清洁的方法来做到这一点？我是否需要设定flex的属性flexItems来100%当移动模式还是可以让他们为30%和70%，因为他们似乎并不时重要flex-direction设为column？

#flexContainer {
  display: flex;
}

#flexItem1 {
  background-color: lightblue;
  flex: 30%;
}

#flexItem2 {
  flex: 70%;
  background-color: lightgreen;
}

function App() {
 
  const [mobile,setMobile] = React.useState(false);
    
  return(
  <React.Fragment>
    <div id="flexContainer" style={mobile ? {flexDirection: 'column'} : null}>
      <div id="flexItem1">Item 1</div>
      <div id="flexItem2">Item 2</div>
    </div>
    <button onClick={()=>setMobile(prevState=>!prevState)}>Toogle</button>
  </React.Fragment>
  );
}


ReactDOM.render(<App/>, document.getElementById('root'));

#flexContainer {
  display: flex;
}

#flexItem1 {
  background-color: lightblue;
  flex: 30%;
}

#flexItem2 {
  flex: 70%;
  background-color: lightgreen;
}

Answer 1

由于您没有从移动设备到桌面设备的任何奇怪的列切换，我会做的是这个（我相信这是最干净的方式）

首先开始考虑移动（移动优先是最佳实践），然后使用桌面版本的媒体查询。基本上将您的容器设置为显示块并将其中两列的宽度设置为 100%。然后在桌面上，通过查询使您的容器变得灵活。

CSS：

#flexContainer {
  display: block;
  background-color: blue;
}

@media only screen and (min-width: 1024px) {
  #flexContainer {
    display: flex;
  }
}

或者就像我在 SCSS 中所做的那样：

#flexContainer {
  display: block;
  background-color: blue;

     @media only screen and (min-width: 1024px) {
        display: flex;
     }
}