Макет Flexbox с раскрывающимся списком и кнопками - PullRequest
Новая
       30

Макет Flexbox с раскрывающимся списком и кнопками

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

Я пытаюсь сделать простой макет, используя FlexBox.Я ищу похожий вопрос, но не могу найти то, что может мне помочь.Извините, если есть что-то похожее.

Моя цель:

enter image description here

label A, dropdown menu и label B (не buttons) должен быть изменен при изменении размера экрана, но текст label A и label B всегда должен быть в одной строке.На мобильном устройстве хотелось бы, чтобы label B и buttons были в новой строке.

Макет должен быть адаптивным: когда ширина экрана становится меньше, выпадающий элемент div должен быть меньше.Если все элементы больше размера экрана, тогда label B и четыре кнопки должны находиться в новом ряду.

Я пытаюсь использовать Flexbox.

Это мой простойкод: 

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  text-align: center; 
  border: 1px solid black;
}

.button {
  border: 1px solid black;
  background: gray;
}
<div class="container">
  <div>Label A</div>
  
  <div>Dropdown menu</div> 
  
  <div>Label B</div>
  
  <div>
    <div class="button">Button 1</div>
    <div class="button">Button 2</div>
    <div class="button">Button 3</div>
    <div class="button">Button 4</div>
  </div>
</div>

Как видите, есть некоторые проблемы.

Я пытаюсь wrap, но я хочу, чтобы buttons всегда были вместе.

Я новичок, поэтому мне нужна помощь.Я прочитал эту прекрасную статью о гибкости, но у меня все еще есть проблемы.

Ответы [ 2 ]

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

я добавил button-block класс к кнопкам и добавил ниже CSS. .button-block { дисплей: гибкий; }

также добавлено flex-wrap: wrap; в класс .container. 

.container {
  display: flex;
  justify-content: space-between;
  text-align: center;
  border: 1px solid black;
  flex-wrap: wrap;
}

.button {
  border: 1px solid black;
  background: gray;
}

.button-block {
  display: flex;
}
<div class="container">
  <div>Label A</div>
  
  <div>Dropdown menu</div> 
  
  <div>Label B</div>
  
  <div class="button-block ">
    <div class="button">Button 1</div>
    <div class="button">Button 2</div>
    <div class="button">Button 3</div>
    <div class="button">Button 4</div>
  </div>
</div>
1 голос
/ 03 апреля 2019

Это то, что вы пытаетесь достичь? 

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  text-align: center; 
  border: 1px solid black;
}

.button {
  border: 1px solid black;
  background: gray;
}
#button-row {
  display: flex;
  flex-direction: row;
}

и 

<div class="container">
  <div>Label A</div>

  <div>Dropdown menu</div> 

  <div>Label B</div>

  <div id="button-row">
    <div class="button">Button 1</div>
    <div class="button">Button 2</div>
    <div class="button">Button 3</div>
    <div class="button">Button 4</div>
  </div>
</div>

Вот jsfiddle: https://jsfiddle.net/sek0q4vL/

...