Как Вы объясняете эту структуру в JavaScript?

Question

Как Вы объясняете эту структуру в JavaScript?

Проблема
Flexbox делает центрирование очень простым.
Просто применяя `align-items: center` и `justify-content: center` к контейнеру flex, ваши (-ые) элементы (-ы) будут вертикально и

Однако существует проблема с этим методом, когда элемент гибкости больше, чем гибкий контейнер.
Как отмечено в вопросе, когда элемент гибкости переполняет контейнер верхняя часть становится недоступной.

Для горизонтального переполнения левая часть становится недоступной (или правой секцией в языках RTL).
Вот пример с контейнером LTR, имеющим `justify-content: center` и три элемента гибкости:

См. нижнюю часть этого ответа для объяснение этого поведения.

Решение № 1

Чтобы исправить эту проблему, используйте автоматические поля flexbox вместо justify-content .

С полями auto переполненный элемент гибкости может быть вертикально и горизонтально центрирован, не теряя доступа к какой-либо его части.

[g2 8] Таким образом, вместо этого кода на контейнере flex:

#flex-container {
    align-items: center;
    justify-content: center;
}

Используйте этот код для элемента flex:

.flex-item {
    margin: auto;
}

Revised Demo

Решение № 2 (еще не реализовано в большинстве браузеров)

Добавьте значение safe в ваше ключевое слово правило выравнивания:

justify-content: safe center

или

align-self: safe center

Из спецификации модуля выравнивания CSS :

4.4. Выравнивание переполнения: ключевые слова safe и unsafe и ограничения безопасности прокрутки

Когда элемент [flex item] больше, чем [flex container], он будет переполняться. Некоторые режимы выравнивания, если они соблюдены в этой ситуации, могут привести к потере данных: например, если содержимое боковой панели центрировано, когда они переполняются, они могут отправлять часть своих полей за край начала окна просмотра, которые нельзя прокрутить до .

Чтобы управлять этой ситуацией, можно явно указать режим выравнивания переполнения . Unsafe выравнивает заданный режим выравнивания в ситуациях переполнения, даже если он вызывает потерю данных, а выравнивание safe изменяет режим выравнивания в ситуациях переполнения, чтобы избежать потери данных.

Поведение по умолчанию должен содержать объект выравнивания в пределах области прокрутки, хотя на момент написания этой функции безопасности еще не реализовано.

safe

Если размер [flex item] переполняет контейнер [flex], а [гибкий элемент] выравнивается так, как если бы режим выравнивания был [flex-start].

unsafe

Независимо от относительных размеров [гибкого элемента] и [гибкого контейнера] данное значение выравнивания соблюдается.
blockquote>
Примечание. Модуль выравнивания ящиков используется для нескольких моделей макета коробки, а не только для гибких. Таким образом, в вышеприведенном отрезке spec термины в скобках фактически говорят «объект выравнивания», «контейнер выравнивания» и «start». Я использовал термины, специфичные для Flex, чтобы сосредоточиться на этой конкретной проблеме.

Объяснение для ограничения прокрутки из MDN:

Flex соображения элемента

Свойства выравнивания Flexbox выполняют «истинное» центрирование, в отличие от других методов центрирования в CSS. Это означает, что элементы гибкости будут оставаться центрированными, даже если они переполняют контейнер flex.

Иногда это может быть проблематично, если они переполняются через верхний край страницы или левый край [. ..], поскольку вы не можете прокручивать эту область, даже если там есть контент!

В будущей версии свойства выравнивания будут расширены, чтобы иметь также «безопасный» вариант.

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

Вместо использования свойств align- просто поместите поля auto на объекты гибкости, которые хотите центрировать.

Вместо свойств justify- поместите автоматические поля на внешние границы первого и последнего элементов гибкости в контейнере гибкого диска.

Поля auto будут «гибкими» и предполагают оставшееся пространство, центрируя элементы гибкости, когда есть оставшееся пространство, и переключение на нормальное выравнивание, когда нет.

Однако, если вы пытаетесь заменить justify-content центрированием на основе полей в многострочном flexbox, вам, вероятно, не повезло, так как вам нужно поставить поля на первом и последнем элементе гибкости на каждой строке. Если вы не сможете заранее предсказать, какие элементы попадут на какую строку, вы не можете надежно использовать центрирование на основе маркеров на главной оси, чтобы заменить свойство justify-content.
blockquote>

15

anonymous-function design-patterns javascript

задан scunliffe 11 October 2008 в 18:30

7 ответов

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

anonymous-function design-patterns javascript

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

score 4 · Answer 1

Это - вызванная анонимная функция.

цель этого состоит в том, чтобы создать новый объем, из которого локальные переменные не выходят за край. Например:

var test = 1;
(function() {
  var test = 2;
})();
test == 1 // true

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

отрывок ниже вызовет ошибку:

var aVariable = 1
var myVariable = aVariable

(function() {/*...*/})()

Вот то, что это на самом деле делает:

var aVariable = 1;
var myVariable = aVariable(function() {/*...*/})
myVariable();

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

new function() {/*...*/}

различие - то, что бывшая техника не влияет, где ключевое слово, на которое "это" указывает, тогда как второе делает.

Javascript 1.8 также имеет оператор, которому позволяют, который выполняет то же самое, но само собой разумеется, это не поддерживается большинством браузеров.

score 2 · Answer 2

Это сам выполняющий анонимную функцию. () в конце на самом деле вызывает функцию.

А хорошая книга (я читал), который объясняет, некоторые использования этих типов синтаксиса в JavaScript Объектно-ориентированный Javascript.

score 40 · Answer 3

Создавание анонимной функции, закрытие и все и финал () говорят этому выполнять себя.

Это - в основном то же как:

function name (){...}
name();

Так в основном нет ничего специального об этом коде, это просто 'ярлык' на создание метода и вызов его, не имея необходимость называть его.

Это также подразумевает, что функция является той прочь, или внутренняя функция на объекте, и является самой полезной, когда Вам нужно к функциям закрытия.

score 1 · Answer 4

См. также превосходный "JavaScript Douglas Crockford: Хорошие Части", доступный от O'Reilly, здесь:

http://oreilly.com/catalog/9780596517748/

... и на видео в YUIblog, здесь:

http://yuiblog.com/blog/2007/06/08/video-crockford-goodstuff/

score 0 · Answer 5

Материал в первом наборе скобок оценивает к функции. Второй набор скобок затем выполняет эту функцию. Таким образом, если у Вас есть что-то, что хочет работать автоволшебно onload, это, как Вы заставили бы это загружаться и выполняться.

score 2 · Answer 6

Это использование в основном эквивалентно из внутреннего блока в C. Это предотвращает переменные, определенные внутренний блок, чтобы быть видимым снаружи. Таким образом, это - удобный способ создать тот от классов с частные объекты. Просто не забывайте return this; при использовании его для создания объекта.

var Myobject=(function(){
    var privatevalue=0;
    function privatefunction()
    {
    }
    this.publicvalue=1;
    this.publicfunction=function()
    {
        privatevalue=1; //no worries about the execution context
    }
return this;})(); //I tend to forget returning the instance
                  //if I don't write like this

score 0 · Answer 7

John Resig объясняет самовыполняющиеся анонимные функции здесь .

0

ответ дан 1 December 2019 в 00:24