flex布局

最新推荐文章于 2023-10-16 23:24:49 发布

BUG一个不留

最新推荐文章于 2023-10-16 23:24:49 发布

阅读量81

点赞数

本文链接：https://blog.csdn.net/weixin_45526979/article/details/117827291

版权

这篇博客展示了两个HTML/CSS代码示例，分别演示了如何使用flexbox实现元素的水平居中、两端对齐以及垂直排列。通过设置`justify-content`属性，可以调整元素在容器中的水平分布，而`flex-direction`属性则用于改变元素的排列方向，支持从左到右、从右到左、从上到下和从下到上的排列方式。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#big{
				height: 500px;
				border: 2px solid black;
				resize: both;
				overflow: hidden;
				/*申明为flex容器*/
				display: flex;
				/*水平居中*/
				justify-content: center;
				/*右对齐*/
				/*justify-content: flex-end;*/
 /* 两端对齐*/
            /*     justify-content: space-between;*/
           /*两端保持一样的距离*/
                 justify-content: space-around;
                 

              
			}
			.box{
				width: 200px;
				height: 200px;
				color: white;
			    font-size: 100px;	
			    flex-shrink: 0;
			}
			.mi{
				width: 200px;
				height: 200px;
				color: white;
			    font-size: 100px;	
			    flex-shrink: 0;
			}
			#red{
				background-color: red;
			}
			#blue{
				background-color: blue;
			}
			#green{
				background-color: green;
			}
			#orange{
				background-color: orange;
			}
			#fuchsia{
				background-color: fuchsia;
			}
			#cornflowerblue{
				background-color: cornflowerblue;
			}
			#darkgoldenrod{
				background-color: darkgoldenrod;
			}
		</style>
	</head>
	<body>
		<div id="big">
	         <div class="box" id="red">1</div>
	         <div class="box" id="blue">2</div>
	         <div class="box" id="green">3</div>
	         <div class="box mi" id="orange">4</div>
	         <div class="box" id="fuchsia">5</div>
	         <div class="box" id="cornflowerblue">6</div>
	         <div class="box" id="darkgoldenrod">7</div>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#big{
				height: 500px;
				border: 2px solid black;
				resize: both;
				overflow: hidden;
				/*申明为flex容器*/
				display: flex;
				/*左对齐从左到右的顺序*/
/*				flex-direction: row;*/
/*从右到左*/
/*			flex-direction: row-reverse;*/
           /*纵向排列，从上到下*/
          /*flex-direction: column;*/
           /*纵向排列 从下到往上*/
          flex-direction: column-reverse;
			}
			.box{
				width: 200px;
				height: 200px;
				color: white;
			    font-size: 100px;
			}
			#red{
				background-color: red;
			}
			#blue{
				background-color: blue;
			}
			#green{
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div id="big">
	         <div class="box" id="red">1</div>
	         <div class="box" id="blue">2</div>
	         <div class="box" id="green">3</div>
		</div>
	</body>
</html>

BUG一个不留

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #big{ height: 500px; border: 2px solid black; resize: both; overflow: hidden; /*申明为flex容.
复制链接

扫一扫