flex弹性布局练习

最新推荐文章于 2023-09-24 10:33:24 发布

今天会下雨吗

最新推荐文章于 2023-09-24 10:33:24 发布

阅读量779

点赞数 2

分类专栏： CSS HTML 文章标签： flex css3

本文链接：https://blog.csdn.net/weixin_45663697/article/details/105966438

版权

CSS 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

HTML

6 篇文章 0 订阅

订阅专栏

01.骰子的点数

flex弹性布局适合在一维布局运用，多维适合用网格布局
示例：
代码
css

#box1,#box2,#box3,#box4,#box5,#box6{float: left;}
#box1{width: 100px; height: 100px; border: 1px solid black; border-radius: 5px; display: flex; justify-content: center; align-items: center;}
#box1 div{width: 40%; height: 40%; border-radius: 50%; background: red;}

#box2{width: 100px; height: 100px; border: 1px solid black; border-radius: 5px; display: flex;justify-content: space-between;}
#box2 div:nth-child(2){align-self: flex-end;}
#box2 div{width: 40%; height: 40%; border-radius: 50%; background: blue;}

#box3{width: 100px; height: 100px; border: 1px solid black; border-radius: 5px; display: flex;justify-content: space-between;}
#box3 div{width: 35%; height: 35%; border-radius: 50%; background: blue;}
#box3 div:nth-child(2){align-self: center;}
#box3 div:last-child{align-self: flex-end;}

#box4{width: 100px; height: 100px; border: 1px solid black; border-radius: 5px; display: flex;flex-wrap: wrap;}
#box4 div{width: 100%;height: 50%; display: flex;justify-content: center; justify-content: space-between;}
#box4 div:last-child{display: flex; align-items: flex-end;}
#box4 i{display: block; width: 35%; height: 70%; border-radius: 50%; background: blue;}

#box5{width: 100px; height: 100px; border: 1px solid black; border-radius: 5px; display: flex;flex-wrap: wrap; justify-content: center;}
#box5 div{width: 100%; display: flex;justify-content: center; justify-content: space-between;}
#box5 div:last-child{display: flex; align-items: flex-end;}
#box5 div:nth-child(2){width: 30%; height: 30%; border-radius: 50%; background: blue;align-self: center;}
#box5 i{display: block; width: 30%; height: 120%; border-radius: 50%; background: blue;}

#box6{width: 100px; height: 100px; border: 1px solid black; border-radius: 5px; display: flex;flex-wrap: wrap;}
#box6 div{width: 100%; display: flex;justify-content: center; justify-content: space-between;}
#box6 div:last-child{display: flex; align-items: flex-end;}
#box6 i{display: block; width: 30%; height: 90%; border-radius: 50%; background: blue;}

html

<div id="box1">
<div></div>
</div>
<div id="box2">
    <div></div>
    <div></div>
</div>
<div id="box3">
    <div></div>
    <div></div>
    <div></div>
</div>
<div id="box4">
    <div>
        <i></i>
        <i></i>
    </div>
    <div>
        <i></i>
        <i></i>
    </div>
</div>
<div id="box5">
    <div>
        <i></i>
        <i></i>
    </div>
    <div></div>
    <div>
        <i></i>
        <i></i>
    </div>
</div>
<div id="box6">
    <div>
        <i></i>
        <i></i>
    </div>
    <div>
        <i></i>
        <i></i>
    </div>
    <div>
        <i></i>
        <i></i>
    </div>
</div>

02.实现两列固定宽度，一列自适应

效果：
代码
css

*{margin: 0; padding: 0;}	/*取消浏览器默认的margin、padding*/
#main{width: 100%; height: 150px; display: flex;}
.left{width: 200px; background: yellowgreen;}
.center{flex: 1; background: purple;}	/*让中间部分自动填充区域剩余空间*/
.right{width:200px; background: pink;}

html

<div id="main">
   <div class="left"></div>
   <div class="center"></div>
   <div class="right"></div>
</div>

03.百度弹性导航

示例
实现效果（第一个图片右侧距离是左边的两倍，中间图片两侧距离相同）
使用flex弹性布局不论图片个数是多少都能实现这个效果，如果使用浮动、设置左右间隔距离的话，图片个数变化后还要调整左右间隔
代码

<style>
        *{margin: 0px; padding:0;}
        ul,li{margin: 0px; padding: 0px;}
        li{list-style: none;}   /*list-style: none -> 去掉ul标签前的小圆点*/
        a{text-decoration: none; color: #000;}      /*text-decoration: none -> 去掉a标签的下划线*/
        img{display: block;}

        div{width: 800px; height: 130px; border: 1px solid black;}
        div ul:last-child{margin-top: 30px;}	/*使上下两行分隔*/
        ul{display: flex; flex-direction: row;justify-content: space-around;}	/*主要使用了justify-content: space-around;*/
    </style>
</head>
<body>
    <div id="box1">
        <ul>
            <li><a href="#"><img src="baidu.png" alt="#"></a></li>
            <li><a href="#"><img src="baidu.png" alt="#"></a></li>
            <li><a href="#"><img src="baidu.png" alt="#"></a></li>
            <li><a href="#"><img src="baidu.png" alt="#"></a></li>
            <li><a href="#"><img src="baidu.png" alt="#"></a></li>
        </ul>
        <ul>
            <li><a href="#"><img src="baidu.png" alt="#"></a></li>
            <li><a href="#"><img src="baidu.png" alt="#"></a></li>
            <li><a href="#"><img src="baidu.png" alt="#"></a></li>
            <li><a href="#"><img src="baidu.png" alt="#"></a></li>
            <li><a href="#"><img src="baidu.png" alt="#"></a></li>
        </ul>
    </div>
</body>

今天会下雨吗

关注

2
点赞
踩
7

收藏

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

01.骰子的点数 flex弹性布局适合在一维布局运用，多维适合用网格布局示例：代码css#box1,#box2,#box3,#box4,#box5,#box6{float: left;}#box1{width: 100px; height: 100px; border: 1px solid black; border-radius: 5px; display: flex; j...
复制链接

扫一扫