Question

带有弹性框问题的简单布局：

桌面布局要求

两个响应列
第一列，其宽度为30％
第二列，其宽度为70％

移动版式要求

单响应列
第一行，宽度为100％（这是台式机上的第一列）
第二行，宽度为100％（这是台式机上的第二列）

到目前为止我所拥有的：

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

#flexContainer {
  display: flex;
}

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

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

注意：

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

问题

有没有更清洁的方法来做到这一点？在移动模式下是否需要将flex的{{1}}属性设置为flexItems，还是可以将它们分别设置为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;
}

Answer 1

由于您没有从移动设备到台式机的任何奇怪的列切换方式，所以我要做的是（我相信这是最干净的方法）

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

Answer 2

您可以将断点与样式化的组件一起使用。

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

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

Flexbox布局，台式机两列，移动设备一列

2 个答案: