.container {
    display: flex;
}

/* Grow to fill space */
.item-1 {
    flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
}

/* Fixed width, won't grow or shrink */
.item-2 {
    flex: 0 0 200px; /* flex-grow: 0, flex-shrink: 0, flex-basis: 200px */
}

/* Grow but maintain minimum */
.item-3 {
    flex: 1 1 300px; /* Grow, shrink, min 300px */
}

.flex-container {
    display: flex;
}

.item-1 { order: 3; } /* Appears third */
.item-2 { order: 1; } /* Appears first */
.item-3 { order: 2; } /* Appears second */

/* Responsive reordering */
@media (max-width: 768px) {
    .sidebar { order: 2; }
    .main { order: 1; }
}

.outer-flex {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.header {
    flex: 0 0 60px;
}

.content {
    flex: 1;
    display: flex; /* Nested flex */
}

.sidebar {
    flex: 0 0 250px;
}

.main {
    flex: 1;
}

.wrap-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.item {
    flex: 1 1 calc(33.333% - 20px); /* 3 columns with gap */
    min-width: 250px; /* Responsive breakpoint */
}

@media (max-width: 768px) {
    .item {
        flex: 1 1 calc(50% - 20px); /* 2 columns */
    }
}

@media (max-width: 480px) {
    .item {
        flex: 1 1 100%; /* 1 column */
    }
}

.container {
    display: flex;
    align-items: center;
    height: 200px;
}

.item-1 {
    align-self: flex-start; /* Override container alignment */
}

.item-2 {
    align-self: flex-end;
}

.item-3 {
    align-self: stretch;
}

.holy-grail {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.header, .footer {
    flex: 0 0 auto;
}

.content {
    flex: 1;
    display: flex;
}

.nav {
    flex: 0 0 200px;
    order: -1; /* Appears first */
}

.main {
    flex: 1;
}

.ads {
    flex: 0 0 150px;
}

@media (max-width: 768px) {
    .content {
        flex-direction: column;
    }
    
    .nav, .ads {
        flex: 0 0 auto;
    }
}

.card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.card {
    flex: 1 1 calc(33.333% - 20px);
    min-width: 280px;
    max-width: 400px;
}

.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.content {
    flex: 1; /* Pushes footer down */
}

.footer {
    flex: 0 0 auto;
}

.center-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.centered-content {
    max-width: 600px;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

.logo {
    flex: 0 0 auto;
}

.nav-links {
    display: flex;
    gap: 20px;
}

.actions {
    flex: 0 0 auto;
}