<section>

    <h2>Flexbox</h2>

    <p>Flexbox, or the Flexible Box Layout, is designed for one-dimensional layouts. It allows for the alignment of items within a container, making it a powerful tool for building flexible layouts.</p>

    <h3>Key Properties</h3>

    <ul>

        <li><code>display: flex;</code>: Activates Flexbox on a container.</li>

        <li><code>flex-direction</code>: Defines the direction of flex items (row, column).</li>

        <li><code>justify-content</code>: Aligns items horizontally (flex-start, center, space-between, space-around).</li>

        <li><code>align-items</code>: Aligns items vertically (stretch, flex-start, center).</li>

    </ul>

    <h3>Example</h3>

    <pre><code>.container {

display: flex;

justify-content: center;

align-items: center;

}
.item {
flex: 1; / Distribute space equally /
}

<section>

    <h2>CSS Grid</h2>

    <p>CSS Grid Layout is a two-dimensional layout system that enables designers to create complex layouts using rows and columns.</p>

    <h3>Key Properties</h3>

    <ul>

        <li><code>display: grid;</code>: Activates Grid layout on a container.</li>

        <li><code>grid-template-rows</code> and <code>grid-template-columns</code>: Define the structure of the grid.</li>

        <li><code>grid-area</code>: Places items within a grid cell.</li>

    </ul>

    <h3>Example</h3>

    <pre><code>.grid-container {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 10px;

}
.grid-item {
grid-area: 1 / 1 / 2 / 2; / Start at row 1, column 1 and span 1 row and 1 column /
}

<section>

    <h2>Other CSS Techniques</h2>

    <p>While Flexbox and Grid are fundamental, there are other important CSS techniques to enhance your layouts:</p>

    <ul>

        <li><strong>Float:</strong> An older layout method used for wrapping text around images, though less common now with Flexbox and Grid.</li>

        <li><strong>Position:</strong> Controls the positioning of elements (static, relative, absolute, fixed).</li>

        <li><strong>Media Queries:</strong> Enables responsive design by applying styles based on screen size.</li>

    </ul>

</section>



<section>

    <h2>Conclusion</h2>

    <p>Mastering Flexbox, Grid, and other CSS techniques is essential for web design. These tools allow for the creation of responsive and attractive web layouts. Experiment with different properties to see what works best for your project!</p>

</section>