10.1 Sadə grid
Flexbox ilə elastik və adaptiv maketlər yaratmağa imkan var. İndi bir neçə Flexbox istifadəsi nümunəsinə baxacağıq - müxtəlif maketlər üçün, o cümlədən sadə grid, elementlərin mərkəzləşdirilməsi, naviqasiya menyuları və məhsul kartları yaratmaq üçün.
Flexbox istifadə edərək sadə grid yaratmaq. Bu nümunə, konteynerdə bərabər paylanmış elementlər yaratmağın asan yolunu nümayiş etdirir.
İstifadə nümunəsi:
.flex-container {
display: flex;
flex-wrap: wrap; /* Elementlərin yeni sətrə keçməsinə imkan yaradır */
background-color: lightgrey;
padding: 10px;
}
.flex-item {
background-color: deepskyblue;
margin: 10px;
padding: 20px;
color: white;
font-size: 20px;
flex: 1 1 calc(33.333% - 40px); /* Məkanın elastik paylanması */
box-sizing: border-box;
}
<div class="flex-container">
<div class="flex-item">Element 1</div>
<div class="flex-item">Element 2</div>
<div class="flex-item">Element 3</div>
<div class="flex-item">Element 4</div>
<div class="flex-item">Element 5</div>
<div class="flex-item">Element 6</div>
</div>
flex-basis: calc(33.333% - 40px): elementin hər hansı bir uzadılma və ya sıxılmadan əvvəlki ilkin ölçüsünü təyin edir. Bu halda, element konteynerin 33.333% genişliyini 40 piksel çıxılmaqla tutacaq. calc() ilə CSS-də hesablama birbaşa həyata keçirmək mümkündür.
10.2 Elementlərin mərkəzləşdirilməsi
Elementlərin konteyner daxilində yatay və şaquli mərkəzləşdirilməsi Flexbox istifadə edərək.
İstifadə nümunəsi:
.flex-container {
display: flex;
justify-content: center; /* Yatay mərkəzləşdirmə */
align-items: center; /* Şaquli mərkəzləşdirmə */
height: 100vh; /* Konteynerin tam ekran hündürlüyü */
background-color: lightgrey;
}
.flex-item {
background-color: deepskyblue;
padding: 20px;
color: white;
font-size: 20px;
}
<div class="flex-container">
<div class="flex-item">Centered Item</div>
</div>
10.3 Naviqasiya menyusu
Flexbox istifadə edərək üfüqi naviqasiya menyusunun yaradılması.
İstifadə nümunəsi:
.nav-container {
display: flex;
justify-content: space-around; /* Elementlərin bərabər aralıqlarla yerləşdirilməsi */
background-color: #333;
padding: 10px;
}
.nav-item {
color: white;
text-decoration: none;
padding: 10px 20px;
}
.nav-item:hover {
background-color: #575757;
}
<div class="nav-container">
<a href="#" class="nav-item">Home</a>
<a href="#" class="nav-item">About</a>
<a href="#" class="nav-item">Services</a>
<a href="#" class="nav-item">Contact</a>
</div>
10.4 Məhsul kartları
Məhsul kartlarının maketini Flexbox-dan istifadə edərək yaratmaq.
İstifadə nümunəsi:
.product-list {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
}
.product-item {
flex: 1 1 calc(33.333% - 40px);
border: 1px solid #ccc;
padding: 20px;
background-color: #fff;
text-align: center;
}
.product-item img {
max-width: 100%;
height: auto;
}
.product-title {
font-size: 1.2em;
margin: 10px 0;
}
.product-price {
font-size: 1.5em;
color: #e74c3c;
}
<div class="product-list">
<div class="product-item">
<img src="https://via.placeholder.com/150" alt="Məhsul Şəkli">
<h3 class="product-title">Məhsul 1</h3>
<p class="product-price">$99.99</p>
</div>
<div class="product-item">
<img src="https://via.placeholder.com/150" alt="Məhsul Şəkli">
<h3 class="product-title">Məhsul 2</h3>
<p class="product-price">$79.99</p>
</div>
<div class="product-item">
<img src="https://via.placeholder.com/150" alt="Məhsul Şəkli">
<h3 class="product-title">Məhsul 3</h3>
<p class="product-price">$89.99</p>
</div>
</div>
Kodun izahı:
.product-list: Məhsul kartları arasında boşluqlar və sətir keçidi dəstəkləyən Flex-konteyner.product-item: Sabit eni olan və konteynerin ölçüsünə avtomatik uyğunlaşan Flex-elementlər (məhsul kartları)
GO TO FULL VERSION