广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > html >css3中flexbox的概念是什么
  • 147

0
分享到

css3中flexbox的概念是什么

2024-04-02 19:04:59 147人浏览 安东尼
摘要

本文小编为大家详细介绍“css3中flexbox的概念是什么”，内容详细，步骤清晰，细节处理妥当，希望这篇“CSS3中flexbox的概念是什么”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学

本文小编为大家详细介绍“css3中flexbox的概念是什么”，内容详细，步骤清晰，细节处理妥当，希望这篇“CSS3中flexbox的概念是什么”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

flexbox的意思为“弹性盒子”，是CSS3引入的新的布局模式，是一种可伸缩的灵活的WEB页面布局方式；Flexbox布局模式能够扩展和收缩flex容器内的元素，以最大限度地填充可用空间。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

Flexbox是Flexible box 的简称（灵活的盒子容器），是CSS3引入的新的布局模式，一种可伸缩的灵活的web页面布局方式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。

Flexbox具有很强大的功能，可以很轻松实现很多复杂布局，在它出现之前，我们经常使用的布局方式是浮动或者固定宽度+百分比来进行布局，代码量较大且难以理解。

flex布局之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大的方式：

  • 在不同方向排列元素

  • 重新排列元素的显示顺序

  • 更改元素的对齐方式

  • 动态地将元素装入容器

创建一个flex容器：

在父元素的添加这条属性：

display: flex;
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta Http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .flex-container{
        background-color: #131111;
        display: flex; 
    }
    .flex-container .flex-item{
        padding: 20px;
        background-color: #b1ff84;
    }
    .flex-container .flex-item:first-child{
        background-color: #f5e25f;
    }
    .flex-container .flex-item:last-child{
        background-color: #0B5A79; 
    }
</style>
<body>
    <div>
        <div>1</div>
        <div>2</div>
    </div>
</body>
</html>

运行效果：

css3中flexbox的概念是什么

相当于两个div自动向左浮动,默认情况下，所有的直接子元素都被认为是 flex 项，并从左到右依次排列在一行中。如果 flex 项的宽度总和大于容器，那么 flex 项将按比例缩小，直到它们适应 flex 容器宽度。

也可以将这个两个子div排成一列，在.flex-container添加：flex-direction: column;

运行效果：

css3中flexbox的概念是什么

如果加的属性是flex-direction: column-reverse;即两个div互换（reverse的意思就是相反的），

当在.flex-container添加justify-content: flex-end;里面所有的flex将默认向左对齐变成向右对齐：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .flex-container{
        background-color: #131111;
        display: flex;  
        justify-content: flex-end;
    }
    .flex-container .flex-item{
        padding: 20px;
        background-color: #b1ff84;
    }
    .flex-container .flex-item:first-child{
        background-color: #f5e25f;
    }
    .flex-container .flex-item:last-child{
        background-color: #0B5A79; 
    }
</style>
<body>
    <div>
        <div>1</div>
        <div>2</div>
    </div>
</body>
</html>

运行效果：

css3中flexbox的概念是什么

当justify-content值为：center时，flex项居中对齐，其运行效果：

css3中flexbox的概念是什么

justify-content总共有六个值前三个比较好理解：justify-start（默认，向左对齐），center，justify-end，

  • space-evenly : flex 容器起始边缘和第一个 flex 项之间的间距和每个相邻 flex 项之间的间距是相等。（愚人码头注：该属性以前很少看到，原因是以前浏览器不支持，chrome 也是 60 版本之后才支持。延伸一下，align-content: space-evenly 也是这个逻辑 ）

  • space-between : 任何两个相邻 flex 项之间的间距是相同的，但不一定等于第一个/最后一个 flex 项与 flex 容器边缘之间的间距;起始边缘和第一个项目之间的间距和末端边缘和最后一个项目之间的间距是相等的。

  • space-around : flex 容器中的每个 flex 项的每一侧间距都是相等的。请注意，这意味着两个相邻 flex 项之间的空间将是第一个/最后一个 flex 项与其最近边缘之间的空间的两倍

网上流行的一张图，更好的解释了justify-content属性值的表现：

css3中flexbox的概念是什么

也可以给指定的div让它变成向上或向下对齐：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .flex-container{
        background-color: #131111;
        display: flex;  
        justify-content: center;
        align-items: center;
    }
    .flex-container .flex-item{
        padding: 20px;
        background-color: #b1ff84;
    }
    .flex-container .flex-item:first-child{
        background-color: #f5e25f;
    }
    .flex-container .flex-item:last-child{
        background-color: #0B5A79; 
    }
    .flex-bottom{
        
        align-self: flex-start;
    }
</style>
<body>
    <div>
        <!-- 多加个class属性，方便指定 -->
        <div class="flex-item flex-bottom">1</div>
        <div>2 <br />2 <br/></div>
        <div>3 <br />3<br />3</div>
    </div>
</body>
</html>

运行效果：

css3中flexbox的概念是什么

同样的，algin-item也有五个属性值：

flex-start | flex-end | center | baseline | stretch;

下图就是对应的效果：

css3中flexbox的概念是什么

允许 flex 项多行/列排列

    .flex-container{
        background-color: #131111;
        display: flex; 
        flex-wrap: wrap;
    }

默认情况下， flex 项不允许多行/列排列(nowrap)，如果 flex 容器尺寸对于所有 flex 项来说不够大，那么flex 项将被调整大小以适应单行或列排列。
通过添加 flex-wrap: wrap ，可以将溢出容器的 flex 项将被排列到另一行/列中，它也有三个取值：

nowrap（默认）:不换行.

css3中flexbox的概念是什么

wrap:换行，第一行在上方

css3中flexbox的概念是什么

wrap-reverse：换行，第一行在下方

css3中flexbox的概念是什么

插入一段代码，看下效果：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .flex-container{
        background-color: #131111;
        display: flex; 
        flex-wrap: wrap; 
        justify-content: space-evenly;
        align-content: space-evenly;
    }
    .flex-container .flex-item{
        padding: 20px;
        background-color: #b1ff84;
    }
    .flex-container .flex-item:first-child{
        background-color: #f5e25f;
    }
    .flex-container .flex-item:last-child{
        background-color: #0B5A79; 
    }
    .flex-bottom{
        
        align-self: stretch;
    }
</style>
<body>
    <div>
        <!-- 多加个class属性，方便指定 -->
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </div>
</body>
</html>

运行效果：

当长度不够长时，自动换行：

css3中flexbox的概念是什么

当长度再短时：

css3中flexbox的概念是什么

拉伸 flex 项

flex-grow 只有在 flex 容器中有剩余空间时才会生效。flex 项的 flex-grow 属性指定该 flex 项相对于其他 flex 项将拉伸多少，以填充 flex 容器。默认值为1。当设置为 0 时，该 flex 项将不会被拉伸去填补剩余空间。在这个例子中，两个项的比例是 1:2，意思是在被拉伸时，第一个 flex 项将占用 1/3，而第二个 flex 项将占据余下的空间,flex-grow控制的是flex项的拉伸比例，而不是占据 flex 容器的空间比例。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .flex-container{
        background-color: #131111;
        display: flex;
    }
    .flex-item1{flex-grow: 0;}
    .flex-item2{flex-grow: 1;}
    .flex-item3{flex-grow: 2;}
    .flex-container{ 
        width:400px;
        padding:10px;
        background-color: #F0f0f0; 
      }
      .flex-container .flex-item{
        padding:20px 0;
        text-align: center;
        width:90px;
        background-color: #B1FF84; 
      }
      .flex-container .flex-item:first-child{ 
        background-color: #F5DE25; 
      }
      .flex-container .flex-item:last-child{ 
        background-color: #90D9F7; 
      }

</style>
<body>
        <div>  
                <div class="flex-item flex-item1">1</div>
                <div class="flex-item flex-item2">2</div>
                <div class="flex-item flex-item3">3</div>
              </div>
</body>
</html>

我将三个div全部设为width：90px；

运行效果：

css3中flexbox的概念是什么

将flex-container的width变为600时：

css3中flexbox的概念是什么

可以看出2 3 以不同的比例在填充剩余的空间，grow-shrink则是相反的，默认为1，即如果空间不足，该项目将缩小。

读到这里，这篇“css3中flexbox的概念是什么”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注编程网html频道。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: css3中flexbox的概念是什么

本文链接: https://www.lsjlt.com/news/94023.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • css3中flexbox的概念是什么
    本文小编为大家详细介绍“css3中flexbox的概念是什么”，内容详细，步骤清晰，细节处理妥当，希望这篇“css3中flexbox的概念是什么”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学...
    99+
    2022-10-19
  • css3中transition的概念是什么
    今天小编给大家分享一下css3中transition的概念是什么的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我...
    99+
    2022-10-19
  • css3中bfc的概念是什么
    这篇文章主要介绍“css3中bfc的概念是什么”，在日常操作中，相信很多人在css3中bfc的概念是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”css3中bfc的概念是...
    99+
    2022-10-19
  • html css3的概念是什么
    本文小编为大家详细介绍“html css3的概念是什么”，内容详细，步骤清晰，细节处理妥当，希望这篇“html css3的概念是什么”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。...
    99+
    2022-10-19
  • rgba在css3的概念是什么
    这篇文章主要讲解了“rgba在css3的概念是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“rgba在css3的概念是什么”吧！ ...
    99+
    2022-10-19
  • html5与css3的概念是什么
    今天小编给大家分享一下html5与css3的概念是什么的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了...
    99+
    2022-10-19
  • Css3的概念和优势是什么
    这篇文章主要介绍“Css3的概念和优势是什么”，在日常操作中，相信很多人在Css3的概念和优势是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Css3的概念和优势是什么”...
    99+
    2022-10-19
  • CSS3 FlexBox是什么
    这篇文章主要讲解了“CSS3 FlexBox是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS3 FlexBox是什么”吧！ 　　基本介绍 　　...
    99+
    2022-10-19
  • jquery中$的概念是什么
    这篇文章主要讲解了“jquery中$的概念是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“jquery中$的概念是什么”吧！ ...
    99+
    2022-10-19
  • linux中gnu的概念是是什么
    GNU是一种自由和开放源代码的操作系统，其全称为“GNU's Not Unix”。GNU项目由理查德·斯托曼（Richard Sta...
    99+
    2023-09-22
    linux
  • Spring中AOP的概念是什么
    这篇文章主要介绍“Spring中AOP的概念是什么”，在日常操作中，相信很多人在Spring中AOP的概念是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Spring中AOP的概念是什么”的疑惑有所帮助！...
    99+
    2023-07-02
  • golang中map的概念是什么
    本文小编为大家详细介绍“golang中map的概念是什么”，内容详细，步骤清晰，细节处理妥当，希望这篇“golang中map的概念是什么”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。在golang中，map是一种...
    99+
    2023-07-04
  • php中strsplt的概念是什么
    本文小编为大家详细介绍“php中strsplt的概念是什么”，内容详细，步骤清晰，细节处理妥当，希望这篇“php中strsplt的概念是什么”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。在php中，strsplt...
    99+
    2023-06-30
  • linux中rss的概念是什么
    本文小编为大家详细介绍“linux中rss的概念是什么”，内容详细，步骤清晰，细节处理妥当，希望这篇“linux中rss的概念是什么”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。linux中，rss全称“Resi...
    99+
    2023-06-30
  • linux中du的概念是什么
    这篇文章主要介绍了linux中du的概念是什么的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇linux中du的概念是什么文章都会有所收获，下面我们一起来看看吧。linux中，du全称“Disk Usage”，是...
    99+
    2023-06-30
  • Python中keyerror的概念是什么
    在Python中，KeyError是一种异常，当我们使用字典或集合中不存在的键时，就会引发KeyError。换句话说，当我们尝试通过...
    99+
    2023-08-08
    Python
  • mysql中odbc的概念是什么
    今天小编给大家分享一下mysql中odbc的概念是什么的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了...
    99+
    2022-10-19
  • jquery中prev的概念是什么
    本文小编为大家详细介绍“jquery中prev的概念是什么”，内容详细，步骤清晰，细节处理妥当，希望这篇“jquery中prev的概念是什么”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新...
    99+
    2022-10-19
  • html5中option的概念是什么
    这篇文章主要介绍“html5中option的概念是什么”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“html5中option的概念是什么”文章能帮助大家解决问题。 ...
    99+
    2022-10-19
  • javascript中rows的概念是什么
    本文小编为大家详细介绍“javascript中rows的概念是什么”，内容详细，步骤清晰，细节处理妥当，希望这篇“javascript中rows的概念是什么”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深...
    99+
    2022-10-19
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作