Элементы Flex Box отзывчивы, но выровнены вправо - PullRequest
Новая
       30

Элементы Flex Box отзывчивы, но выровнены вправо

0 голосов
/ 06 апреля 2020

Я пытаюсь использовать flex box в адаптивном макете. Для больших размеров экрана я смог использовать flex. Но для небольших размеров экрана, не меняя раскладки, хотелось бы, чтобы это так. 1) Блок 4 находится слева направо 2) Блок 2 находится справа от блока 4 3) Блок 3 и 4 выровнены под блоком 2. Таким образом, под блоком 4 ничего нет.

Моя разметка как таковой: 

<div id="main">
    <div class ="greenbox" style="background-color:lightgreen;">Green BLOCK 1 with more content.</div>
  <div class ="bluebox" style="background-color:lightblue;">BLUE BLOCK 2</div>  
<div class ="yellowbox" style="background-color:yellow;">yellow BLOCK 3</div> 
  <div class ="redbox" style="background-color:coral;">BLOCK 4 RED</div>
</div>

Мой css для начала: 

#main {
  border: 1px solid black; 
  display: flex;
  align-content: flex-start

  align-items: center;
}

#main div {
padding: 10px;
}

.redbox {
order: -1;
}

Ответы [ 2 ]

1 голос
/ 06 апреля 2020

Вы можете использовать CSS -Grid для узких областей просмотра. Я использовал линейное размещение для позиционирования ваших ящиков.

Я не совсем уверен, где вы хотите разместить свои ящики. Итак, вот пример кода с произвольным позиционированием на данный момент: 

.box {
  box-shadow: inset 0 0 1em rgba(0, 0, 0, 0.4);
  padding: 1em;
  color: #FFF;
  font-family: sans-serif;
}

.box--green {
  background-color: #3D9970;
}

.box--blue {
  background-color: #0074D9;
}

.box--yellow {
  background-color: #FFDC00;
}

.box--red {
  background-color: #FF4136;
}

/* 
 * position your boxes wherever you want in your grid
 */

#main {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columns */
  grid-template-rows: repeat(2, 1fr); /* 2 rows */
}

.box--1 {
  grid-area: 1 / 1 / 2 / 3;
}

.box--2 {
  grid-area: 1 / 3 / 2 / 5;
}

.box--3 {
  grid-area: 2 / 3 / 3 / 4;
}

.box--4 {
  grid-area: 2 / 4 / 3 / 5;
}

/* 
 * use flex positioning (and get rid of the grid) on bigger screens 
 */

@media screen and (min-width: 960px) {
  #main {
    border: 1px solid black;
    display: flex;
    align-content: flex-start;
    align-items: center;
  }
  #main div {
    padding: 10px;
  }
  .redbox {
    order: -1;
  }
}
<main id="main">

  <div class="box box--1 box--green">BLOCK 1 - with more content</div>
  <div class="box box--2 box--blue">BLOCK 2</div>
  <div class="box box--3 box--yellow">BLOCK 3</div>
  <div class="box box--4 box--red">BLOCK 4</div>

</main>
0 голосов
/ 06 апреля 2020

Сначала вырежьте код стилей из html и поместите их в файл css. Это из-за использования css файла и чистого html файла.

Вернуться к вашему вопросу

Строго используйте @media query для вашего внутреннего макета css для плавно изменяйте размер от большего к маленькому экрану, наоборот.

Начните свой код с первого философского дизайна для мобильных устройств, затем выберите критическую точку, в которой вы хотите использовать эти @media screens, и, наконец, примените разный макет дизайна для каждой «потребности вашего экрана» один из них.

Для мобильных устройств сначала используйте это: 

.block1 {
     display: flex;
     flex-direction: flex-left;
     }

 .boxright2 {
      display: flex;
      flex-direction: flex-right;
    }
  .block3 .block4 {
    display: flex;
    flex-direction: row;
    Float: clear;
     }

Затем используйте приведенный ниже код для точки разрыва и добавьте или уменьшите размеры каждого элемента на основе представленного здесь окна просмотра: 

@media screen and (min-width:768px) {
   //your code goes here for tablet
   }

@media screen and (min-width: 1024px) {

//your code goes here for larger screen like desktop and laptop
}

P.S. play with them you will figure it out later.
...