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

Posted 2023-03-06

【中文标题】Flexbox 布局，桌面上有两列，移动设备上有一列

【英文标题】：Flexbox layout with two columns on desktop and one column on mobile

【发布时间】：2019-09-26 10:41:29

【问题描述】：

带有 flexbox 问题的简单布局：

桌面布局要求

两个响应列

第一列

占宽度的 30%

第二列

占宽度的 70%

移动版式要求

单一响应列

第一行

，宽度为 100%（这是桌面上的第一列）

第 2 行

，宽度为 100%（这是桌面上的第 2 列）

到目前为止我的收获：

当我切换到mobile（通过按钮单击例如下面的 sn-p）模式时，我在 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>

【问题讨论】：

使用 媒体查询 切换到flex-direction: column 是一种很好的处理方式我猜...

谢谢！虽然我没有使用媒体查询。但我的问题是关于布局 flexbox CSS 属性本身（例如，如何以正确的方式设置 flex 属性以实现这一点）。不管我如何实现从移动到桌面的切换。

媒体查询会很简单...这是一个使用 wrapping flexbox 的解决方案，使用 flex-basis 相对于移动断点 codepen.io/anon/pen/MRNoZz

【参考方案1】：

您可以在样式化的组件中使用断点。

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

https://www.styled-components.com/docs/basics

【参考方案2】：

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

首先考虑移动设备（移动设备优先是最佳做法），然后将媒体查询用于桌面版本。基本上将您的容器设置为显示块，并将其中两列的宽度设置为 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;
     

【讨论】：

谢谢！你会如何处理 flexItems 的比例？我需要第一列为 30%，第二列为 70%。

@cbdev420 嘿。我认为在这种情况下你需要阅读这个stack overflow post。另外，尽量避免将 id 作为 css 的基础。一般规则：ids 用于通过 js/react 等获取，classes 用于样式。

多么有趣的答案……完美匹配这个网站……https://newbedev.com/flexbox-layout-with-two-columns-on-desktop-and-one-column-on-mobile

@Millhorn 恰恰相反，这是我多年前的真实答案。我很高兴有人会偷它。