后端的前端笔记：flex布局

最新推荐文章于 2021-10-08 12:37:06 发布

邋遢的流浪剑客

最新推荐文章于 2021-10-08 12:37:06 发布

阅读量290

点赞数 2

文章标签： flex布局

本文链接：https://blog.csdn.net/qq_40378034/article/details/110728985

版权

后端的前端笔记专栏收录该内容

6 篇文章 1 订阅

订阅专栏

1、flex布局原理

在这里插入图片描述

2、flex布局父项常见属性

常见父项属性：

在这里插入图片描述

1）flex-direction设置主轴的方向

主轴与侧轴：

在这里插入图片描述

2）justify-content设置主轴上的子元素排列方式

在这里插入图片描述

3）flex-wrap子元素是否换行

在这里插入图片描述

4）align-items设置侧轴上的子元素排列方式（单行）

在这里插入图片描述

5）align-content设置侧轴上的子元素的排列方式（多行）

在这里插入图片描述

align-content和align-items的区别：

在这里插入图片描述

6）flex-flow

在这里插入图片描述

7）小结

在这里插入图片描述

3、flex布局子项常见属性

1）flex子项目占的份数

在这里插入图片描述

案例：

<html>

<head>
    <style>
        section {
            display: flex;
            width: 60%;
            height: 150px;
            margin: 0 auto;
        }

        section div:nth-child(1) {
            width: 100px;
            height: 150px;
            background-color: red;
        }

        section div:nth-child(2) {
            flex: 1;
            background: green;
        }

        section div:nth-child(3) {
            width: 100px;
            height: 150px;
            background-color: blue;
        }

        p {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 100px auto;
        }

        p span {
            flex: 1;
        }

        p span:nth-child(2) {
            flex: 2;
            background-color: purple;
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>

    <p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>
</body>

</html>

在这里插入图片描述

2）align-self控制子项自己在侧轴的排列方式

在这里插入图片描述

3）order属性定义子项的排列顺序（前后顺序）

在这里插入图片描述

学习资料：

https://www.bilibili.com/video/BV1N54y1i7dG?p=3

邋遢的流浪剑客

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
后端的前端笔记：flex布局

1、flex布局原理2、flex布局父项常见属性常见父项属性：1）flex-direction设置主轴的方向主轴与侧轴：2）justify-content设置主轴上的子元素排列方式3）flex-wrap子元素是否换行4）align-items设置侧轴上的子元素排列方式（单行）5）align-content设置侧轴上的子元素的排列方式（多行）align-content和align-items的区别：6）flex-flow7）小结3、flex布局子项常见属性1）
复制链接

扫一扫