javascript - Flexbox 布局，在桌面上有两列，在移动设备上有一列

Question

带有flexbox问题的简单布局:

桌面布局要求

• 两个响应列
• 第 1 列，占宽度的 30%
• 第 2 列，占宽度的 70%

移动布局要求

• 单一响应列
• 第 1 行，宽度为 100%(这是桌面上的第 1 列)
• 第 2 行，宽度为 100%(这是桌面上的第 2 列)

到目前为止我得到了什么:

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

#flexContainer {
  display: flex;
}

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

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

---

注意:

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

---

问题

是否有更简洁的方法来执行此操作？ 在移动模式下，我是否需要将 flexItems 的 flex 属性设置为 100% 还是可以将它们保留为 30% 和 70% 因为当 flex-direction 设置为 column 时它们似乎无关紧要？

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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 1

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

首先考虑移动设备(移动设备优先是最佳实践)，然后对桌面版本使用媒体查询。基本上将您的容器设置为显示 block 并将其中两列的宽度设置为 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;
     }
}