网站首页 > 基础教程正文

html网页flex弹性布局及属性flex-direction

ccvgpt 2024-11-09 11:21:38 基础教程 10 ℃

flex弹性布局：(1)其容器能调节子节点宽或高，以适应不同屏幕。(2)可以将一个元素当做容器，其子元素自动成为子容器。(3)水平主轴和垂直交叉轴。

设定主轴方向flex-direction：(1)默认row，主轴为水平方向，起点在左边。(2)row-reverse主轴为水平方向，起点在右边。(3)主轴为垂直方向，起点在上面。(4)主轴为垂直方向，起点在下面。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <style type="text/css">
		.flexTest{
			display: flex;
			flex-direction: column;
		}
		.item{
			width: 100px;
			height: 100px;
			margin: 10px;
			background: #c3c3c3;
		}
	</style>
</head>
<body>
	<div class="flexTest">
		<div class="item">1</div>
		<div class="item">2</div>
		<div class="item">3</div>
		<div class="item">4</div>
	</div>
</body>
<script type="text/javascript">
</script>
</html>

上一篇：你居然只知道蓝绿发布?今天教你全链路灰度
下一篇： Flex布局(语法篇) flex布局教程实例篇

网站首页 > 基础教程 正文

html网页flex弹性布局及属性flex-direction

猜你喜欢

网站首页 > 基础教程正文