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

вопрос создан в Wed, May 8, 2019 12:00 AM

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

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

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

Требования к макету для мобильных устройств

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

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

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

#flexContainer {
  display: flex;
}

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

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

ПРИМЕЧАНИЕ.

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

Вопрос

Есть ли более чистый способ, как это сделать? Нужно ли устанавливать для flex свойство flexItems значение 100%, когда в мобильном режиме, или я могу оставить их как 30% и 70%, так как они, кажется, не имеют значения, если 06003503506250621111 устанавливается в flex-direction62, если они не имеют значения

column
    
0
  1. использование медиазапроса для переключения на
    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>
    - хороший способ справиться с этим, я думаю ...
    2019-05-08 16: 37: 41Z
  2. Спасибо! Хотя я не использую медиа-запросы. Но мой вопрос касается самих CSS-свойств макета flexbox (например, как правильно установить свойства flex для достижения этой цели). Независимо от того, как я реализую переключение с мобильного на настольный компьютер.
    2019-05-08 17: 00: 40Z
  3. Медиа-запросы были бы простыми ... вот решение, использующее обертывание flexbox с использованием flex-direction: column относительно мобильной точки останова codepen.io/anon/pen/MRNoZz
    2019-05-08 17: 28: 25Z
2 ответа                              2                         

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

Сначала подумайте о мобильных устройствах (сначала рекомендуется использовать мобильные устройства), а затем используйте медиазапросы для настольной версии. В основном установите контейнер для отображения блока и установите ширину обоих столбцов внутри него на 100%. затем на рабочем столе сделайте контейнер более гибким с помощью запроса.

CSS

flex-basis

Или как я бы это сделал в SCSS:

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

@media only screen and (min-width: 1024px) {
  #flexContainer {
    display: flex;
  }
}
    
1
2019-05-08 17: 20: 47Z
  1. Спасибо! А что бы вы сделали с пропорциями flexItems? Мне нужно, чтобы первый столбец был 30%, а второй - 70%.
    2019-05-08 17: 25: 07Z
  2. @ cbdev420 эй. Я думаю, что в этом случае вам нужно прочитать это переполнение стека размещать . Кроме того, старайтесь избегать идентификаторов в качестве основы для CSS. Общее правило: идентификаторы предназначены для получения этого с помощью js /act и т. Д., Классы для стилизации.
    2019-05-09 12: 03: 48Z

Вы можете использовать точку останова со стилизованными компонентами.

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

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

0
2019-05-08 17: 15: 47Z
#flexContainer {
  display: block;
  background-color: blue;

     @media only screen and (min-width: 1024px) {
        display: flex;
     }
}
источник размещен Вот