什么是C++中的友元函数和友元类？

星巢文化

 关注

阅读 17

2024-11-19

伸缩盒模型

1 简介
2 伸缩项目与伸缩容器
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>伸缩项目</title>
    <style>
        .outer {
            width: 800px;
            height: 500px;
            background-color: aqua;
            display: flex;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid black;
            box-sizing: border-box;
        }

        .inner3 {
            display: flex;
        }

        .inner3 {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner inner1"></div>
        <div class="inner inner2"></div>
        <div class="inner inner3">
            <div>a</div>
            <div>b</div>
            <div>c</div>
        </div>
    </div>
</body>

</html>
3 主轴与侧轴
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>主轴与侧轴</title>
    <style>
        .outer {
            width: 800px;
            height: 500px;
            background-color: aqua;
            display: flex;
            margin: 0 auto;

            /* 主轴默认值 */
            /* flex-direction: row; */

            /* 主轴反向 */
            /* flex-direction: row-reverse; */

            /* 侧轴默认值 */
            /* flex-direction: column; */

            /* 侧轴反方向 */
            flex-direction: column-reverse;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid black;
            box-sizing: border-box;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3</div>
    </div>
</body>

</html>
4 主轴换行
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>主轴换行方式</title>
    <style>
        .outer {
            width: 800px;
            height: 600px;
            background-color: green;
            display: flex;
            margin: 0 auto;

            /* 不换行，默认 */
            /* flex-wrap: nowrap; */

            /* 自动换行 */
            /* flex-wrap: wrap; */

            /* 反向换行 */
            flex-wrap: wrap-reverse;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid black;
            box-sizing: border-box;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3</div>
        <div class="inner">4</div>
        <div class="inner">5</div>
        <div class="inner">6</div>
    </div>
</body>

</html>
5 主轴对齐方式
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>主轴换行方式</title>
    <style>
        .outer {
            width: 800px;
            height: 600px;
            background-color: green;
            display: flex;
            margin: 0 auto;

            flex-wrap: wrap;

            /* 对齐在主轴的开始位置 */
            /* justify-content: start; */

            /* 对齐在主轴的结束位置 */
            /* justify-content: end; */

            /* 对齐在主轴的中间位置 */
            /* justify-content: center; */

            /* 均匀的分布在一行，项目之间的距离是项目与边缘的二倍 */
            /* justify-content: space-around; */

            /* 均匀的分布在一行，项目之间的距离均匀分布，项目与边缘的距离为零 */
            /* justify-content: space-between */

            /* 均匀的分布在一行 */
            justify-content: space-evenly;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid black;
            box-sizing: border-box;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3</div>
    </div>
</body>

</html>
6 侧轴对齐方式
6.1 一行
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>侧轴对齐方式（一行）</title>
    <style>
        .outer {
            width: 800px;
            height: 600px;
            background-color: rgb(63, 211, 206);
            display: flex;
            margin: 0 auto;

            flex-wrap: wrap;
            flex-direction: row;
            justify-content: flex-start;

            /* 居中对齐 */
            align-items: center;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid black;
            box-sizing: border-box;
            text-align: center;
        }

        .inner2 {
            height: 300px;
        }

        .inner3 {
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner inner1">1</div>
        <div class="inner inner2">2</div>
        <div class="inner inner3">3</div>
    </div>
</body>

</html>
6.2 多行
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>侧轴对齐方式（多行）</title>
    <style>
        .outer {
            width: 800px;
            height: 700px;
            background-color: rgb(63, 211, 206);
            display: flex;
            margin: 0 auto;

            flex-wrap: wrap;
            flex-direction: row;
            justify-content: flex-start;

            /* 拉伸对齐 */
            align-content: stretch;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid black;
            box-sizing: border-box;
            text-align: center;
        }

        .inner2 {
            height: 300px;
        }

        .inner3 {
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner inner1">1</div>
        <div class="inner inner2">2</div>
        <div class="inner inner3">3</div>
        <div class="inner inner1">1</div>
        <div class="inner inner2">2</div>
        <div class="inner inner1">1</div>
        <div class="inner inner3">3</div>
    </div>
</body>

</html>
7 flex-basis
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>项目在主轴的基准长度</title>
    <style>
        .outer {
            width: 800px;
            height: 600px;
            background-color: rgb(63, 211, 206);
            display: flex;
            margin: 0 auto;

            flex-wrap: wrap;
            flex-direction: column;
            justify-content: flex-start;
            align-items: start;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid black;
            box-sizing: border-box;
            text-align: center;
        }

        .inner2 {
            flex-basis: 100px;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner inner1">1</div>
        <div class="inner inner2">2</div>
        <div class="inner inner3">3</div>
    </div>
</body>

</html>
8 flex-grow
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>伸缩项目-伸</title>
    <style>
        .outer {
            width: 800px;
            height: 600px;
            background-color: rgb(63, 211, 206);
            display: flex;
            margin: 0 auto;

            flex-wrap: wrap;
            flex-direction: row;
            justify-content: flex-start;
            align-items: start;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid black;
            box-sizing: border-box;
            text-align: center;
        }

        .inner1 {
            flex-grow: 1;
        }

        .inner2 {
            flex-grow: 2;
            width: 300px;
        }

        .inner3 {
            flex-grow: 3;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner inner1">1</div>
        <div class="inner inner2">2</div>
        <div class="inner inner3">3</div>
    </div>
</body>

</html>
9 flex-shrink
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>伸缩项目-伸</title>
    <style>
        .outer {
            width: 800px;
            height: 600px;
            background-color: rgb(63, 211, 206);
            display: flex;
            margin: 0 auto;

            flex-wrap: wrap;
            flex-direction: row;
            justify-content: flex-start;
            align-items: start;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid black;
            box-sizing: border-box;
            text-align: center;
        }

        .inner1 {
            flex-shrink: 1;
        }

        .inner2 {
            flex-shrink: 2;
            width: 300px;
        }

        .inner3 {
            flex-shrink: 3;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner inner1">1</div>
        <div class="inner inner2">2</div>
        <div class="inner inner3">3</div>
    </div>
</body>

</html>
10 项目的排序与单独对齐
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>项目的排序与单独对齐</title>
    <style>
        .outer {
            width: 800px;
            height: 600px;
            background-color: rgb(63, 211, 206);
            display: flex;
            margin: 0 auto;

            flex-wrap: wrap;
            flex-direction: row;
            justify-content: flex-start;
            align-items: start;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid black;
            box-sizing: border-box;
            text-align: center;

            flex-grow: 1;
            flex-shrink: 1;
            flex-basis: 0;


        }

        .inner1 {
            order: 2;
        }

        .inner2 {
            width: 300px;
            order: 1;

            /* 侧轴中间 */
            align-self: center;
        }

        .inner3 {
            order: 0;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner inner1">1</div>
        <div class="inner inner2">2</div>
        <div class="inner inner3">3</div>
    </div>
</body>

</html>

相关推荐

C++友元函数和友元类

爱奔跑的读书者 234 0 0

C++友元和友元函数

洲行 86 0 0

C++友元函数和友元类的使用

穆熙沐 39 0 0

C++笔记 友元函数 友元类

烟中雯城 230 0 0

友元类和友元函数

黎轩的闲暇时光 136 0 0

C++ 28.类与对象—友元（全局函数做友元、友元类、成员函数做友元）

佃成成成成 192 0 0

一文搞懂C++中的友元函数和友元类

目标践行者 174 0 0

C++友元函数和友元类（C++ friend关键字）

他说Python 134 0 0

c++友元类

言诗把酒 87 0 0

C++ 友元类

悲催博士僧 227 0 0

精彩评论（0）

0 0 举报