flex简介——css

已于 2023-09-06 17:16:27 修改
阅读量4.3k 收藏 23
点赞数 4
分类专栏： HTML+CSS 文章标签： css3
于 2022-04-19 09:06:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mantou_riji/article/details/124253716
版权

文章目录

flex(弹性盒、伸缩盒)

flex弹性盒、伸缩盒，是css中的又一种布局手段，它主要用来代替浮动来完成页面的布局。

  • 浮动会有很多缺陷：如父元素塌陷等。
  • flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变

浮动的高度塌陷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            width: 800px;
            border:10px rgb(214, 144, 144) solid; 
        }
        li{
            width: 100px;
            height: 100px;
            background-color: cadetblue;
            font-size: 50px;
            text-align: center;
            float: left;
        }
        li:nth-child(2){
            background-color: coral;
        }
        li:nth-child(3){
            background-color: darkgreen;
        }

    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    
</body>
</html>

在这里插入图片描述

弹性盒

弹性容器

定义

要使用弹性盒，必须先将一个元素设置为弹性容器
我们通过display来设置弹性容器
可选值：

  • display: flex设置为块级弹性容器
  • display :inline-flex设置为行内的弹性容器
    区别是：块级弹性容器会独占一行，行内的弹性容器不会独占一行。

设置为弹性容器，里面的元素就会像浮动的效果排列成一行，不同的是felx不会使元素脱离文档流，就不会有高度塌陷等问题。

弹性容器属性

flex-direction

flex-direction指定容器中弹性元素的排列方式
可选值:

  • row 默认值，弹性元素在容器中水平排列（左向右)
    在这里插入图片描述

  • row-reverse弹性元素在容器中反向水平排列(右向左)
    在这里插入图片描述

  • column弹性元素纵向排列（自上向下）

  • column-reverse弹性元素方向纵向排列（自下向上）

主轴：弹性元素的排列方向称为主轴

即可以利用flex-direction指定主轴方向

  • row ：从左向右
  • row-reverse ： 从右向左
  • column：从上向下
  • column-reverse：从下向上

侧轴（辅轴）：和主轴垂直的方向称为侧轴

在这里插入图片描述

flex-wrap

flex-wrap：设置弹性元素是否在弹性容器中自动换行
可选值：

  • nowrap 默认值,元素不会自动换行
    在这里插入图片描述

  • wrap元素沿着辅轴方向自动换行
    在这里插入图片描述

  • wrap-reverse元素沿着辅轴反方向换行
    在这里插入图片描述

flex-flow

flex-direction和flex-wrap的简写，及可以指定主轴方向，有可以指定是否换行。
eg：

flex-direction: row;
flex-wrap: wrap;

相当于

 flex-flow: row wrap;

justify-content

如何分配主轴上的空白空间（主轴上的元素如何排列)

  • 小tips: justify表示主轴上的排列；align表示辅轴上的分布
    可选值;

  • flex-start元素沿着主轴起边排列（空白留在右侧）
    在这里插入图片描述

  • flex-end 元素沿着主轴终边排列（空白留在左侧）
    在这里插入图片描述

  • center元素居中排列（空白平均留在两边）
    在这里插入图片描述

  • space-around空白分布到元素两侧
    在这里插入图片描述

  • space-between空自均匀分布到元素间
    在这里插入图片描述

  • space-evenly空白分布到元素的单侧
    在这里插入图片描述

align-items

align-items元素在辅轴上如何对齐-元素间的关系
-可选值:
stretch默认值，将元素的长度设置为相同的值。长度不够的进行拉伸
即每行的长度分别相同，不同行的长度可以不一样。不同行的长度 = 元素的本身长度 + 被分配的空白的长度（被分配的空白的长度 = 空白总长度/元素行数）
在这里插入图片描述

  • flex-start元素不会拉伸，沿着辅轴起边对齐

在这里插入图片描述

  • flex-end 沿着辅轴的终边对齐
    在这里插入图片描述

  • center居中对齐
    在这里插入图片描述

  • baseline基线对齐，文字的基线是在一行的
    在这里插入图片描述

所以设置弹性容器子元素居中的方法

 align-items: center;
 justify-content: center;

align-content

align-content辅轴空白空间的分布
可选值：

  • flex-start元素沿着辅轴起边排列（空白留在下侧）
  • flex-end 元素沿着辅轴终边排列（空白留在左侧）
  • center 元素居中排列（空白平均留在上下两边）
  • space-around空白分布到元素上下两侧
  • space-between空自均匀分布到元素间
  • stretch 空白分布到元素的单侧 （默认值），也通常说成空白在辅轴上被拉伸以填满容器。

与align-content对应的align-self弹性元素的属性

注意align-self是弹性元素的属性，它用来覆盖当前弹性元素上的align-items
eg：
单独为1设置align-self。
在这里插入图片描述

弹性元素

  • 弹性容器的子元素是弹性元素（弹性项)，注意只有孩子，没有后代。
    只有孩子是弹性元素，后代不算。
  • 弹性元素可以同时是弹性容器。

弹性元素属性

flex-grow

flex-grow指定弹性元素的伸展的系数，即当父元素有多余空间的时,子元素如何伸展。

  • 父元素的剩余空间,会按照flex-grow指定的比例进行分配。
    flex-grow 取值：
  • 0：表示不伸长
  • 1，2，3：其他正整数，数据越大说明伸长越长。
    如果都为同一个数，则都伸长相同的长度。——默认情况
    如果为不同的数则按照数的大小进行比例分配

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            width: 800px;
            border:10px rgb(214, 144, 144) solid; 
            display: flex;
            flex-direction: row;
        }
        li{
            width: 100px;
            height: 100px;
            background-color: cadetblue;
            font-size: 50px;
            text-align: center;
        }
        li:nth-child(1){
            flex-grow: 1;
        }
        li:nth-child(2){
            background-color: coral;
            flex-grow: 2;
        }
        li:nth-child(3){
            background-color: darkgreen;
            flex-grow: 3;
        }

    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    
</body>
</html>

在这里插入图片描述

flex-shrink

flex-shrink指定弹性元素的收缩系数

  • 当父元素中的空间不足以容纳所有的子元素时，对子元素进行收缩。
    flex-shrinl 取值：
  • 0：表示不收缩
  • 1，2，3：其他正整数，数据越大说明收缩越大。
    如果都为同一个数，则都收缩相同的长度。——默认情况
    如果为不同的数则按照数的大小进行比例分配。

补充：
缩减系数的计算方式比较复杂，缩减多少是根据缩减系数和元素大小来计算。
不一定缩减系数大锁的就多，有元素大小和缩减系数共同决定缩减的大小。
一般情况下，缩减系数越大，元素越大缩减的就越多。

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            width: 200px;
            border:10px rgb(214, 144, 144) solid; 
            display: flex;
            flex-direction: row;
        }
        li{
            width: 100px;
            height: 100px;
            background-color: cadetblue;
            font-size: 50px;
            text-align: center;
        }
        li:nth-child(1){
            flex-shrink: 1;
        }
        li:nth-child(2){
            background-color: coral;
            flex-shrink: 2;
        }
        li:nth-child(3){
            background-color: darkgreen;
            flex-shrink: 3;
        }

    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    
</body>
</html>

在这里插入图片描述

flex-basis

flex-basis 指的是元素在 主轴上 基础长度。
如果主轴是模向的则该值指定的就是元素的宽度
如果主轴是纵向的则该值指定的是就是元素的高度
可选值：

  • 默认值是 auto，表示参考元素自身的高度或宽度（width或heigth）
  • 如果传递了一个具体的数值，则以该值为准

即：flex-basis和width、heigth是冲突的，但是优先级比 width、heigth 高，如果他有值就按他来，如果它没值就按width、heigth来。
eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            width: 800px;
            border:10px rgb(214, 144, 144) solid; 
            display: flex;
        }
        li{
            width: 200px;
            height: 100px;
            font-size: 50px;
            text-align: center;
            line-height: 100px;

            flex-basis: 100px;
        }
        li:nth-child(1){
             background-color: cadetblue;
        }
        li:nth-child(2){
            background-color: coral;
        }
        li:nth-child(3){
            background-color: darkgreen;
        }

    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    
</body>
</html>

在这里插入图片描述

合并使用 flex

按弹簧来说：flex-basis相当于弹簧的基本长度，flex-shrink相当于弹簧的收缩长的，flex-grow相当于弹簧的拉伸长度。

flex可以设置弹性元素所有的三个样式
格式：flex: 增长 缩减 基础;
有默认设定好的值，也可以自己设置值。默认设定好的3个值：

  • initial “flex:0 1 auto”
  • auto “flex: 1 1 auto”
  • none "flex: 0 0 auto”——弹性元素没有弹性

order

通过order可以指定弹性元素的排列顺序。
eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            width: 800px;
            border:10px rgb(214, 144, 144) solid; 
            display: flex;
        }
        li{
            width: 200px;
            height: 100px;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
        }
        li:nth-child(1){
             background-color: cadetblue;
             order:3;
        }
        li:nth-child(2){
            background-color: coral;
             order:2;
        }
        li:nth-child(3){
            background-color: darkgreen;
             order:1;
        }

    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    
</body>
</html>

在这里插入图片描述

练习

导航条

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./reset.css">
    <style>
        .nav{
            width: 1210px;
            height: 48px;
            line-height: 48px;
            margin: 50px auto;
            background-color: #e8e8e8;
            display: flex;
        }
        .nav li{
            flex-grow: 1;
        }
        .nav a{
            display: block;
            color: #808080;
            text-decoration: none;
            font-size: 16px;
            text-align: center;
        }
        .nav a:hover{
            color: #fff;
            background-color: #636363;
        }
        
    </style>
  </head>
  <body>
    <ul class="nav">
      <li><a href="#">HTML/CSS</a></li>
      <li><a href="#">Browser Side</a></li>
      <li><a href="#">Server Side</a></li>
      <li><a href="#">Programming</a></li>
      <li><a href="#">XML</a></li>
      <li><a href="#">Web Building</a></li>
      <li><a href="#">Reference</a></li>
    </ul>
  </body>
</html>

在这里插入图片描述

淘宝导航栏

补充

打开移动端的方法：
打开开发者工具->点击手机图标
在这里插入图片描述
-> 选择手机型号，再刷新即可
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .nav{
            width: 100%;
        }
        .nav .inner{
            display: flex;
            justify-content: space-around;
            margin-bottom: 10px;
        }
        .item{
            /* flex:auto; */
            width: 18%;
            text-align: center;
        }
        .item img{
            width: 100%;
        }
        .item a{
            color: #333;
            text-decoration: none;
            font-size: 18px;
        }
    </style>
</head> 
<body>
    <!--  -->
    <div class="nav">
        <div class="inner">
            <div class="item">
                <a href="#"><img src="https://gw.alicdn.com/imgextra/i4/O1CN01XCiY1B1px9ivHkDGm_!!6000000005426-2-tps-183-144.png" alt=""></a>
                <span>天猫新品</span>
            </div>
            <div class="item">
                <a href="#"><img src="https://gw.alicdn.com/imgextra/i3/O1CN01FgQFp81spmBXqQMtA_!!6000000005816-2-tps-183-144.png" alt=""></a>
                <span>今日爆款</span>
            </div>
            <div class="item">
                <a href="#"><img src="https://gw.alicdn.com/imgextra/i1/O1CN01tsk5OY1q0MUo5PJga_!!6000000005433-2-tps-183-144.png" alt=""></a>
                <span>天猫国际</span>
            </div>
            <div class="item">
                <a href="#"><img src="https://gw.alicdn.com/imgextra/i2/O1CN01yK3Cxn1sTnAx1fOjq_!!6000000005768-2-tps-183-144.png" alt=""></a>
                 <span>飞猪旅行</span>
            </div>
            <div class="item">
                <a href="#"><img src="https://gw.alicdn.com/imgextra/i1/O1CN01iZIGkz1URSOUdRHqS_!!6000000002514-2-tps-183-144.png" alt=""></a>
                 <span>天猫超市</span>
            </div>
        </div>
         <div class="inner">
            <div class="item">
                <a href="#"><img src="https://gw.alicdn.com/imgextra/i1/O1CN018Ilnep1Qt9ryh1Vue_!!6000000002033-2-tps-183-144.png" alt=""></a>
                 <span>淘宝吃货</span>
            </div>
            <div class="item">
                <a href="#"><img src="https://gw.alicdn.com/imgextra/i2/O1CN01gUIFrA1OuPj70aTIW_!!6000000001765-2-tps-183-144.png" alt=""></a>
                 <span>省钱卡</span>
            </div>
            <div class="item">
                <a href="#"><img src="https://gw.alicdn.com/imgextra/i3/O1CN013WcsZW1jfr4AXnmVl_!!6000000004576-2-tps-183-144.png" alt=""></a>
                 <span>淘金币</span>
            </div>
            <div class="item">
                <a href="#"><img src="https://gw.alicdn.com/imgextra/i2/O1CN01ZOR1cv1yjGFORGh1V_!!6000000006614-2-tps-183-144.png" alt=""></a>
                 <span>阿里拍卖</span>
            </div>
            <div class="item">
                <a href="#"><img src="https://gw.alicdn.com/tfs/TB1WgOmesieb18jSZFvXXaI3FXa-183-144.png?getAvatar=1" alt=""></a>
                 <span>分类</span>
            </div>
        </div>
    </div>

    
</body>
</html>

在这里插入图片描述

_洋
关注
  • 4
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Grd-基于Flexbox的CSS网格系统框架
12-13
Grd是一款基于Flexbox的CSS网格系统框架。通过这个CSS网格框架，你可以在页面中进行各种形式的网格布局。它默认采用和Bootstrap相同的12列布局。
flex——cssLoader
10-15
Flex CSSLoader是一个关键的技术，它允许开发者在Flex应用程序运行时动态加载CSS文件，极大地提高了应用的灵活性和可扩展性。这个技术主要应用于Flex项目，它是一个基于ActionScript 3.0的框架，用于构建富互联网...
Css 弹性布局（Flex）详细介绍（Flex 属性详解、场景分析）
2401_84093407的博客
04-03 1986
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
CSS中 flex布局
最新发布
qq_55555550的博客
06-18 346
将剩余空间添加到两侧 || 将所有浮动块居中 justify-content:center;将父级剩余空间添加到浮动块中间 justify-content: space-between;将父级剩余空间放到盒子两侧 justify-content: space-around;将父级剩余空间平均分配 justify-content: space-evenly;语法---align-items:~~~；item是设置所有的 self是设置某一个的。
CSS中的flex布局
weixin_67644104的博客
01-15 6555
CSS中的flex布局
CSS初入门：flex布局
lalala_dxf的博客
03-21 6610
flex布局 简介 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。布局的传统解决方案，基于盒模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。而Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。任何一个容器都可以指定为 Flex 布局。 关于flex弹性盒模型 采用 Flex 布局的元素，称为 Flex 容器（flex con
CSS之flex布局
weixin_45604020的博客
06-30 4964
和浮动一样都用于网页布局，但flex比浮动要更强大。flex不会产生脱标现象，布局网页更灵活、更简单（推荐使用）。弹性容器+弹性盒子+主轴+侧轴。
CSS3（Flex布局详解）
qq_41765777的博客
01-07 2978
在 flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)，这是默认的设置，当然你可以通过修改使垂直方向变为主轴，水平方向变为交叉轴，这个我们后面再说。这里需要强调，不能先入为主认为宽度就是 main size，高度就是 cross size，这个还要取决于你主轴的方向，如果你垂直方向是主轴，那么项目的高度就是 main size。简单说来，如果你使用块元素如 div，你就可以使用 flex，而如果你使用行内元素，你可以使用 inline-flex。
狂神说——CSS3最新教程快速入门通俗易懂
05-26
本教程“狂神说——CSS3最新教程快速入门通俗易懂”旨在帮助初学者快速掌握CSS3的核心概念和实际应用，通过实例解析，使学习过程更为直观易懂。 一、选择器增强 1. 类选择器：CSS3扩展了类选择器的用法，如`....
页面——CSS+html
11-21
本篇将深入探讨“页面——CSS+html”这一主题，以及它们如何协同工作，创建出优秀的个人联系页面。 HTML是用于构建网页结构的标记语言，它定义了网页内容的元素，如标题、段落、链接等。在个人联系页面中，HTML会...
WEB前端面试——常见CSS知识点
06-30
WEB前端面试——常见CSS知识点 CSS是一种标记语言，用于描述网页的样式和布局。以下是常见的CSS知识点： 一、CSS盒子模型 CSS盒子模型分为标准盒模型（content-box）和怪异盒模型（border-box）。标准盒模型的...
css3_flex使用示例
03-21
在CSS3中，Flexbox（ Flexible Box，弹性盒布局）是一种全新的布局模式，设计初衷是为了更有效地处理一维布局——主要是行或列。它提供了一种更为灵活的方式来控制元素的排列、对齐和分配空间，尤其在响应式设计中...
前端知识——css 之 flex 布局
weixin_42771853的博客
04-04 3550
flex 是 flex-grow || flex-shrink || flex-basis 的简写，flex 属性可以指定1个、2个或3个值。item 多出1个的时候，布局仍是正常的；只有item大于等于2个时，才会出现分散的分布，需要i进行补齐。flex-flow 属性是 flex-direction 和 flex-wrap 的简写，顺序任何。/* 只能设置宽度，不能设置高度，这样i的数量超出时也不会影响布局 */flex-wrap 取默认值时，若一行放不下所有的item元素，则会。
详解CSS中的flex布局
DZQ1223的博客
06-13 4314
弹性盒子（display: flex）是把设置此属性的这块区域（设置此属性的元素）变为弹性盒子，使得此元素的直接子元素按照从左到右的顺序一行排列如果盒子变小（比子元素的宽度或高度小），里面的直接子元素会随着盒子的变化而变化，同时一直保持从左往右一行排列的布局。当主轴为水平方向的时候，若设置了 flex-basis，项目的宽度设置值会失效，flex-basis 需要跟 flex-grow 和 flex-shrink 配合使用才能发挥效果。默认值：auto，即项目本来的大小（采用元素内容的尺寸）。
前端知识——css之flex布局
热门推荐
Caleb的博客
05-20 2万+
1.基本概念 flex布局是一种布局模型，经常被称之为flexbox，使用flex布局之后，他会给子元素提供强大空间分配和对齐能力。 在没有使用flex布局之前，常用布局有：流式布局，浮动布局，定位布局等等。缺陷是子元素需要自己控制自己在父元素中的位置，还要注意父元素高度坍塌。 flex的优点就是避免不灵活的布局形式，创建更多种布局模式供你选择，解决了子元素的对齐和分布与 响应式等问题。缺点是只能依靠自身的布局模式，稍有变化则无法改变。 2.flex...
CSS中的Flex布局
zheshiyangyang的博客
05-21 2295
Flexflex-direction：内部元素的排列方式：从左到右、从右到左、从上到下、从下到上flex-wrap：子元素的换行方式：不换行、换行(第一行在上面、第二行在上面)flex-flow：子元素的排列方式和换行方式的简写justify-content：子元素的水平对齐方式align-items：子元素的垂直对齐方式align-content：设置多个元素组成的整块的对齐方式order：按照数字大小设置各个元素之间的排列方式flex-grow：按照权重分配剩余空间进行等比例放大。
CSS Flex 弹性布局
blog
07-13 1532
文章目录前言Flex一、专业名词二、属性值定义 flex 布局CSS 属性flex-directionflex-wrapflex-flowflex-growflex-shrinkflex-basisflexorder对齐属性align-contentalign-itemsalign-selfjustify-contentplace-contentrow-gapcolumn-gapgap总结 前言 在页面开发的过程中，CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器
flex 教程_完整的flex教程
weixin_26712121的博客
09-14 2万+
flex 教程Much like CSS Grid (my other tutorial) Flex Box is quite complex because it consists of not one but two element types: The container & items. 就像CSS Grid (我的其他教程)一样， Flex Box非常复杂，因为它不仅包含一种元素...
flex布局——最后一行左对齐的实现方式
05-12
要实现最后一行左对齐的效果，可以使用 Flex 布局中的 `justify-content` 和 `flex-wrap` 属性。 首先，将容器设置为 Flex 布局： ```css .container { display: flex; flex-wrap: wrap; } ``` 接着，设置 `justify-content` 属性为 `space-between`，这样每一行中的元素会均匀分布在整个行中： ```css .container { display: flex; flex-wrap: wrap; justify-content: space-between; } ``` 但是这样会导致最后一行的元素也会均匀分布，无法实现左对齐的效果。为了解决这个问题，需要在最后一行中的元素上添加一个 `margin-right: auto;` 的样式，将其向右对齐。 如下所示： ```css .container { display: flex; flex-wrap: wrap; justify-content: space-between; } .container:last-child > *:nth-last-child(-n+2) { margin-right: auto; } ``` 这里使用了 CSS 选择器的 `:last-child` 和 `:nth-last-child`，选择最后一行中的倒数两个元素，然后将它们的 `margin-right` 属性设置为 `auto`，达到左对齐的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值