flex布局

最新推荐文章于 2023-10-05 10:27:39 发布

LZQMMQZL

最新推荐文章于 2023-10-05 10:27:39 发布

阅读量244

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/LZQMMQZL/article/details/122249932

版权

flex布局

@[TOC](文章目录)

参考博客

Flex 布局教程：实例篇

各个方位的布局

单元素

在这里插入图片描述

  * {
        margin: 0;
        padding: 0;
    }
    .box {
        display: flex;
        display: -webkit-flex; 		Webkit 内核的浏览器，必须加上-webkit前缀。
        min-height: 100vh; 			/*使用纵轴的时候应该指定上一级元素的高度*/
        justify-content: flex-start; 				 1、横轴居左
        
        justify-content: center; 				     2、横轴居中
        
        justify-content: flex-end; 				     3、横轴居右
        
        align-items: flex-start; 					 1、纵轴居上（同一）
        
        align-items: center;    					 4、纵轴居中
        
        align-items: center;						 5、纵轴居中
        justify-content: center;					 

		align-items: center;						 6、横轴居右、纵轴居中
        justify-content: flex-end;

 	    align-items: flex-end；				         7、纵轴居下
 	    
		align-items: flex-end;						 8、纵轴居下，横轴居中
        justify-content: center;

		align-items: flex-end;						 9、纵轴居下，横轴居右
        justify-content: right;
      
    }

    .item {
        background-color: #22ffe9;
        width: 200px;
        height: 200px;
    }

</style>

<div class="box">
    <span class="item">1</span>
</div>

多元素

1、
在这里插入图片描述
2、

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        display: -webkit-flex;
        display: flex;
        justify-content:space-between; 			1、横轴两端对齐
        justify-content:space-around;			2、横轴每个元素间隔相等
        ******未完待续
    }

    .item {
        background-color: #22ffe9;
        width: 200px;
        height: 200px;
    }

</style>

<div class="box">
    <span class="item">&nbsp;</span>
    <span class="item">&nbsp;</span>
    <span class="item">&nbsp;</span>
    <span class="item">&nbsp;</span>

</div>

网格布局

基本网格布局

| 最简单的网格布局，就是平均分布。在容器里面平均分配空间
在这里插入图片描述

   * {
        margin: 0;
        padding: 0;
    }
    .box {
        display: -webkit-flex;
        display: flex;

    }
    .item {
        flex: 1;//各元素平分父元素
        margin: 0 20px 0 20px;
        width: 200px;
        height: 200px;
    }

</style>

<div class="box">
    <span class="item" style="background-color: #00d9ff">&nbsp;</span>
    <span class="item" style="background-color: #0022ff">&nbsp;</span>
</div>

百分比网络布局

在这里插入图片描述

 * {
        margin: 0;
        padding: 0;
    }
    .box {
        display: -webkit-flex;
        display: flex;

    }
    .item {
        flex: 1;
        width: 200px;
        height: 200px;
    }
    .item.left{
        flex: 0 0 50%;
    }
    .item.right{
        flex: 0 0 30%;
    }

</style>

<div class="box">
    <span class="item left" style="background-color: #00d9ff">&nbsp;</span>
    <span class="item right" style="background-color: #0022ff">&nbsp;</span>
</div>

圣杯布局

类似这种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body class="scream">
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .scream{
        display: flex;
        min-height: 100vh;
        flex-direction: column;
    }
    .header,.footer{
        flex: 1;

    }
    .content{
        display:flex;
        flex: 1;
    }
    .main{
        background-color: #8c939d;
        height: 650px;
        flex: 1;
    }
    .nav,.aside{
      /*  两侧设置成12em*/
      flex: 0 0 12em;
    }
    .nav{
        /*导航栏放到左边*/
        order: -1;
    }
    /*小屏幕自适应*/
    @media (max-width: 768px) {
        .content {
            flex-direction: column;
            flex: 1;
        }
        .nav,
        .aside,
        .main {
            flex: auto;
        }
    }
</style>
<header class="header" style="background-color: #ff271a;">头部</header>
<div class="content">
    <main class="main" style="background-color: white">main</main>
    <nav class="nav" style="background-color: #85ce61;">nav</nav>
    <aside class="aside" style="background-color: #0034ba;">aside</aside>
</div>
<footer class="footer" style="background-color: #a8c9ff">脚部</footer>


</body>
</html>

如果有什么不对的地方欢迎各位大神指正！！！

LZQMMQZL

关注

0
点赞
踩
0

收藏

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

flex布局@[TOC](文章目录)参考博客Flex 布局教程：实例篇各个方位的布局单元素 * { margin: 0; padding: 0; } .box { display: flex; display: -webkit-flex; Webkit 内核的浏览器，必须加上-webkit前缀。 min-height: 100vh; /*使用纵轴的时候应该指定上一级元素的高度*/
复制链接

扫一扫