CSS Grid və Flexbox istifadə qaydaları

Toğrul Mərdanov

17.09.2021

Flexbox əsasları: Flexbox CSS-ə əlavə edilmiş ən böyük xüsusiyyətlərdən biridir. Bu, bir ölçülü layout modeli və interfeysdəki maddələr arasında yer paylaması və güclü uyğunlaşma imkanları təklif edə biləcək bir metod kimi hazırlanmışdır. Flexbox, float və konumlandırma istifadə etmədən çevik həssas layout quruluşunu dizayn etməyi asanlaşdırır.

Bu yazıda bəzi praktik nümunələrlə CSS flexbox haqqında məlumat əldə edəcəyik.

Nümünə:

Bir qab müəyyənləşdirin

Flexbox istifadə etməyə başlamaq üçün bütün uşaq elementlərini bu şəkildə bükəcəyiniz bir qab div və ya bir valideyn təyin etməlisinizdiv


 

1

2

3

Valideyn div və ya konteyner display əyilmək üçün təyin edərək çevik olur:

.container {
  display: flex;
  background-color: red;
}
.container div{
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

Nəticə:

Gördüyünüz kimi, əyilmək display üçün təyin edərək , konteynerin alt elementləri avtomatik olaraq çevik əşyalara çevrilir. Artıq konteyner xüsusiyyətlərini, məsələn, uşaq elementlərini konteyner div-in içərisində mərkəzləşdirmək üçün istifadə edə bilərsiniz . Aşağıdakı nümunələrdə bunu əhatə edəcəyik.justify-content align-items

Flex-direction property

flex-direction css xüsusiyyətindən biz hər hansı bir konteynerin daxilində flex qutularının istiqamətini təyin etmək ücün istifadə edirik.

Aşağıdakı nümunə column (yuxarıdan aşağıya) əyilmə istiqamətini təyin edir . Nəticədə, konteyner divin içindəki uşaq elementləri şaquli bir xəttdə olacaqdır.

Nümünə:

.container {
  display: flex;
  flex-direction: column;
  background-color: red;
}
.container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

Nəticə:

Eyni nümunəni götürək ancaq flex-direction xüsusiyyətinə rowtəyin etdikdə container daxilində olan flex qutuları horizontalda yanasi olaraq düzülür.

.container {
  display: flex;
  flex-direction: row;
  background-color: red;
}
.container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

Nəticə:

Ən çox oxunanlar

Logo

Logolar, bəlkə də bir markanın və ya şirkətin marketinq müvəffəqiyyəti üçün bir müştəri və ya işə götürənlə ilk görüş...

Farid Askerov

Ətraflı

22.04.2021

Web sayt

Bu gün bir şirkətin web sayta sahib olmağı bir dükana, ofisə və ya telefon nömrəsinə sahib olmaq qədər əhəmiyyətlidir. Tədqiqatlar nəticəsində öyənil...

Farid Askerov

Ətraflı

22.04.2021

Rebranding

Bəzən bəzilərinizin eşitmədiyi bir sözə rast gəlirik.
”Rebranding” Rebranding nədir? Necə edilir və bunun insanlarla, şirkətlərlə, firmalarlara nə ...

Səməd Abbasov

Ətraflı

22.04.2021

Bizimlə əlaqə

Sosial media


Xəritədən bax

Bakı şəhəri Heydər Əliyev prs. 115

Ofisə bax

Caspian Sport Plaza, 3-cü bina, 12-ci mərtəbə.