css3中flexbox的概念是什么

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

创新互联于2013年创立，先为龙海等服务建站，龙海等地企业，进行企业商务咨询服务。为龙海企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

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

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

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

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

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

• 在不同方向排列元素

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

• 更改元素的对齐方式

• 动态地将元素装入容器

创建一个flex容器：

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

display: flex;

    
    
    
    



    

        
1
        
2
    

运行效果：

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

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

运行效果：

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

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

    
    
    
    



    

        
1
        
2
    

运行效果：

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

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属性值的表现：

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

    
    
    
    



    

        
        1
        
2 2 

        
3 33