آموزش کامل Flexbox از صفر تا صد | ۲۰ مثال عملی + کدهای آماده

.container {    display: flex;  }  .item {    background: #3498db;    padding: 20px;    color: white;  }

<div class="container">    <div class="item">آیتم ۱</div>    <div class="item">آیتم ۲</div>    <div class="item">آیتم ۳</div>  </div>

.navbar {    display: flex;    justify-content: space-between;    background: #2c3e50;    padding: 15px;    color: white;  }

<div class="navbar">    <div>🏠 خانه</div>    <div>📦 محصولات</div>    <div>👤 پروفایل</div>  </div>

.center-container {    display: flex;    justify-content: center;    align-items: center;    height: 300px;    background: #ecf0f1;  }  .center-box {    background: #e74c3c;    padding: 40px;    border-radius: 10px;    color: white;  }

.horizontal-menu {    display: flex;    justify-content: center;    gap: 30px;    background: #34495e;    padding: 15px;  }  .horizontal-menu a {    color: white;    text-decoration: none;    padding: 8px 16px;    transition: 0.3s;  }  .horizontal-menu a:hover {    background: #e74c3c;    border-radius: 5px;  }

.cards {    display: flex;    gap: 20px;  }  .card {    background: white;    padding: 20px;    border-radius: 10px;    box-shadow: 0 2px 10px rgba(0,0,0,0.1);    flex: 1; /* همه کارت‌ها عرض یکسان می‌گیرند */  }

.site-header {    display: flex;    justify-content: space-between;    align-items: center;    background: #1a1a2e;    padding: 15px 30px;    color: white;  }  .logo {    font-size: 24px;    font-weight: bold;  }  .nav-links {    display: flex;    gap: 25px;  }  .login-btn {    background: #e94560;    padding: 8px 20px;    border-radius: 5px;  }

.footer {    display: flex;    justify-content: space-between;    flex-wrap: wrap;    gap: 30px;    background: #2c3e50;    padding: 40px;    color: white;  }  .footer-column {    flex: 1;    min-width: 150px;  }

.status-bar {    display: flex;    justify-content: space-between;    align-items: center;    background: #f39c12;    padding: 10px 20px;    border-radius: 8px;  }  .left-icon, .right-icon {    font-size: 20px;  }  .center-text {    font-weight: bold;  }

.vertical-menu {    display: flex;    flex-direction: column;    gap: 10px;    width: 200px;  }  .vertical-menu a {    background: #3498db;    padding: 12px;    color: white;    text-decoration: none;    text-align: center;    border-radius: 5px;  }

.reverse-container {    display: flex;    flex-direction: row-reverse;    gap: 10px;    background: #ecf0f1;    padding: 20px;  }

.grow-example {    display: flex;    gap: 10px;  }  .grow-item {    background: #9b59b6;    padding: 15px;  }  .grow-item:first-child {    flex-grow: 1; /* این آیتم رشد می‌کند */  }  .grow-item:last-child {    flex-grow: 2; /* این آیتم دو برابر رشد می‌کند */  }

.wrap-menu {    display: flex;    flex-wrap: wrap;    gap: 15px;    background: #e67e22;    padding: 20px;  }  .wrap-menu a {    background: white;    padding: 10px 20px;    border-radius: 20px;  }

.absolute-center {    display: flex;    justify-content: center;    align-items: center;    height: 400px;    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);  }  .center-content {    background: white;    padding: 40px;    border-radius: 20px;    text-align: center;  }

.login-form {    display: flex;    flex-direction: column;    gap: 15px;    max-width: 300px;    margin: auto;    padding: 30px;    background: #f8f9fa;    border-radius: 10px;  }  .login-form input {    padding: 12px;    border: 1px solid #ddd;    border-radius: 5px;  }  .login-form button {    background: #28a745;    color: white;    padding: 12px;    border: none;    border-radius: 5px;    cursor: pointer;  }

.gallery {    display: flex;    flex-wrap: wrap;    gap: 15px;  }  .gallery img {    flex: 1 1 200px; /* رشد: 1، جمع شدن: 1، اندازه پایه: 200px */    height: 150px;    object-fit: cover;    border-radius: 10px;  }

.order-container {    display: flex;    gap: 10px;  }  .item1 { order: 3; background: #e74c3c; }  .item2 { order: 1; background: #3498db; }  .item3 { order: 2; background: #2ecc71; }

.self-container {    display: flex;    align-items: flex-start;    gap: 10px;    height: 200px;    background: #ecf0f1;  }  .self-item {    background: #9b59b6;    padding: 20px;  }  .special {    align-self: flex-end;    background: #e74c3c;  }

.space-evenly {    display: flex;    justify-content: space-evenly;    background: #f1c40f;    padding: 20px;  }  .space-around {    display: flex;    justify-content: space-around;    background: #e67e22;    padding: 20px;  }

.progress-bar {    display: flex;    height: 30px;    border-radius: 15px;    overflow: hidden;  }  .progress-step1 { background: #e74c3c; flex: 1; }  .progress-step2 { background: #f39c12; flex: 2; }  .progress-step3 { background: #2ecc71; flex: 1; }

.complex-card {    display: flex;    flex-direction: column;    gap: 15px;    border: 1px solid #ddd;    padding: 20px;    border-radius: 10px;  }  .card-header {    display: flex;    justify-content: space-between;    align-items: center;  }  .card-footer {    display: flex;    justify-content: flex-end;    gap: 10px;  }