Вопросы Теги

Как добавить прокручиваемую навигацию в контейнер с flex-grow [duplicate]

== сравнивает ссылки на объекты.

.equals() сравнивает значения String.

Иногда == дает иллюзии сравнения значений String, как в следующих случаях: 

String a="Test";
String b="Test";
if(a==b) ===> true

Это связано с тем, что при создании любого строкового литерала JVM сначала ищет этот литерал в пуле строк, и если он найдет совпадение, эта же ссылка будет передана новой String. Из-за этого получаем:

(a == b) ===> true 

                       String Pool
     b -----------------> "test" <-----------------a

Однако == не выполняется в следующем случае: 

String a="test";
String b=new String("test");
if (a==b) ===> false

В этом случае для new String("test") оператор new String будет создан в куче, и эта ссылка будет указана на b, поэтому b будет дана ссылка на кучу, а не на String pool.

Теперь a указывает на String в пуле String, а b указывает на String в куче. Из-за этого мы получаем:

, если (a == b) ===> false. 

                String Pool
     "test" <-------------------- a

                   Heap
     "test" <-------------------- b

Пока .equals() всегда сравнивает значение String, поэтому дает true в обоих случаях: 

String a="Test";
String b="Test";
if(a.equals(b)) ===> true

String a="test";
String b=new String("test");
if(a.equals(b)) ===> true

Таким образом, использование .equals() всегда лучше.

122
задан TylerH 1 January 2018 в 01:45
поделиться

1 ответ

Автоматический минимальный размер элементов Flex

Вы сталкиваетесь с настройкой по умолчанию для flexbox.

Элемент flex не может быть меньше размера его содержимого вдоль

По умолчанию ...

  • min-width: auto
  • min-height: auto

... для гибких элементов в направлении строки и столбца соответственно.

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

  • min-width: 0
  • min-height: 0
  • overflow: hidden (или любое другое значение, кроме visible)

Спецификация Flexbox

4.5. Автоматический минимальный размер элементов Flex

Чтобы обеспечить более разумный минимальный размер по умолчанию для элементов flex, эта спецификация вводит новое значение auto в качестве начального значения min-width и min-height, определенные в CSS 2.1.

Что касается значения auto ...

В элементе flex чей overflow является visible на главной оси, если указано в параметре минимального размера основной оси гибкого элемента, задается автоматический минимальный размер . В противном случае он вычисляется в 0.

Другими словами:

  • Значения min-width: auto и min-height: auto применяются только тогда, когда overflow имеет значение visible.
  • Если значение overflow не visible, значение свойства min-size равно 0.
  • Следовательно, overflow: hidden может быть замените min-width: 0 и min-height: 0.

и ...

Вы применили min-width: 0, и элемент все еще не сжимается?

Вложенные контейнеры Flex

Если вы используете элементы flex на нескольких уровнях структуры HTML, может потребоваться переопределить значение по умолчанию min-width: auto / min-height: auto на элементах на более высоких уровнях.

В принципе, более высокий уровень сгибает его em с min-width: auto может предотвратить сжатие элементов, вложенных ниже, с помощью min-width: 0.

Примеры:

Примечания к визуализации браузера

  • Chrome против Firefox / Edge . Как минимум 2017, Chrome выглядит как (1), возвращаясь к min-width: 0 / min-height: 0 по умолчанию или (2) автоматически применяя 0 по умолчанию в определенных ситуациях, основанных на тайном алгоритме. (Это может быть то, что они называют вмешательством .) В результате многие люди видят, что их макет (особенно желаемые полосы прокрутки) работают должным образом в Chrome, но не в Firefox / Edge. Эта проблема более подробно рассмотрена здесь: несоответствие гибких ограничений между Firefox и Chrome
  • IE11 Как отмечено в спецификации, значение auto для свойств min-width и min-height является «новым». Это означает, что некоторые браузеры могут по-прежнему отображать значение 0 по умолчанию, поскольку они реализовали гибкую компоновку до того, как значение было обновлено, и поскольку 0 является начальным значением для min-width и min-height в CSS 2.1 . Одним из таких браузеров является IE11. Другие браузеры обновлены до более нового значения auto, как определено в спецификации flexbox .

Пересмотренная демонстрация 

.container {
  display: flex;
}

.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}

.col1 {
  flex: 1;
  background: orange;
  font-size: 80px;
  min-width: 0;   /* NEW */
}

.col2 {
  flex: 3;
  background: yellow
}

.col3 {
  flex: 4;
  background: skyblue
}

.col4 {
  flex: 4;
  background: red
}
<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

jsFiddle

201
ответ дан Michael_B 16 August 2018 в 04:20
поделиться