flex布局

最新推荐文章于 2023-09-12 10:23:21 发布

CHENww_

最新推荐文章于 2023-09-12 10:23:21 发布

阅读量561

点赞数

文章标签： html5 css html

本文链接：https://blog.csdn.net/CHENww_/article/details/120638297

版权

1.flex布局是什么

弹性盒模型

2.在父级定义display：flex之后，float:left;失效

2.1 父级flex之后，子集元素会变成行内块（在一行显示，可以定宽高）

3.原理：

在父级定义flex后，用来设置子集的排列方式

4.行内元素：在一行显示，不能定宽高

行内块：在一行显示，能定宽高

块级元素：独占一行，能定宽高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            display: flex;
            /* 主轴:X轴 */
            flex-direction: row;
            /* flex-direction: column; */

            /* 子集的排列方式 */
            /* 子集从左至右 */
            /* justify-content: flex-start; */

            /* 子集从右至左 */
            /* justify-content: flex-end; */

            /* 子集连在一起居中 */
            /* justify-content: center; */

            /* 单个子集左右两边平均分布 */
            /* justify-content: space-around; */

            /* 子集左右两个贴边，剩余的平均分布 */
            /* justify-content: space-between; */

            /* 子集平均分布 */
            justify-content: space-evenly;

            width: 800px;
            height: 600px;
            margin:0 auto;
            background: purple;
        }
        div>span{
            /* 把行内转为块级元素 */
            /* display: block; */
            width: 100px;
            height: 100px;
            background: #ccc;
        }
    </style>
</head>
<body>
    <pre>
        1.flex布局是什么
        弹性盒模型
        2.在父级定义display：flex之后，float:left;失效
        2.1 父级flex之后，子集元素会变成行内块（在一行显示，可以定宽高）
        3.原理：
        在父级定义flex后，用来设置子集的排列方式

        4.行内元素：在一行显示，不能定宽高
        行内块：在一行显示，能定宽高
        块级元素：独占一行，能定宽高
    </pre>

    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>
</html>

CHENww_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
flex布局

1.flex布局是什么弹性盒模型2.在父级定义display：flex之后，float:left;失效2.1父级flex之后，子集元素会变成行内块（在一行显示，可以定宽高）3.原理：在父级定义flex后，用来设置子集的排列方式4.行内元素：在一行显示，不能定宽高行内块：在一行显示，能定宽高块级元素：独占一行，能定宽高<!DOCTYPE html><html lang="en"><head> &lt...
复制链接

扫一扫

flex布局

“相关推荐”对你有帮助么？