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

最新推荐文章于 2023-05-16 22:08:39 发布

背影、

最新推荐文章于 2023-05-16 22:08:39 发布

阅读量266

点赞数

分类专栏：布局样式文章标签： css html flex

本文链接：https://blog.csdn.net/weixin_43408077/article/details/119549720

版权

布局样式专栏收录该内容

5 篇文章 0 订阅

订阅专栏

写在前面

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

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

理论知识

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

flex布局原理.jpg

容器默认存在两根轴：水平的主轴（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

入门案例

效果图.png

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

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

<body>
    <div class="wrapper">
        <div class="content">
            <label>
                <span>姓名：</span>
                <input placeholder="请输入姓名" />
                </label>
            <label>
                <span>学号：</span>
                <input placeholder="请输入学号" />
            </label>
            <label>
                <span>班级：</span>
                <input placeholder="请输入班级" />
            </label>
            <label>
                <span>年龄：</span>
                <input placeholder="请输入年龄" />
            </label>
            <label>
                <span>性别：</span>
                <input placeholder="请输入性别" />
            </label>
            <label>
                <span>爱好：</span>
                <input placeholder="请输入爱好" />
            </label>
            <div class="function">
                <button class="btn">查询</button>
                <button class="btn">重置</button>
                <span class="btn spread">
                    展开
                </span>
            </div>
        </div>
        <button class="add">新增</button>
    </div>
</body>

CSS代码如下：

<style>
        body{
            background-color: #e6e6e6;
        }

        .wrapper{
            width: 1063px;
            padding: 20px;
            margin: 0 auto;
            background-color: #fff;        
        }
</style>

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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;
        }

效果如下：

修改.png

这里为什么要给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;
        }

效果如下：

修改2.png

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

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

以上仅代表个人观点。

背影、

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
flex布局个人学习总结及入门案例

写在前面flex布局笔者学习时主要参考阮一峰老师的flex讲解，这里给出参考链接可做补充学习，Flex布局教程：语法篇、 Flex布局教程：实例篇。下面则为笔者个人学习总结和一个入门案例。理论知识采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交
复制链接

扫一扫