Научете CSS Flexbox за 5 минути - Урок за начинаещи

Бързо въведение в популярния модул за оформление

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

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

Създал съм и безплатен курс от 12 части на Flexbox. Вижте тук, ако се интересувате!

Сега да започнем!

Първото ви оформление на Flexbox

Двата основни компонента на оформлението на Flexbox са контейнерът и елементите .

Ето HTML за нашия пример, който съдържа контейнер с три елемента:

 Home Search Logout 

Преди да превърнем това във Flexbox оформление, елементите ще бъдат подредени един върху друг така:

Добавих малко стайлинг, но това няма нищо общо с Flexbox.

Добавих малко стайлинг, но това няма нищо общо с Flexbox.

За да превърнем това във Flexbox оформление, ние просто ще дадем на контейнера следното CSS свойство:

.container { display: flex; } 

Това автоматично ще позиционира елементите добре по хоризонталната ос.

Ако искате да проверите действителния код, можете да се отправите към тази детска площадка в Скримба.

Сега нека разбъркаме малко тези елементи.

Оправдайте съдържанието и подравнете елементите

Justify-content и align-items са две CSS свойства, които ни помагат да разпределяме елементите в контейнера. Те контролират как елементите са разположени по главната ос и напречната ос .

В нашия случай (но не винаги) основната ос е хоризонтална, а напречната ос е вертикална:

В тази статия ще разгледаме само justify-content, тъй като установих, че използвам тази много повече от align-items. В моя курс на Flexbox обаче обяснявам подробно и двете свойства.

Нека центрираме всички елементи по главната ос, като използваме justify-content:

.container { display: flex; justify-content: center; } 

Или можем да го зададем на space-between, което ще добави интервал между елементите, като този:

.container { display: flex; justify-content: space-between; } 

Ето стойностите, за които можете да зададете justify-content:

  • flex-start ( по подразбиране )
  • гъвкав край
  • център
  • пространство-между
  • пространство наоколо
  • пространство-равномерно

Препоръчвам ви да си поиграете с тях и да видите как се играят на страницата. Това трябва да ви даде правилно разбиране на концепцията.

Контролиране на един елемент

Можем да контролираме и единични артикули . Да предположим, че ние например искаме да запазим първите два елемента от лявата страна, но да преместим logoutбутона в дясната страна.

За целта ще използваме добрата стара техника за задаване на марж auto.

.logout { margin-left: auto; } 

Ако искаме и searchелементът, и logoutелементът да бъдат изтласкани от дясната страна, вместо това просто ще добавим елемента margin-leftкъм searchелемента.

.search { margin-left: auto; } 

Той ще избута елемента за търсене възможно най-отдясно, което отново ще изтласка елемента за излизане с него:

Свойството flex

Досега имахме само елементи с фиксирана ширина. Но какво, ако искаме да реагират? За да постигнем това имаме свойство, наречено flex. Това го прави много по-лесно от стария начин за използване на проценти.

Ние просто ще насочим всички елементи и ще им дадем flexстойност 1.

.container > div { flex: 1; } 

Както можете да видите, той разтяга елементите, за да запълни целия контейнер.

В много случаи вероятно бихте искали някой от елементите да заеме допълнителната ширина и по този начин да настроите само един от тях да има гъвкава ширина. Можем например да накараме searchелемента да заема цялото допълнително пространство:

.search { flex: 1; } 

Преди да завършим тази статия, искам да спомена, че свойството flex всъщност е стенографско три свойства: flex-grow , flex-shrink и flex-basis . Обаче обучението им отнема повече от пет минути, така че това е извън обхвата на този урок.

Ако обаче се интересувате от тяхното изучаване, обяснявам подробно и трите свойства в моя безплатен курс Flexbox.

Сега, след като научихте основите, определено ще сте готови да вземете моя пълен курс и да станете майстор на Flexbox!

Благодаря за четенето! Казвам се Per Borgen, аз съм съосновател на Scrimba - най-лесният начин да се науча да кодирам. Трябва да проверите нашия отзивчив уебкамп за уеб дизайн, ако искате да се научите да изграждате модерен уебсайт на професионално ниво.