Как 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 - обясни с големи, цветни, Анимации»