yCSS.net

Category: Uncategorized

  • 10 Flexbox Basics You Need to Know

    Flexbox is one of the most powerful tools in CSS for creating layouts. Whether you’re designing a simple component or a full-page layout, understanding these basics will save you time and headaches. Below are 10 essential Flexbox concepts with working examples.

    1. Center Anything (Vertically & Horizontally)

    Flexbox makes centering elements simple. Use justify-content and align-items together.

    Centered!
    div {
  display: flex;
  justify-content: center;
  align-items: center;
}

    2. Flex Row vs Flex Column

    Default flex direction is row, but you can switch to column.

    Row 1
    Row 2
    Row 3
    Column 1
    Column 2
    Column 3
    div.row {
  display: flex;
  flex-direction: row;
}
div.column {
  display: flex;
  flex-direction: column;
}

    3. Reverse Order Flex

    Use flex-direction: row-reverse or column-reverse to invert order.

    One
    Two
    Three
    div {
  display: flex;
  flex-direction: row-reverse;
}

    4. Equal Spacing Between Items

    justify-content: space-between distributes items evenly.

    Item 1
    Item 2
    Item 3
    div {
  display: flex;
  justify-content: space-between;
}

    5. Align Items Top, Center, Bottom

    Use align-items to control vertical alignment.

    Top
    Center
    Bottom
    div.item {
  align-self: flex-start | center | flex-end;
}

    6. Flexible Item Grows to Fill Space

    Use flex: 1 to make an item expand.

    Flexible
    Fixed
    div.flexible {
  flex: 1;
}

    7. Shrink Item Only When Needed

    Use flex-shrink to control shrinking.

    Shrinks
    Does not shrink
    div {
  flex-shrink: 1 | 0;
}

    8. Fixed + Flexible Combo

    Combine fixed width and flexible items in the same row.

    Fixed
    Flexible
    div.fixed { width: 100px; }
div.flexible { flex: 1; }

    9. Wrap Items onto Next Line

    Use flex-wrap: wrap for responsive rows.

    Item 1
    Item 2
    Item 3
    Item 4
    div.container {
  display: flex;
  flex-wrap: wrap;
}

    10. Equal-Width Items

    All items take equal space using flex:1.

    Item 1
    Item 2
    Item 3
    div.item {
  flex: 1;
}

    These 10 Flexbox basics will help you tackle almost any layout challenge. Practice these snippets in your projects, and you’ll soon find Flexbox indispensable for modern CSS design.