flex布局个人学习总结及入门案例

写在前面

flex布局笔者学习时主要参考阮一峰老师的flex讲解，这里给出参考链接可做补充学习，Flex布局教程：语法篇、 Flex布局教程：实例篇。

下面则为笔者个人学习总结和一个入门案例。

理论知识

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。默认的主轴方向是从左到右，默认的交叉轴方向是从上到下。

项目默认沿主轴从左往右排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

容器的属性

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

这六个属性是设置在Flex 容器(flex container)上的，也就是设置了CSS代码++display：flex++的元素上的，具体语法参考上面的Flex 布局教程：语法篇

实际工作中可能用的比较多的有以下属性

• flex-direction
• flex-wrap
• justify-content
• align-items
• align-content

项目的属性

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

这六个属性是设置在Flex 项目(flex item)上的，也就是设置在Flex 容器(flex container)的所有子元素上的，具体语法参考上面的Flex 布局教程：语法篇

实际工作中可能用的比较多的有以下属性

• flex
• align-self

入门案例

效果图如上，使用flex布局实现效果布局。

首先搭建页面基本架构，
HTML代码如下：

    

        

            
                姓名：
                
                
            
                学号：
                
            
            
                班级：
                
            
            
                年龄：
                
            
            
                性别：
                
            
            
                爱好：
                
            
            

                查询
                重置
                
                    展开
                
            
        
        新增
    

CSS代码如下：

页面基本架构效果图如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8C0Vcpj6-1628524161578)(https://junjiang.top/upload/2021/07/1-51e8c9e0374346d287b8478d0911ce6b.png)]

接下来就可专注于写CSS代码，实现flex布局排列

第一步选定一个元素作为Flex 容器(flex container)，一般选所要布局排列的元素的公共父元素，这里选择label元素的父元素,接着从上到下先实现input元素的布局排列，在原CSS代码基础上添加：

        .content {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end
        }

        label {
            width: 345px;
            height: 55px;
            text-align: center;
            line-height: 55px;
        }

效果如下：

这里为什么要给label元素设置高度呢？这是因为，flex布局默认一行从左向右排列，但设置了 ++flex-wrap: wrap++ 后，当元素填满一行宽度后会自动换行，因此当为label设置了固定的宽度后，就可决定一行放多少个lable元素了。同理，以后flex布局中遇到类似这种效果，都可通过设置一个固定宽度来决定一行放多少个元素。

接下来就剩下把新增按钮排列到右边，如果用flex布局来实现，就可以嵌套使用flex布局了，到底该谁和谁嵌套呢？，在原CSS代码基础上修改wrapper为：

	.wrapper{
            width: 1063px;
            padding: 20px;
            margin: 0 auto;
            background-color: #fff;  

            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

效果如下：

可以看到相当于在原flex布局的父元素wrapper上再实现flex布局，即嵌套使用了路由，父元素wrapper上的flex布局不影响原flex布局，而新增按钮受
justify-content: flex-end; 影响向右排列了，最后再添加点外上边距即可实现效果图所示效果，到此大工告成。

以上例子是笔者个人刚学习flex布局时所遇到的问题，或有不足，请见谅，其中最重要的是，元素的固定宽度和嵌套flex布局的何时使用和用法，然后灵活使用flex布局的各属性，相信你一定可以做好flex布局。

以上仅代表个人观点。