Используйте Flexbox для создания адаптивного макета - PullRequest
Новая
       13

Используйте Flexbox для создания адаптивного макета

0 голосов
/ 03 апреля 2019

Я впервые пытаюсь использовать Flexbox, и у меня возникают некоторые проблемы.

Я хочу создать адаптивный макет, который работает на рабочем столе, планшете и макете, как этот:

layout

Я пишу этот код: 

var screenType = 'mobile' // this variable return 'mobile' or 'tablet' or 'desktop'
.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.big {
  background-color: tomato;
  width: 60%;
  height: 100%;
}

.small {
  background-color: green;
  width: 40%;
  height: 100%;
}
<div class="container">
  <div class="big">big</div>
  <div class="small">small</div>
</div>

Как использовать тип переменной для создания другого макета с помощью Flex?

Я думаю, что мне нужно изменить width, height, flex-direction но я не знаю как ...

1 Ответ

0 голосов
/ 03 апреля 2019

Если у вас есть переменная JS, заполненная предустановленным типом экрана, вы можете использовать ее в качестве имени класса, добавляемого к элементу <body>, например: 

document.body.classList.add(screenType);

И затемв своем CSS вы просто создаете модификаторы своих ранее существующих стилей, например .eg 

.container {
  // Default styles for desktop
}

.mobile .container,
.tablet .container {
  // Modified styles for mobile/tablet
}

Кроме того, вам нужно будет использовать свойство order в спецификации flexbox, чтобы вы могли повторно-организовать элементыПоявление.В вашем примере контейнер .big большой на некоторых устройствах, но на самом деле он меньше других устройств.

См. Пример проверки концепции: 

function setScreenType() {
  var screenType = document.getElementById('screenType').value;
  document.body.classList.remove('mobile', 'desktop', 'tablet');
  document.body.classList.add(screenType);
}

setScreenType();

document.getElementById('screenType').addEventListener('change', function() {
  setScreenType();
});
body {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  flex: 1 1 auto;
  width: 100vw;
  height: 100vh;
}

.content1 {
  background-color: tomato;
  width: 80%;
  height: 100%;
  order: 2;
}

.content2 {
  background-color: green;
  width: 20%;
  height: 100%;
  order: 1;
}

.mobile .container,
.tablet .container {
  flex-direction: column;
}

.mobile .content1,
.tablet .content1 {
  width: 100%;
  height: 20%;
  order: 1;
}

.mobile .content2,
.tablet .content2 {
  width: 100%;
  height: 80%;
  order: 2;
}
<!-- This is just to simulate different screen types -->
<form>
  <select id="screenType">
    <option value="mobile" selected>Mobile</option>
    <option value="tablet">Tablet</option>
    <option value="desktop">Desktop</option>
  </select>
</form>

<div class="container">
  <div class="content1">content1</div>
  <div class="content2">content2</div>
</div>
...