flexbox — CSS Guru

Свойство flex (продолжение)

admin — Tue, 10 Oct 2017 09:30:39 +0000

В предыдущей заметке по свойству flex есть короткая запись:

/* Одно значение, ширина/высота: flex-basis */
flex: 10em;

Вроде бы удобно, но есть одно но. Если вы хотите указанным способом задать только flex-basis, то для в браузере мы получим:

flex: 1 1 10em;

Все бы ничего, но если ранее вы указали для нужного элемента свойства flex-shrink или flex-grow, отличные от 1 1, то краткая запись flex: 10em; (например, в media query вам надо указать flex-basis) переопределит вышеуказанные flex-shrink или flex-grow.

Свойство flex

admin — Tue, 27 Jun 2017 12:18:43 +0000

Краткая запись для трех отдельных свойств flex элементов: flex-grow, flex-shrink и flex-basis.
(Здесь — для памяти.)

/* 0 0 auto */
flex: none;

/* Одно значение, число без размерности: flex-grow */
flex: 2;

/* Одно значение, ширина/высота: flex-basis */
flex: 10em;
flex: 30px;
flex: auto;
flex: content;

/* Два значения: flex-grow | flex-basis */
flex: 1 30px;

/* Два значения: flex-grow | flex-shrink */
flex: 2 2;

/* Три значения: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/* Глобальные значения */
flex: inherit;
flex: initial;
flex: unset;

admin — Tue, 07 Jun 2016 08:13:29 +0000

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

$flex-properties: (
    justify-content: (flex-start flex-end center space-between space-around),
    align-items: (flex-start flex-end center baseline stretch),
    align-content: (flex-start flex-end center space-between space-around stretch)
);

Затем циклом перебираем все свойства:

@each $key, $properties in $flex-properties {
    @each $property in $properties {
        [#{$key}="#{$property}"] {
            #{$key}: #{$property};
        }
    }
}

�? получаем на выходе вот такой CSS:

[justify-content="flex-start"] {
  justify-content: flex-start; }

[justify-content="flex-end"] {
  justify-content: flex-end; }

[justify-content="center"] {
  justify-content: center; }

[justify-content="space-between"] {
  justify-content: space-between; }

[justify-content="space-around"] {
  justify-content: space-around; }

[align-items="flex-start"] {
  align-items: flex-start; }

[align-items="flex-end"] {
  align-items: flex-end; }

[align-items="center"] {
  align-items: center; }

[align-items="baseline"] {
  align-items: baseline; }

[align-items="stretch"] {
  align-items: stretch; }

[align-content="flex-start"] {
  align-content: flex-start; }

[align-content="flex-end"] {
  align-content: flex-end; }

[align-content="center"] {
  align-content: center; }

[align-content="space-between"] {
  align-content: space-between; }

[align-content="space-around"] {
  align-content: space-around; }

[align-content="stretch"] {
  align-content: stretch; }

Теперь остаётся правильно этим всем распорядиться, например так:

�? не большой готовый пример:

See the Pen PzPpgd by Sergey Kirichenko (@oknechirik) on CodePen.

Firefox, button and flexbox

admin — Mon, 23 May 2016 10:59:50 +0000

Как интересно! Если вы хотите красиво расположить внутри кнопки несколько элементов, используя чудную технологию flexbox, то вас может ждать неприятный сюрприз. Внутри элемента button в Firefox 46.0.1 (в других не проверял) flexbox не работает :(
Как это хотелось бы видеть и как это выглядит в Хроме и даже в �?Е11:

�? как это в Firefox:

See the Pen eZqEGy by Sergey Kirichenko (@oknechirik) on CodePen.

P.S. Для себя эту проблему решил, обернув содержимое кнопки div’ом.
P.P.S. �? баг есть такой.

Update: проблема решена в Firefox 52!!!

admin — Fri, 22 Apr 2016 12:11:22 +0000

Чудесная технология для верстки этот flexbox. Чем больше им пользуюсь, тем больше нравится.
На текущем проекте использую подход, позаимствованный у Angular Material. Angular Material вместо CSS-классов использует атрибуты. Вот и ваш покорный слуга решил использовать этот подход. Для задания свойства display: flex; flex-direction: row; атрибут mo-layout без значения, а для display: flex; flex-direction: column; тот же атрибут но со значением column. Примерно так:

[mo-layout] {
    display: flex;
    flex-direction: row;
}
[mo-layout="column"] {
    display: flex;
    flex-direction: column;
}

Flexbox

admin — Tue, 05 Apr 2016 08:23:51 +0000

Чудесная технология. Позволяет решить практически любую задачу по разметке. �?сключением будет разве что необходимость сверстать грид с табличной гибкой структурой. То есть, когда есть необходимость растяжения колонок на ширину самой широкой ячейки. Но для этого есть display: table;display: table-row;display: table-cell;. Сам я изучил flexbox по простому и исчерпывающему гайду на CSS-Tricks.

Flexbox и растягивание вложенных элементов на всю ширину родителя

admin — Tue, 19 Aug 2014 13:34:38 +0000

Если хотите, чтобы вложенные элементы, так сказать flex-items, заняли всю ширину родителя (если у вас flex-direction: row) или по высоте (если flex-direction: column), пропишите им свойство flex-grow, отличное от 0 (нуля), что задано по умолчанию.
P.S. Flexbox нереально крут :) Очень удобный инструмент для создания разметки. Вовсю стал его использовать только недавно.