使用flex实现一个自适应的九官格 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex 九宫格</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around; /* or space-between, space-evenly */
            width: 80%; /* Adjust as needed */
            margin: 20px auto;
        }

        .item {
            width: calc(33.33% - 20px); /* 3 items per row, accounting for margin */
            height: 100px; /* Adjust as needed */
            background-color: #f0f0f0;
            margin: 10px;
            box-sizing: border-box; /* Include padding and border in element's total width and height */
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2em;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .item {
                width: calc(50% - 20px); /* 2 items per row on smaller screens */
            }
        }

        @media (max-width: 480px) {
            .item {
                width: calc(100% - 20px); /* 1 item per row on even smaller screens */
            }
        }
    </style>
</head>
<body>

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
</div>

</body>
</html>

Explanation and Key Improvements:

  • flex-wrap: wrap;: This is crucial for making the grid responsive. It allows items to wrap onto the next line when there isn't enough space.
  • justify-content: space-around;: Distributes items evenly with space around each item. You can also use space-between (space between items, but not at the edges) or space-evenly (equal space between and around items).
  • width: calc(33.33% - 20px);: Calculates the width dynamically. 33.33% ensures three items fit per row. - 20px accounts for the 10px margin on both sides of each item (10px * 2 = 20px). This prevents overflow and ensures items stay within the container.
  • box-sizing: border-box;: Ensures padding and border are included in the element's total width and height, simplifying calculations.
  • Media Queries: The @media rules make the layout responsive. At different screen sizes (breakpoints), the number of items per row changes:
    • 768px and below: 2 items per row.
    • 480px and below: 1 item per row.
  • Centered Content: The .item styles now include display: flex, justify-content: center, and align-items: center to center the content both horizontally and vertically within each grid item.

This improved code provides a robust and responsive nine-grid layout using flexbox. You can easily customize the styling, number of items, and breakpoints to fit your specific needs. Remember to adjust the width calculation in the CSS if you change the number of items per row or the margin.

posted @ 2024-12-09 09:30  王铁柱6  阅读(147)  评论(0)    收藏  举报