Flex布局

最新推荐文章于 2023-06-16 14:25:52 发布

之昂张啊

最新推荐文章于 2023-06-16 14:25:52 发布

阅读量70

点赞数

分类专栏： H5、CSS3、JS前端技术应用训练 # Flex布局文章标签： flex

本文链接：https://blog.csdn.net/zzSoledad/article/details/107835275

版权

H5、CSS3、JS前端技术应用训练同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

Flex布局

1 篇文章 0 订阅

订阅专栏

1.flex-direction

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .obox {
            width: 800px;
            height: 600px;
            border: 1px solid #222;
            /* 容器 */
            display: flex;
            /* flex-direction 让元素按照主轴的方向进行排列 */
            /* 默认是row 从左到右 */
            /* flex-direction: row; */
            /* 从右到左 */
            /* flex-direction: row-reverse; */
            /* 从上到下 */
            /* flex-direction: column; */
            /* 从下到上 */
            flex-direction: column-reverse;

        }

        .os {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>

<body>
    <div class="obox">
        <div class="os">1</div>
        <div class="os">2</div>
        <div class="os">3</div>
        <div class="os">4</div>
    </div>
</body>

2.justify-content

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .obox {
            width: 800px;
            height: 600px;
            border: 1px solid #222;
            /* 容器 */
            display: flex;
            /* justify-content 控制元素在主轴上对齐的方式 */
            justify-content: flex-start;
            /* 尾部对齐 */
            justify-content: flex-end;
            /* 居中对齐 */
            justify-content: center;
            /* 平分剩余空间 */
            justify-content: space-around;
            /* 先两边在平分剩余空间 */
            justify-content: space-between;
        }

        .os {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>

<body>
    <div class="obox">
        <div class="os">1</div>
        <div class="os">2</div>
        <div class="os">3</div>
        <div class="os">4</div>
    </div>
</body>

3.flex-wrap

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .obox {
            width: 600px;
            height: 600px;
            border: 1px solid #222;
            /* 容器 */
            display: flex;
            /* 不换行 */
            /* flex-wrap: nowrap; */
            /* 换行 */
            flex-wrap: wrap;
        }

        .os {
            width: 200px;
            height: 200px;
            background: red;
            margin: 5px;
        }
    </style>
</head>

<body>
    <div class="obox">
        <div class="os">1</div>
        <div class="os">2</div>
        <div class="os">3</div>
        <div class="os">4</div>
    </div>
</body>

4.align-items

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .obox {
            width: 600px;
            height: 600px;
            border: 1px solid #222;
            /* 容器 */
            display: flex;
            /* align-items 单行 在y轴的对齐方式 */
            /* 默认的是flex-start 从上到下 */
            align-items: flex-start;
            /* 从下到上 */
            /* 从下到上 */
            align-items: flex-end;
            /* 居中 */
            align-items: center;
            /* 拉伸 */
            align-items: stretch;//需注释掉高度才可以拉伸
        }

        .os {
            width: 100px;
            /* height: 100px; */
            background: red;
            margin: 5px;
        }
    </style>
</head>

<body>
    <div class="obox">
        <div class="os">1</div>
        <div class="os">2</div>
        <div class="os">3</div>
        <div class="os">4</div>
    </div>
</body>

5.align-content

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .obox {
            width: 600px;
            height: 600px;
            border: 1px solid #222;
            /* 容器 */
            display: flex;
            flex-wrap: wrap;
            /* align-content 侧轴上多行情况排列方式 */
            /* 多行对齐 */
            /* align-content: flex-start; */
            /* 从下面对齐 */
            /* align-content: flex-end; */
            /* 中间对齐 */
            /* align-content: center; */
            /* 平均分 */
            /* align-content: space-around; */
            /* 先两边 后中间平均分 */
            /* align-content: space-between; */
            /* 侧轴平均分多行 */
            align-content: stretch;
        }

        .os {
            width: 200px;
            /* height: 200px; */
            background: red;

        }
    </style>
</head>

<body>
    <div class="obox">
        <div class="os">1</div>
        <div class="os">2</div>
        <div class="os">3</div>
        <div class="os">4</div>
    </div>
</body>

6.flex

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .obox {
            width: 600px;
            height: 100px;
            border: 1px solid red;
            display: flex;
        }

        /* 项目属性 */
        .os1 {
            background: yellow;
            flex: 20%;
        }

        .os2 {
            background: #ccc;
            flex: 80%;
        }
    </style>
</head>

<body>
    <div class="obox">
        <div class="os1">1</div>
        <div class="os2">2</div>
    </div>
</body>

7.align-self

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .obox {
            width: 600px;
            height: 100px;
            border: 1px solid #222;
            display: flex;
            /* 容器侧轴上的对齐 */
            /* align-items: center; */
        }

        .os {
            width: 50px;
            /* height: 50px; */
            align-self: stretch;
            background: red;
        }
    </style>
</head>

<body>
    <div class="obox">
        <div class="os">1</div>
        <div class="os">2</div>
        <div class="os">3</div>
        <div class="os">4</div>
    </div>
</body>

8.flex应用-导航栏

在这里插入代码片

之昂张啊

关注

0
点赞
踩
0

收藏

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

1.flex-direction<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .obox { width: 800px;
复制链接

扫一扫