期末复习web 弹性盒子 Flex与网格Grid基础知识总结

2024-11-01 来源：个人技术集锦

弹性盒子 Flex 基本概念

容器（Flex Container）

定义：Flex 容器是包含 Flex 项目的元素。通过设置 display: flex; 或 display: inline-flex;，一个元素就变成了 Flex 容器。
作用：控制子元素（Flex 项目）的排列方式和对齐方式。

Flex容器属性以及简单应用

主轴方向：flex-direction

•项目换行：flex-wrap

•项目流（主轴方向与换行）：flex-flow

•项目群主轴对齐：justify-content

•项目交叉轴对齐：align-items

•项目群交叉轴对齐：align-content

•项目间距：gap, row-gap, column-gap

flex-direction


```css
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Direction 示例</title>
    <style>
        .container {
            display: flex;
            border: 2px solid #333;
            padding: 10px;
            margin: 20px;
            height: 200px; /* 设置高度，便于查看效果 */
        }

        .item {
            background-color: #4CAF50;
            color: white;
            margin: 5px;
            padding: 20px;
            text-align: center;
            flex: 1; /* 让每个项目等分可用空间 */
        }
    </style>
</head>
<body>

<h2>Flex Direction 示例</h2>

<h3>1. 默认方向 (row)</h3>
<div class="container" style="flex-direction: row;">
    <div class="item">项目 1</div>
    <div class="item">项目 2</div>
    <div class="item">项目 3</div>
</div>

<h3>2. 反向方向 (row-reverse)</h3>
<div class="container" style="flex-direction: row-reverse;">
    <div class="item">项目 1</div>
    <div class="item">项目 2</div>
    <div class="item">项目 3</div>
</div>

<h3>3. 垂直方向 (column)</h3>
<div class="container" style="flex-direction: column;">
    <div class="item">项目 1</div>
    <div class="item">项目 2</div>
    <div class="item">项目 3</div>
</div>

<h3>4. 垂直反向方向 (column-reverse)</h3>
<div class="container" style="flex-direction: column-reverse;">
    <div class="item">项目 1</div>
    <div class="item">项目 2</div>
    <div class="item">项目 3</div>
</div>

</body>
</html>

代码实现后

flex-wrap

<style>
        .container {
            display: flex;
            flex-wrap: wrap; /* 允许换行 */
            border: 2px solid #333;
            padding: 10px;
            margin: 20px;
            height: 200px; /* 设置高度，便于查看效果 */
            width: 500px; /*修改宽度可以看到是否换行*/
            /*或者修改项目的宽度：flex: 1 1 50px; /* 使项目的最小宽度更小 */    }

        .item {
            background-color: #4CAF50;
            color: white;
            margin: 5px;
            padding: 20px;
            text-align: center;
            flex: 1 1 100px; /* 设置项目的基础宽度，允许增长和收缩 */
        }
    </style>

<h2>Flex Wrap 示例</h2>

<h3>1. 不换行 (nowrap)</h3>
<div class="container" style="flex-wrap: nowrap;">
    <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>

<h3>2. 换行 (wrap)</h3>
<div class="container" style="flex-wrap: wrap;">
    <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>

<h3>3. 反向换行 (wrap-reverse)</h3>
<div class="container" style="flex-wrap: wrap-reverse;">
    <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>

代码实现后就是图片2效果

flex-flow是flex-direction和换行：flex-wrap的简写型，默认是不换行 (nowrap)

代码相当于两者的结合

 flex-direction: row;
 flex-wrap: nowrap;
 flex-flow: row wrap; /* 设置主轴为行，并允许换行 */

justify-content

align-items

align-content

gap, row-gap, column-gap

项目（Flex Item）

定义：Flex 项目是直接作为 Flex 容器子元素的元素。所有子元素都会成为 Flex 项目。
作用：每个 Flex 项目可以根据容器的设置独立地调整大小和位置。

Flex项目属性

排序位置：order

定义：order 属性决定了 flex 项在容器中的显示顺序，默认为 0。值越小，越靠前显示；值相同的项目则按文档流顺序排列。

.item {
    order: 1; /* 默认是 0，数字越小越靠前 */
}

弹性成长：flex-grow

定义：flex-grow 属性定义了 flex 项在容器中如何分配多余的空间。默认为 0，表示不增长。值越大，该项目占用的空间越多。

.item {
    order: 1; /* 默认是 0，数字越小越靠前 */
}

弹性收缩：flex-shrink

定义：flex-shrink 属性定义了 flex 项在容器空间不足时如何收缩。默认为 1，表示可以缩小。值越大，该项目收缩得越多。

.item {
    flex-shrink: 1; /* 默认值，允许收缩 */
}

弹性基值：flex-basis

定义：flex-basis 属性定义了在分配空间前，flex 项的初始大小。可以是具体的宽度/高度（如 100px），也可以是 auto，默认为 auto。

.item {
    flex-basis: 200px; /* 初始大小为200px */
}

弹性简写：flex

定义：flex 是一个简写属性，用于同时设置 flex-grow、flex-shrink 和 flex-basis。默认值为 0 1 auto。

.item {
    flex: 1 0 100px; /* 允许增长、禁止收缩，初始大小为100px */
}

自我对齐：align-self

定义：align-self 属性允许单个 flex 项覆盖容器的 align-items 设置。它用于定义该项目在交叉轴上的对齐方式。可能的值有 auto、flex-start、flex-end、center、baseline 和 stretch。

.item {
    align-self: center; /* 该项目在交叉轴上居中对齐 */
}

主轴（Main Axis）

定义：主轴是 Flex 容器中项目排列的主要方向，默认情况下是水平方向（从左到右）。
属性：
flex-direction：用于定义主轴的方向（如 row, row-reverse, column, column-reverse）。

交叉轴（Cross Axis）

定义：交叉轴与主轴垂直。对于默认的水平主轴，交叉轴是垂直方向。
属性：
align-items：用于定义沿交叉轴对齐项目的方式。
align-content：在多行情况下，控制行与行之间的对齐方式。

网格 Grid 基本概念

•网格容器，网格元素，•网络线，网格单元，网格轨道，网格区域

Grid容器属性

网格轨道宽高：grid-template-columns，grid-template-rows

grid-template-columns：定义网格容器的列宽，可以使用固定单位（如 px, em）、百分比或 fr（表示可用空间的分配）

.container {
    display: grid;
    grid-template-columns: 100px 1fr 2fr; /* 第一列 100px，第二列占 1 份，第三列占 2 份 */
}

grid-template-rows：定义网格容器的行高，使用方式类似于 grid-template-columns

.container {
    grid-template-rows: auto 200px; /* 第一行自动高度，第二行 200px */
}

网格间距：row-gap，column-gap，gap

row-gap：定义行与行之间的间距。

.container {
    row-gap: 10px; /* 行间距 10px */
}

column-gap：定义列与列之间的间距。

.container {
    column-gap: 15px; /* 列间距 15px */
}

gap：简写属性，用于同时设置 row-gap 和 column-gap。

.container {
    gap: 10px 15px; /* 行间距 10px，列间距 15px */
}

网格区域：grid-template-areas

通过命名区域来定义网格布局，使得布局更加直观。每个区域用字符串表示，字符串中的每个单词代表一个网格项。

.container {
    display: grid;
    grid-template-areas: 
        "header header header"
        "main sidebar sidebar"
        "footer footer footer";
}

网格对齐方式：justify-content，align-content，place-content

justify-content：定义整个网格在主轴（横轴）上的对齐方式。可能的值有 start、end、center、stretch 和 space-between 等

.container {
    align-content: space-between; /* 网格在纵轴等间距分配 */
}

align-content：定义整个网格在交叉轴（纵轴）上的对齐方式，值同 justify-content。

.container {
    align-content: space-between; /* 网格在纵轴等间距分配 */
}

place-content：是 justify-content 和 align-content 的简写。

.container {
    place-content: center space-between; /* 横轴居中，纵轴等间距 */
}

单元格对齐方式：justify-items，align-items

justify-items：定义单元格内项目在主轴上的对齐方式。可能的值包括 start、end、center 和 stretch。

.container {
    justify-items: center; /* 单元格内项目在横轴居中 */
}

align-items：定义单元格内项目在交叉轴上的对齐方式，值同 justify-items。

.container {
    align-items: stretch; /* 单元格内项目在纵轴拉伸以填满单元格 */
}

网格布局顺序：grid-auto-flow

控制未明确放置的项目在网格中的放置方式。默认值为 row，表示项目按行放置；可以设置为 column，按列放置，或 dense，按密集放置（优先填充空白）。

.container {
    grid-auto-flow: dense; /* 尝试填充空白位置 */
}

全部栏目