Flexbox'a yönelik CSS püf noktaları, flexbox ve diğer CSS Flexbox hile özelliklerini kullanarak kabı ayarlamak, tasarlamak ve konumlandırmak için gereklidir. Esnek kutu tasarımı ve verileri için CSS hileleri özelliği ve çoklu özellik değerleri kullanılır. Flexbox için hizalamayı, konumu, alanı ve diğer tasarımları ayarlamak için CSS hilelerini kullanabiliriz.
Flexbox'ı tasarlamak için aşağıdaki CSS hileleri formatı kullanılır.
- Flecbox yönlendirmesi için CSS püf noktaları
- Flexbox hizalaması için CSS püf noktaları
- Flexbox marjı için CSS püf noktaları
Esnek Yön
Esnek yön, esnek kutunun içindeki kabın yönünü almak için kullanılır. Konteynerleri ihtiyaca göre ayarlayabiliriz.
Sözdizimi:
Aşağıdaki sözdizimi flexbox için CSS püf noktalarını kullanır. Esnek yön için diğer CSS özelliklerini kullanabiliriz.
display: flex; flex-direction: row | row-reverse | column | column-reverse;
Tanım:
- Konteyner veya element için ekranı varsayılan olarak flex ile kullanabiliriz.
- Esnek yön, satır, sütun ve ters değerleriyle birlikte CSS özelliğini kullanır.
Esnek yön örnekleri
Aşağıdaki örneklerde Flex özellikleri ve değerlerinin görüntülendiği flexbox gösterilmektedir. İçeriği, hizalamayı ve yönleri ayarlayabiliriz.
Örnek 1:
Aşağıdaki örneklerde esnek yön satır, hizalama ve içerikle birlikte varsayılan olarak başlangıç konumuyla gösterilmektedir.
CSS Tricks for Flexbox /* Show CSS trick for flex*/ .flex-containers { display: flex; background-color: navy; flex-direction: row; } .flex-containers > div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks Çıktı:
Çıktı, CSS püf noktaları içeren esnek kutuyu gösterir.
Örnek 2:
Aşağıdaki örneklerde ters satırla esnek yön gösterilmektedir ve içerik varsayılan olarak başlangıç konumunu göstermektedir. Ters satır, yatay hizalamayla baştan sona etiketini gösterir.
CSS Tricks for Flexbox /* Show CSS trick for flex*/ .flex-containers { display: flex; background-color: navy; flex-direction: row-reverse; } .flex-containers > div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks Çıktı:
Çıktı, CSS püf noktaları içeren esnek kutuyu gösterir.
Örnek 3:
Aşağıdaki örneklerde varsayılan olarak başlangıç konumuyla birlikte esnek yön sütun, hizalama ve içerik gösterilmektedir. Sütun, dikey hizalamayla baştan sona etiketleri gösterir.
CSS Tricks for Flexbox /* Show CSS trick for flex*/ .flex-containers { display: flex; background-color: navy; flex-direction: column; } .flex-containers > div { background-color: #f2f2f2; margin: 10px; padding: 10px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks Çıktı:
javascript değişkeni genel
Çıktı, CSS püf noktaları içeren esnek kutuyu gösterir.
Örnek 4:
Aşağıdaki örneklerde ters sütunla esnek yön gösterilmektedir ve hizalama varsayılan olarak başlangıç konumuyla gösterilmektedir. Ters sütun, dikey hizalamayla baştan sona etiketini gösterir.
CSS Tricks for Flexbox /* Show CSS trick for flex*/ .flex-containers { display: flex; background-color: navy; flex-direction: column-reverse; } .flex-containers > div { background-color: #f2f2f2; margin: 10px; padding: 10px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks Çıktı:
Çıktı, CSS püf noktaları içeren esnek kutuyu gösterir.
Esnek Hizalama Püf Noktaları
Flex, CSS hileleri veya özellikleriyle hizalamayı ve içerik konumunu kullanır.
Sözdizimi:
Aşağıdaki sözdizimi, esnek kutu hizalaması için CSS püf noktalarını kullanır.
dizede karşılaştır
display: flex | inline-flex; flex-direction: row | row-reverse | column | column-reverse; align-self: flex-start | flex-end | center | baseline | stretch; justify-content: start | end | center | space-between | space-around | space-evenly;
Tanım:
- Konteyner veya element için ekranı varsayılan olarak flex ile kullanabiliriz.
- Flexbox hizalaması başlangıç, bitiş, merkez ve diğer CSS hile değerleriyle ayarlanır.
- İçerik, 'justify-content' özelliğiyle esnek kutuda ayarlanır.
Örnekler
Aşağıdaki örneklerde farklı değerlere sahip içerik ve esnek kutu konumu gösterilmektedir.
Örnek 1:
Aşağıdaki örnekler satırla birlikte esnek yönü, uçla hizalamayı ve uç konumla gösterilen içeriği yaslamayı gösterir.
CSS Tricks for Flexbox /* Show CSS trick for flex*/ .flex-containers { display: flex; background-color: navy; flex-direction: row; align-self: flex-end; justify-content: end; } .flex-containers > div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks Çıktı:
Çıktı, CSS püf noktaları içeren esnek kutuyu gösterir.
Örnek 2:
Flexbox, kapsayıcıyı justify-content özelliğiyle orta konumda gösterir.
CSS Tricks for Flexbox /* Show CSS trick for flex */ .flex-containers { display: flex; background-color: navy; flex-direction: row-reverse; align-self: flex-end; justify-content: center; } .flex-containers > div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks Çıktı:
Çıktı, CSS püf noktaları içeren esnek kutuyu gösterir.
Örnek 3:
Flexbox, kapsayıcıyı etiketin etrafındaki boşlukla birlikte göstermek için justify-content özelliğini kullanır.
CSS Tricks for Flexbox /* Show CSS trick for flex */ .flex-containers { display: flex; background-color: navy; flex-direction: row; align-self: flex-end; justify-content: space-around; } .flex-containers > div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks Çıktı:
Çıktı, CSS püf noktaları içeren esnek kutuyu gösterir.
Örnek 4:
Flexbox, kapsayıcıyı etiketin etrafındaki boşlukla birlikte göstermek için justify-content özelliğini kullanır. Ekranı özelliğin satır içi esnek değeriyle kullanabiliriz.
CSS Tricks for Flexbox /* Show CSS trick for flex */ .flex-containers { display: inline-flex; background-color: navy; flex-direction: row; align-self: flex-end; justify-content: space-around; } .flex-containers > div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks Çıktı:
Çıktı, CSS püf noktaları içeren esnek kutuyu gösterir.
Flexbox Marjı için CSS Püf Noktaları
CSS özelliklerini kullanarak Flexbox'a ve alt kutusuna kenar boşluğunu ve dolguyu ayarlayabiliriz. Temel flexbox CSS püf noktalarını ve bunların ekran kutusu için değerlerini ayarlayabiliriz. Daha sonra, flexbox'ın alt öğesinin kenar boşluğunu ayarlamak için CSS özelliğini ekleyin.
npm önbellek temizleme
Sözdizimi
Kenar boşluğunu ayarlamak için flexbox'ın alt öğesinde aşağıdaki sözdizimi kullanılır.
Parent_element{ Display: flex; } Child_element{ margin: CSS_VALUE; CSS_property : value; } Örnekler
Aşağıdaki örnekler, alt öğelerle birlikte CSS hilelerini kullanarak kenar boşluğunu ve tasarımı ayarlar.
Örnek 1:
Aşağıdaki örnek, flexbox kabının ilk öğesinin kenar boşluğunu ve dolgusunu ayarlar. Kenar boşluğu değerini, yazı tipi boyutunu ve arka plan rengini gerekli değere uyacak şekilde ayarlayabiliriz.
CSS Tricks for Flexbox /* Show CSS trick for flex */ .flex-containers { display: flex; background-color: navy; } .flex-containers > div:first-child { background-color: red; margin: 20px; padding: 30px; font-size: 25px; } .flex-containers > div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:280px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <p> The first child of flexbox set with different CSS tricks </p> CSS Flex Tricks Çıktı:
Çıktı, ilk öğenin kenar boşluğunu gösterir.
Örnek 2:
Aşağıdaki örnek, flexbox kabının üçüncü öğesinin kenar boşluğunu ve dolgusunu ayarlar. Margin-auto değerini farklı arka plan renkleriyle ayarlayabiliriz.
CSS Tricks for Flexbox /* Show CSS trick for flex */ .flex-containers { display: flex; background-color: navy; } .flex-containers > div:last-child { background-color: yellow; margin-left: auto; padding: 10px; font-size: 25px; } .flex-containers > div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:280px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <p> the last child of flexbox set with different CSS tricks </p> CSS Flex Tricks Çıktı:
Çıktı, ilk öğenin kenar boşluğunu gösterir.
Örnek 3:
Aşağıdaki örnek, flexbox konteynerinin son öğesinin kenar boşluğunu ve dolgusunu ayarlar.
CSS Tricks for Flexbox /* Show CSS trick for flex */ .flex-containers { display: flex; background-color: navy; } .flex-containers > .clip3{ background-color: orange; margin: auto; padding: 10px; font-size: 25px; } .flex-containers > div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:280px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <p> the last child of flexbox set with different CSS tricks </p> CSS Flex Tricks Study Çıktı:
Çıktı, ilk öğenin kenar boşluğunu gösterir.
Çözüm
CSS püf noktaları, esnek kutu tasarımını ayarlamak için özellikleri ve değerlerini kullanır. Gerekli CSS flexbox formatını elde etmek için birden fazla tasarım ve püf noktası kullanabiliriz.