flex布局

最新推荐文章于 2023-10-19 17:40:39 发布

一夕ξ

最新推荐文章于 2023-10-19 17:40:39 发布

阅读量339

点赞数

分类专栏：前端学习文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_45387575/article/details/125135661

版权

前端学习专栏收录该内容

77 篇文章 6 订阅

订阅专栏

1、调整窗口的时候，子元素始终位于窗口正中央

height: 100vh;注意要给父元素一个高度；vh表示相对于可是窗口的高度单位

1vh=1/100的可视窗口高度

    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        
        .son {
            width: 400px;
            height: 400px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="son"></div>
</body>

2、圣杯布局--上中下布局

使用flex布局，子元素会无法设置宽度：需要使用flex布局指定宽度

flex: 0 0 50px

参数：放大属性缩小属性项目长度

    <style>
        * {
            padding: 0px;
            margin: 0px
        }
        
        section {
            height: 100vh;
            width: 100vw;
            display: flex;
            flex-direction: column;
            text-align: center;
            line-height: 50px;
        }
        
        header,
        footer {
            flex: 0 0 50px
        }
        
        main {
            flex: 1 0 auto
        }
        
        header {
            background-color: #fdf6e3;
        }
        
        footer {
            background-color: #323232;
            color: #ffffff
        }
        
        main {
            background-color: #fff;
            display: flex;
            flex-direction: row;
        }
        
        .left,
        .right {
            flex: 0 0 200px
        }
        
        .left {
            background-color: #509839;
        }
        
        .right {
            background-color: #823384;
        }
        
        .center {
            flex: 1 0 auto
        }
    </style>
</head>

<body>
    <section>

        <header>
            <b>丹歌惊鸿(王也)</b>
        </header>
        <main>
            <article class="left">左侧 <br>丹歌起势 同风而起 <br> 卧龙低伏 入我阵来 <br> 我即方位 我即吉凶 <br> 四方万物 皆我主宰</article>
            <article class="center">
                山里偷得的半日的闲
                <br>搁这儿遛弯儿的人别扰着 您都请便
                <br>半不邋遢 小道名也
                <br>胸无大志 爱咧咧
                <br>少来打听那有的没的
                <br>翻你个底儿掉掀朝天
                <br>顺天下势 理天下事
                <br>云山雾绕 方为术士
                <br>人间不如意 随了谁的性
            </article>
            <article class="right">右侧 <br>但求无愧 自在随心
                <br>常应常静 常静清灵
                <br>凡人本就 六欲七情
                <br>祖师在上 弟子凡心
                <br>不入龙虎局 不得常清静</article>
        </main>
        <footer>
            风后奇门&nbsp;&nbsp;&nbsp;&nbsp;[一人之下]
        </footer>


    </section>

一夕ξ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
flex布局

1、调整窗口的时候，子元素始终位于窗口正中央height: 100vh;注意要给父元素一个高度；vh表示相对于可是窗口的高度单位1vh=1/100的可视窗口高度2、圣杯布局--上中下布局使用flex布局，子元素会无法设置宽度：需要使用flex布局指定宽度flex: 0 0 50px参数：放大属性缩小属性项目长度...
复制链接

扫一扫