Как CSS flexbox визуален въвеждането на елементите на системата оформление на уеб страница на

Flexbox за цел да ни спаси от неприятни моменти на чист CSS (например, за вертикално подравняване), а той се справя със своята задача. Но за да се разбере как работи понякога е трудно, особено ако сте начинаещ.

Основната цел на Flexbox - направете слоя гъвкав и работи с тях - интуитивно. За да се постигне това, тя дава възможност на съда да реши за себе си как да се справят с детето им елементи, включително и промяна на размера им, а разстоянието между тях.

Звучи добре, но нека да видим, така че дали е гладка на практика. В тази статия, ние разгледа 5-те най-популярни свойства Flexbox, вижте какво правят и как те действително работят.

Дисплей: Flex

Ето един пример страница:

В момента има 4 различни цветни Разделение в различни размери, които са вътре в сиво DIV. Всеки Разделение има дисплей имот: блок. Ето защо, всеки квадратен заема цялата ширина на линията.

За да започнете работа с Flexbox, ние трябва да направим нашата контейнер флекс-контейнер. Ето как:

Изглежда, че нищо не се бе променило - divs просто стояха в редица. Но вие сте направили нещо наистина мощен. Дадохте квадратите си страхотна функция, наречена "гъвкава контекст".

Flex Посока

В шнур контейнер има две оси: главната ос и перпендикулярно на него.

По подразбиране всички елементи са разположени по протежение на основната ос от ляво на дясно. Ето защо, нашите площади подредени в една линия, когато се използва дисплей: шнур. Въпреки това, гъвкава посоката ви позволява да завъртате основния вал.

Важно е да се отбележи, че гъвкавата-посока: колона не приведе квадратите перпендикуляра към основната ос. Самата главната ос променя позицията си и сега е насочено от горе на долу.

Има няколко свойства за гъвкава посока: ред-обратнофазова колона и-назад.

Обосновете съдържание

Обосновете съдържание е отговорен за привеждане в съответствие на елементите на главната ос.

Ние се върнете към гъвкава посока: подред.

Обосновете съдържание 5 може да отнеме стойностите:

Space-между сериите равно разстояние между квадратите, но не и между контейнера и площади. Space-около също така определя единна разстояние между квадратите, но сега разстоянието между контейнера и площадите се равнява на половината от разстоянието между площадите.

Изравнете артикули

Ако оправдае съдържание работи с основната ос, Привеждане-елементите работят с една ос, перпендикулярна на главната ос.

Да се ​​върнем към гъвкава посока: ред и проверете команди приведе-елементи:

Заслужава да се отбележи, че за да се приведе в съответствие-елементи: разтегнете височината на площадите, трябва да бъде равна на автомобил. За подравняване-елементи: основни тагове не е необходимо да се премахне параграф, да не се получи нещо като това:

За да се разбере по-добре как да работят на оста, нека се присъединят оправдае-съдържание, за да се приведе в съответствие-елементи и да видим как подравняването на център за двете свойства на флекс-посока:

Изравнете Self

Изравнете-самостоятелно подравнява елементи поотделно.

Нека да се приложат две квадратчета приведе-самостоятелно. и за други приложими приведе-елементи: център и гъвкава посока: подред.

Flex-Basis

Flex-база, отговорен за оригиналния размер на елементите, преди те да бъдат променени от други свойства Flexbox:

Flex-база влияе на размера на елементите по главната ос.

Нека да видим какво ще се случи, ако се промени посоката на главната ос:

Имайте предвид, че ние трябваше да се промени височината и елементите. Flex-база може да се определи като височината на елементите и тяхната ширина в зависимост от посоката на оста.

Този имот е малко по-сложно.

За да започнете, нека да искаме от нашите квадратчета с еднакъв ширината на 120 пиксела:

Стойността по подразбиране на флекс-растат е 0. Това означава, че на площада е забранено да расте (да заемат останалите пространство в контейнера).

Нека се опитаме да зададете Flex-нарасне до 1 за всеки квадратен:

Площади, заети останалите пространство в контейнера. Значение гъвкава растат отменя ширина.

Но това повдига още един въпрос: какво прави гъвкава расте: 1?

Нека се опитаме да зададете гъвкава растат равен на 999:

И ... нищо не се е случило. Това се случи, защото от това, че гъвкавата растат не приема абсолютни стойности, но относително.

Това означава, че без значение каква стойност имат гъвкава расте. значение какво е то по отношение на други площади:

На пръв гъвкава расте всеки квадрат е равно на 1, в размер на свой ред 6. Така че, нашият контейнер е разделен на 6 части. Всеки квадрат ще заемат 1/6 от наличното пространство и контейнера.

Когато шнур растат третата квадрат е равно на 2, контейнерът е разделен на 7 части (1 + 1 + 2 + 1 + 1 + 1).

Сега третата площада заема 2/7 от пространството, а останалата част - от 1/7.

Струва си да припомним, че Flex-растат само работи за главната ос (докато не се промени посоката си).

Flex Свиване

Flex-свие - точно обратното на флекс-расте. Тя определя колко квадрата може да бъде намалена по размер.

Flex-свиващото се използва, когато елементите, които не се вместват в контейнера.

Вие определяте кои елементи трябва да бъдат намалени по размер, и това, което - не. Стойността по подразбиране на флекс-свие за всеки квадратен е равен на 1. Това означава, че на площадите ще бъдат компресирани, когато контейнерът ще намалее.

Ние определяме гъвкава расте и Flex-свие равно на 1:

Сега нека да се промени стойността на гъвкава свие за трета площада до 0. Той беше забранено да се свие, така че ширината му ще бъде равна на 120 пиксела:

Струва си да припомним, че Flex-свиване на базата на дяловете. Това означава, че ако квадратен флекс-психиатър е 6, а останалата част е 2, това означава, че нашата квадрат ще се компресира до три пъти по-бързо от останалите.

Flex замества гъвкава расте. Flex-свие и гъвкава основа.

Стойността по подразбиране 0 (растат) 1 (психиатър) и автоматично (база).

Нека създадем две полета:

И двете квадратчета с еднакъв гъвкава основа. Това означава, че те ще бъдат 300px (широчината на контейнера: 600px плюс допустимото и пълнеж).

Въпреки това, когато контейнерът започва да расте в размер, първият квадрат (с голяма гъвкава расте) ще се увеличи два пъти по-бързо, а второто поле (с най-голяма гъвкава свие) ще бъдат компресирани два пъти по-бързо.

Както неща растат и се свиват

Когато първият площада се увеличава, става два пъти по-голям от втория площада, и се намалява, когато втората кутия, тя не се превърне два пъти по-малка от първата. Това се дължи на факта, че гъвкавата-расте и гъвкава свие, отговарящ за растежа и свиването.

малко математика

Първоначалният размер на контейнера: 640 пиксела. Изваждане 20px от всяка страна за пълнеж, и ние ще имаме 600px, просто за двата площада.

Когато контейнерът става еднаква ширина 430px (загуба 210px), първа квадрат (Flex-свие: 1) губи 70 пиксела. Втори на квадрат (Flex-свие: 2) губи 140px.

Когато контейнерът се компресира до 340px, 300px, губим. Първият площада губи 100 пиксела, а вторият - 200px.

Същото нещо се случва с флекс-расте.

Превод на статията «Как работи Flexbox - обясни с големи, цветни, Анимации»