前端 CSS Flex 布局

最新推荐文章于 2024-05-21 19:43:55 发布

泡泡码客

最新推荐文章于 2024-05-21 19:43:55 发布

阅读量189

点赞数

分类专栏：博客前端文章标签： flex html css css3 前端

本文链接：https://blog.csdn.net/qq_28827635/article/details/106010561

版权

前端同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

博客

37 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex</title>
    <style>
        html, body {
            height: 100vh;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        .container {
            height: 100%;
            width: 100%;
            box-shadow: 0 0 8px 0 red;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .container .main {
            width: 46%;
            height: 46%;
            margin: 1%;
            box-shadow: 0 0 8px 0 red;
        }
        .main .box{
            width: 46%;
            height: 46%;
            margin: 1%;
            box-shadow: 0 0 8px 0 peru;
        }
        /* 并排垂直居中 */
        /* stretch 是align-items默认值，所以可以解决自适应宽/高度问问题 */
        /* justify-content 子盒位于父盒的哪个部位（常用三个）：flex-start-开头-默认 flex-end-结尾 center-中心*/
        /* align-items  子盒位于父盒的哪个部位（常用四个）： stretch-拉伸以适应容器-默认 flex-start-开头 flex-end-结尾 center-中心*/
        /* justify-content 演示：https://www.runoob.com/try/playit.php?f=playcss_justify-content */
        /* align-items 演示：https://www.runoob.com/try/playit.php?f=playcss_align-items */
        .main-1 {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        /* 并列垂直居中，和上面就一行不一样 */
        /* column 会颠倒 justify 和 align 的作用方向，上面 justify 作用于水平，下面作用于垂直，align 同理*/
        /* flex-direction 几个常用的：row-水平-默认 column-垂直 row-reverse-水平反序 column-reverse-垂直反序 */
        .main-2 {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="main-1 main">
            <div class="box-1 box"></div>
            <div class="box-2 box"></div>
        </div>
        <div class="main-2 main">
            <div class="box-1 box"></div>
            <div class="box-2 box"></div>
        </div>
    </div>
</body>
</html>

泡泡码客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端 CSS Flex 布局

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flex</title> <style> html, body { .
复制链接

扫一扫