Направление гибкости не соблюдается

Я создал список настроек для определенного приложения. Контейнером для всех настроек является flex-элемент, а направление flex установлено на столбец. Теперь я создал div с классом .option и поместил h2 и <select>. Я установил контейнер .option для отображения как гибкий и установил направление для строки, но это не работает! Они складываются!

Я пытался сделать встроенные блоки h2 и <select>, пытался установить ширину каждого из них на 50%, но ничего. Я прикреплю помеченный скриншот, а также фрагмент html и css соответствующего кода.

#SettingsOverlay {
  display: block;
  position: fixed;
  z-index: 3;
  width: 100%;
  height: 100%;
  background-color: rgba(48, 48, 48, 0.7);
  background-size: cover;
}

#SettingsOverlay div {
  width: 80%;
  height: 80%;
  background-color: purple;
  margin: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

#Options {
  display: flex;
  flex-direction: column;
}

.option {
  display: flex;
  flex-direction: row;
}

.option h2 {
  display: inline-block;
  width: 50%;
}

.option select {
  display: inline-block;
  width: 50%;
}

<div id='SettingsOverlay'>
  <div>
    <h1>Settings</h1>
    <div id='Options'>
      <div class='option'>
        <h2>Timezone</h2>
        <select>
          <option value = "GMT-12">GMT-12</option>
          <option value = "GMT-11">GMT-11</option>
          <option value = "GMT-10">GMT-10</option>
          <option value = "GMT-9">GMT-9</option>
          <option value = "GMT-8">GMT-8</option>
          <option value = "GMT-7">GMT-7</option>
          <option value = "GMT-6">GMT-6</option>
          <option value = "GMT-5">GMT-5</option>
          <option value = "GMT-4">GMT-4</option>
          <option value = "GMT-3">GMT-3</option>
          <option value = "GMT-2">GMT-2</option>
          <option value = "GMT-1">GMT-1</option>
          <option value = "GMT">GMT</option>
          <option value = "GMT+1">GMT+1</option>
          <option value = "GMT+2">GMT+2</option>
          <option value = "GMT+3">GMT+3</option>
          <option value = "GMT+4">GMT+4</option>
          <option value = "GMT+5">GMT+5</option>
          <option value = "GMT+6">GMT+6</option>
          <option value = "GMT+7">GMT+7</option>
          <option value = "GMT+8">GMT+8</option>
          <option value = "GMT+9">GMT+9</option>
          <option value = "GMT+10">GMT+10</option>
          <option value = "GMT+11">GMT+11</option>
          <option value = "GMT+12">GMT+12</option>
        </select>
      </div>
    </div>
  </div>
</div>

Изображение пользовательского интерфейса не работает

Установка display на none для вашего самого внешнего элемента, кажется, противоречит цели публикации примера

— 06.03.2019 17:31

О дерьмо! Это было потому, что когда вы нажимаете кнопку, она появляется на веб-сайте, я забыл это удалить, извините

— 06.03.2019 17:36

Извините, но я не знал, что проблема была в специфичности, поэтому я не нашел ответы, которые вы, ребята, предоставили.

— 07.03.2019 17:53

html css flexbox

06.03.2019 17:05

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

117

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Ответ принят как подходящий

Ваше правило .option перезаписывается #SettingsOverlay div, превратите его в #SettingsOverlay > div или увеличьте специфичность css .option, используя также родительский идентификатор #SettingsOverlay .option

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors.
How is specificity calculated?
Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element. Specificity only applies when the same element is targeted by multiple declarations. As per CSS rules, directly targeted elements will always take precedence over rules which an element inherits from its ancestor.

#SettingsOverlay {
 /* display: none;*/
  position: fixed;
  z-index: 3;
  width: 100%;
  height: 100%;
  background-color: rgba(48, 48, 48, 0.7);
  background-size: cover;
}

#SettingsOverlay div {
  width: 80%;
  height: 80%;
  background-color: purple;
  margin: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

#Options {
  display: flex;
  flex-direction: column;
}

#SettingsOverlay  .option {
  display: flex;
  flex-direction: row;
}

.option h2 {
  display: inline-block;
  width: 50%;
}

.option select {
  display: inline-block;
  width: 50%;
}

<div id='SettingsOverlay'>
  <div>
    <h1>Settings</h1>
    <div id='Options'>
      <div class='option'>
        <h2>Timezone</h2>
        <select>
          <option value = "GMT-12">GMT-12</option>
          <option value = "GMT-11">GMT-11</option>
          <option value = "GMT-10">GMT-10</option>
          <option value = "GMT-9">GMT-9</option>
          <option value = "GMT-8">GMT-8</option>
          <option value = "GMT-7">GMT-7</option>
          <option value = "GMT-6">GMT-6</option>
          <option value = "GMT-5">GMT-5</option>
          <option value = "GMT-4">GMT-4</option>
          <option value = "GMT-3">GMT-3</option>
          <option value = "GMT-2">GMT-2</option>
          <option value = "GMT-1">GMT-1</option>
          <option value = "GMT">GMT</option>
          <option value = "GMT+1">GMT+1</option>
          <option value = "GMT+2">GMT+2</option>
          <option value = "GMT+3">GMT+3</option>
          <option value = "GMT+4">GMT+4</option>
          <option value = "GMT+5">GMT+5</option>
          <option value = "GMT+6">GMT+6</option>
          <option value = "GMT+7">GMT+7</option>
          <option value = "GMT+8">GMT+8</option>
          <option value = "GMT+9">GMT+9</option>
          <option value = "GMT+10">GMT+10</option>
          <option value = "GMT+11">GMT+11</option>
          <option value = "GMT+12">GMT+12</option>
        </select>
      </div>
    </div>
  </div>
</div>

06.03.2019 17:19

Причина проблемы в приоритете селекторов css. Идентификаторы имеют наивысший приоритет, за ними следуют классы, атрибуты и псевдоклассы, а затем какие элементы и псевдоэлементы.

Ваш селектор css #SettingsOverlay div имеет более высокий приоритет, чем селектор #Options и селектор .option, и поскольку он влияет на все div элементы в id из SettingsOverlay, он ставит flex-direction из column на каждый элемент div.

Чтобы исправить это, вы можете добавить класс в div (что уменьшит его приоритет) и использовать его в качестве селектора CSS вместо #SettingsOverlay div, как в примере ниже.

Если вы когда-либо не уверены в том, какой приоритет имеет ваш css, вы можете использовать Калькулятор специфичности Кигана для проверки.

#SettingsOverlay {
  display: none;
  position: fixed;
  z-index: 3;
  width: 100%;
  height: 100%;
  background-color: rgba(48, 48, 48, 0.7);
  background-size: cover;
}

#Options {
  display: flex;
  flex-direction: column;
}

.option {
  display: flex;
  flex-direction: row;
}

.option h2 {
  display: inline-block;
  width: 50%;
}

.option select {
  display: inline-block;
  width: 50%;
}

.settingsOverlay {
  width: 80%;
  height: 80%;
  background-color: purple;
  margin: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

<div id='SettingsOverlay'>
  <div class = "settingsOverlay">
    <h1>Settings</h1>
    <div id='Options'>
      <div class='option'>
        <h2>Timezone</h2>
        <select>
          <option value = "GMT-12">GMT-12</option>
          <option value = "GMT-11">GMT-11</option>
          <option value = "GMT-10">GMT-10</option>
          <option value = "GMT-9">GMT-9</option>
          <option value = "GMT-8">GMT-8</option>
          <option value = "GMT-7">GMT-7</option>
          <option value = "GMT-6">GMT-6</option>
          <option value = "GMT-5">GMT-5</option>
          <option value = "GMT-4">GMT-4</option>
          <option value = "GMT-3">GMT-3</option>
          <option value = "GMT-2">GMT-2</option>
          <option value = "GMT-1">GMT-1</option>
          <option value = "GMT">GMT</option>
          <option value = "GMT+1">GMT+1</option>
          <option value = "GMT+2">GMT+2</option>
          <option value = "GMT+3">GMT+3</option>
          <option value = "GMT+4">GMT+4</option>
          <option value = "GMT+5">GMT+5</option>
          <option value = "GMT+6">GMT+6</option>
          <option value = "GMT+7">GMT+7</option>
          <option value = "GMT+8">GMT+8</option>
          <option value = "GMT+9">GMT+9</option>
          <option value = "GMT+10">GMT+10</option>
          <option value = "GMT+11">GMT+11</option>
          <option value = "GMT+12">GMT+12</option>
        </select>
      </div>
    </div>
  </div>
</div>

06.03.2019 17:19

#SettingsOverlay div имеет специфичность (1, 0, 1), а .option имеет специфичность (0, 1, 0), что означает, что flex-direction в #SettingsOverlay div имеет приоритет.

Вы можете попробовать изменить #SettingsOverlay div на #SettingsOverlay > div, чтобы он применялся только к его непосредственным дочерним элементам (а не ко всему в нем). Лучше всего избегать идентификаторов из-за их сильной специфичности.

См. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity для получения дополнительной информации о специфичности.

06.03.2019 17:20

ваша проблема связана с #SettingsOverlay div, который вызывает нежелательное поведение во всех нисходящих элементах div основного #SettingsOverlay.

если вы измените имя этого правила, оно должно звучать так, как задумано. Плюс я добавляю некоторые параметры в div .option.

#SettingsOverlay {
				  /*display: none;*/
				  position: fixed;
				  z-index: 3;
				  width: 100%;
				  height: 100%;
				  background-color: rgba(48, 48, 48, 0.7);
				  background-size: cover;
				}

				#Options {
				  width: 80%;
				  height: 80%;
				  background-color: purple;
				  margin: auto;
				  padding: 10px;
				  display: flex;
				  flex-direction: column;
				}

				#Options {
				  display: flex;
				  flex-direction: column;
				}

				.option {
				  display: flex;
				  flex-direction: row;
				  justify-content: space-between;
				  align-items: center;
				}

				.option h2,
				.option select {
					display: inline-block;
					width: 50%;
				}

<div id='SettingsOverlay'>
		  <div>
		    <h1>Settings</h1>
		    <div id='Options'>
		    	<div class = "option">
		        	<h2>Timezone</h2>


			        <select>
			          <option value = "GMT-12">GMT-12</option>
			          <option value = "GMT-11">GMT-11</option>
			          <option value = "GMT-10">GMT-10</option>
			          <option value = "GMT-9">GMT-9</option>
			          <option value = "GMT-8">GMT-8</option>
			          <option value = "GMT-7">GMT-7</option>
			          <option value = "GMT-6">GMT-6</option>
			          <option value = "GMT-5">GMT-5</option>
			          <option value = "GMT-4">GMT-4</option>
			          <option value = "GMT-3">GMT-3</option>
			          <option value = "GMT-2">GMT-2</option>
			          <option value = "GMT-1">GMT-1</option>
			          <option value = "GMT">GMT</option>
			          <option value = "GMT+1">GMT+1</option>
			          <option value = "GMT+2">GMT+2</option>
			          <option value = "GMT+3">GMT+3</option>
			          <option value = "GMT+4">GMT+4</option>
			          <option value = "GMT+5">GMT+5</option>
			          <option value = "GMT+6">GMT+6</option>
			          <option value = "GMT+7">GMT+7</option>
			          <option value = "GMT+8">GMT+8</option>
			          <option value = "GMT+9">GMT+9</option>
			          <option value = "GMT+10">GMT+10</option>
			          <option value = "GMT+11">GMT+11</option>
			          <option value = "GMT+12">GMT+12</option>
			        </select>

		      </div>
		    </div>
		  </div>
		</div>

06.03.2019 17:33

Другие вопросы по теме

Моя вертикальная панель навигации находится поверх моей горизонтальной панели навигации, даже если z-индекс больше с помощью CSS?

Изменение цвета значка гамбургера на адаптивной липкой панели навигации

Php не может загружать файлы css или javascript, находящиеся в другом каталоге

Пользовательский HTML-пейджинг Slick Slider

Div перекрывается при изменении размера по вертикали

Не применять :before, если для тега установлен определенный класс (объедините :before и :not)

Как найти ширину с помощью формулы с CSS

Можно ли установить фон для строки внутри сетки css

Почему текстовый узел появляется над фоном перекрывающегося элемента?

Пустое пространство внизу веб-страницы при низком разрешении браузера (макет CSS-Grid)

Направление гибкости не соблюдается

Ответы 4

Другие вопросы по теме

Похожие вопросы