Удовольствие от Flexbox (с Material-UI и React)

Часть 2 из 2 - Редактирование свойств гибкого элемента

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

Часть 4: Примеры редактирования свойств гибкого элемента

заказывать

Это свойство, вероятно, не требует пояснений. Когда вы определяете несколько гибких элементов в гибком контейнере, они будут отображаться в том же порядке. Но, указав специфику orderгибкого элемента, вы можете отображать гибкие элементы в другом порядке.

flexGrow

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

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

По умолчанию все дочерние гибкие элементы будут иметь свои. flexGrow: 1Поэтому, если вы укажете flexGrow: 2 для одного из дочерних гибких элементов, он займет в два раза больше места, чем другие дочерние гибкие элементы (в зависимости от ширины гибкого контейнера).

Примечание: flexGrowпринимает только положительные числа, значение по умолчанию - 0.

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

flexShrink

Это похоже на полярную противоположность flexGrowприведенному выше - он определяет, как должен выглядеть гибкий элемент, если окно браузера уменьшено (тогда как flexGrowвыше определяется, как должен выглядеть каждый гибкий элемент, если окно браузера полностью развернуто).

В приведенных ниже примерах я добавил ширину 230 пикселей для каждого гибкого элемента, чтобы мы могли лучше увидеть, как он выглядит до и после усадки :)

Примечание: flexShrinkпринимает только положительные числа, значение по умолчанию - 0.

flexBasis

flexBasisопределяет размер по умолчанию каждого гибкого элемента в контейнере до распределения оставшегося пространства. Вот простая таблица, в которой перечислены некоторые сходства и различия между flexGrow, flexShrinkи flexBasis:

Чтобы продемонстрировать эффекты flexBasis:

Как мы продемонстрировали в flexGrow и flexShrink выше, вот что происходит, когда мы сжимаем окно браузера до тех пор, пока не останется свободного места:

Примечание: значение flexBasisможет быть либо длиной ( 20%, 5remи т.д.) или ключевое слово (например auto, contentи т.д.).

сгибать

flexв основном это сочетание flexGrow, flexShrinkи flexBasis.

Примечание. Согласно руководству по flexbox, на которое я ссылаюсь , рекомендуется использовать это сокращение не для установки каждого отдельного свойства.

Вот быстрая демонстрация того, что произойдет, если мы добавим это свойство flex к нашему второму элементу flex ( childBox1):

Чтобы продемонстрировать влияние второго входного значения flex (которое соответствует flexShrink), мы уменьшим окно браузера:

Обратите внимание, что для свойства flexвторое и третье входные значения ( flexShrinkи flexBasis) необязательны.

alignSelf

Если вы уже установили alignItemsдля гибкого контейнера, вы все равно можете использовать его alignSelfв каждом гибком элементе, чтобы переопределить выравнивание по умолчанию.

Вот пример:

По умолчанию предполагается, что каждый элемент гибкости подлежит stretchвыравниванию. Однако, поскольку мы специально установить alignSelf: “flex-start”и alignSelf: “flex-end”в childBox1и , childBox2соответственно, это выравнивание по изменениям в поперечном оси.

Доступны следующие варианты alignSelf:auto | flex-start | flex-end | center | baseline | stretch

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

Удачного Flex-Box-ing! ʕ • ́ᴥ • ̀ʔ っ ♡