弹性盒布局案列

最新推荐文章于 2024-06-29 09:41:08 发布

Stirve unremitting

最新推荐文章于 2024-06-29 09:41:08 发布

阅读量145

点赞数

文章标签： css css3 html html5

本文链接：https://blog.csdn.net/weixin_46421045/article/details/105027331

版权

本文详细探讨了CSS弹性盒布局的原理与实践，通过案例分析展示了如何使用flexbox实现响应式和动态布局。内容包括Flex容器的属性设置、Flex项目属性的应用以及各种布局模式的实现，帮助开发者更好地掌握这一现代布局技术。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
    margin: 0;padding: 0;}
			/*body{display:flex;}*/
			div{
    
				width: 100px;
				height: 100px;
				background: #ccc;
				margin: 100px;
				border-radius:10px;
				box-shadow:1px 1px 3px 1px #000;
			}
			p{
    
				/*background: yellow;*/
			}
			span{
    
				width: 20px;
				height: 20px;
				background: #000;
				border-radius:10px;
			}
			
			/*一个点*/
			.box1{
    
				display: flex;/*设置为弹性盒*/
				justify-content:center;/*设置在主轴上居中*/
				align-items:center;/*设置子元素在侧轴居中*/
			}
			
			/*两个点*/
			.box2{
    
				display:flex;/*设置为弹性盒*/
				justify-content:space-around;/*设置p标签在主轴两端对齐*/
				padding:10px;
				box-sizing:border-box;/*怪异盒模型*/
			}
			.box2 p{
    
				/*height:20px;
				width: 100px;*/
				/*background: yellow;*/
				display:flex;/*设置为弹性盒*/
			}
			.box2 p:nth-child(2){
    
				align-items:flex-end;/*span在侧轴上的终点位置*/
			}
			
			/*三个点*/
			.box3