Flexbox

Какие значения имеет flex-элемент по-умолчанию?

• flex-basis: 0;

  flex-grow: 0;

  flex-shrink: 0;

• flex-basis: auto;

  flex-grow: 0;

  flex-shrink: 0;

• flex-basis: auto;

  flex-grow: 1;

  flex-shrink: 0;

• flex-basis: auto;

  flex-grow: 0;

  flex-shrink: 1;

Answer explanation

По-умолчанию:

* базовый размер flex элемента определяется по его контенту (`flex-basis: auto`),

* элемент может сужаться (flex-shrink: 1),

* но не может расширяться (flex-grow: 0)

Немного математики. Ширина красного блока будет?

• 0px

• 15px

• 25px

• 50px

Answer explanation

Желаемая ширина всех элементов 50 + 150 = 200, доступная 100. У обоих блоков shrink = 1 (значение по-умолчанию), в результате чего они уменьшаются в одинаковой пропорции (то есть на одинаковый процент, но на разное число пикселей).

Оба блока уменьшаться в два раза.

Какая ширина будет у красного блока?

• 50px

• 100px

• 125px

• 150px

Answer explanation

В отличии от flex-shrink, flex-grow увеличивает ширину элементов на равные часьт (при равных значениях flex-grow).

Таким образом свободная ширина = 400 - 50 - 150 = 200

PX на 1 flex-grow = 200 / (1 + 1) = 100

Ширина в красного = базовая + 1 доля = 50 + 100 = 150

Как будет выглядеть следующий код?

• 
• 
• 

Answer explanation

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

Flex-элементы и position: absolute;

Как отобразиться абсолютно позиционированный элемент?

• 
• 
• 
•