Flex布局中flex-warp实现居中

Flex布局中flex-warp实现居中

今天尝试了cssFlex布局中flex-warp的实现,记录一下需要注意的地方:

1.首先想使用flex布局必须要在容器中display属性改为flex。
display属性是没有继承性的,所以父类定义了flex,子类想使用flex布局也要定义一下display。行内元素定义需要加inline。
有一点需要注意,设为flex布局后,属性float会失效!

//容器
	display:flex;
//行内元素
	display:inline-flex;

2.flex布局中X轴被称为main主轴,Y轴被称为cross跨越轴。
main轴开始位置为main start,cross轴开始位置为cross start。总长用axis。

使用flex-warp属性时需要定义display属性。
实践中,定义div宽度:

  1. flex-warp属性值为nowarp时子元素不会换行,且子元素的宽度会在一定范围内强制更改。
  2. flex-warp属性值为warp时,元素会根据浏览器大小自动换行。(flex布局很适合手机与电脑通用的开发)
  3. flex-warp属性值为warp-reverse时,元素也会根据浏览器大小换行,不同的是第一行是在浏览器下方。

属性笔记:
border-radius:1-4 lenght|% / 1-4 lenght|%; 添加圆角边框,1-4对应 左上 右上 右下 左下 ( / 是完整写法 表示弧度 )

padding 控制边框宽度

justify-content ; align-items分别控制项目在主轴(main)和交叉轴(cross)位置

text-align ; line-height 与flex布局做对比 同样分别控制项目在x与y的位置,center是定义横向位置的,所以这种方式在竖直居中中的应用非常不方便。

上述两个属性都是作用在content内容中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test</title>
	<style>
		.undersurface{
     
			display: flex;
			background-color: orange;
			border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;
			flex-wrap:wrap;
			padding:5px;
		}
		.middle{
     
			display: flex;
			background-color: white;
			width: 100px;
			height: 100px;
			margin: 4px;
			justify-content: center;
            align-items: center;
		}
		.top{
     
			background-color: orange;
			width: 80px;
			height: 80px;
			border-radius: 50%;
			color: white;
			font-weight: bolder;
			font-size: 30px;
			line-height: 80px;
			text-align:center;
			
		}

	</style>


</head>
<body>

<div class="undersurface">
</div> 

<script type="text/javascript">
	
	let Html = "";
	for (var i = 0; i <= 20; i++) {
     
		Html +='	
'; Html +='
' + i + '
'
; Html +='
'
; } document.getElementsByClassName("undersurface")[0].innerHTML = Html; </script> </body> </html>

你可能感兴趣的:(CSS样式,flex,html)