Макет Flexbox с двумя колонками на рабочем столе и одной колонкой на мобильном

Question

Простой макет с вопросом о flexbox:

Требования к макету рабочего стола

• Две отзывчивые колонки
• 1-й столбец с 30% ширины
• 2-й столбец с 70% ширины

Требования к мобильной компоновке

• Один отзывчивый столбец
• 1-й ряд со 100% шириной (это 1-й столбец на рабочем столе)
• 2-й ряд со 100% шириной (это 2-й столбец на рабочем столе)

Что у меня так далеко:

Когда я переключаюсь в режим mobile (с помощью нажатия кнопки, например, во фрагменте ниже), я устанавливаю flex-direction: column для контейнера flex. Вроде работает.

#flexContainer {
  display: flex;
}

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

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

---

ПРИМЕЧАНИЕ:

Этот вопрос о том, какие свойства flexbox CSS необходимо изменить, чтобы перейти от макета рабочего стола к макету мобильного устройства. Речь идет не о том, как определить размер окна или как установить медиа-запрос. Извините, если то, как я это написал, не очень понятно.

---

ВОПРОС

Есть ли более чистый способ, как это сделать? Нужно ли мне устанавливать для свойства flex 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;
}

<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

Поскольку у вас нет странного переключения столбцов с мобильного телефона на настольный компьютер, я бы сделал следующее (и я считаю, что это самый чистый способ)

Сначала подумайте о мобильном (мобильный сначала - это лучше всего)практика), а затем использовать медиа-запросы для настольной версии.В основном установите контейнер для отображения блока и установите ширину обоих столбцов внутри него на 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