课堂笔记4月22

最新推荐文章于 2024-10-29 17:04:01 发布

蒸汽秋葵y

最新推荐文章于 2024-10-29 17:04:01 发布

阅读量78

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/y850266/article/details/116017821

版权

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文深入探讨了Flex布局的主要概念，包括主轴、交叉轴、对齐方式和换行设置。通过一个实例展示了如何使用CSS实现响应式布局，利用`flex-direction`、`justify-content`、`flex-wrap`等属性调整元素排列和对齐。

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

main axis:水平的主轴
cross axis:垂直的交叉轴

main start:主轴的开始位置 cross start:交叉轴的开始位置
main end:主轴的结束位置 cross end:交叉轴的结束位置

项目默认沿主轴排列
单个项目占据的主轴空间叫main size
单个项目占据的交叉轴空间叫cross size

flex direction:row/row-reverse/column/column-reverse:改变主轴；
row:默认值，从左到右；
row-reverse:从右到左；
column:从上到下；
column-reverse:从下往上

justify-content: space-between/flex-start/flex-end/space-around/center:定义项目在主轴的对齐方式
space-between：两端对齐
flex-start:从主轴的开始位置排列
flex-end:从主轴的结束位置
center:居中
space-around:拉手对齐。环绕对齐

flex-wrap:决定项目换行；
nowrap:默认值，不换行；
wrap:换行显示；
wrap-reverse:反向换行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.box{
				width:1000px;
				height:500px;
				border:1px solid black;
				margin:auto;
				display:flex;
				flex-direction:row;
				justify-content:space-between;
				flex-wrap:wrap;
			}
			.box .box1{
				width:100px;
				height:100px;
				border:1px solid skyblue;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1">1</div>
			<div class="box1">2</div>
			<div class="box1">3</div>
			<div class="box1">4</div>
			<div class="box1">5</div>
			<div class="box1">6</div>
			<div class="box1">7</div>
			<div class="box1">8</div>
			<div class="box1">9</div>
			<div class="box1">10</div>
		</div>
	</body>
</html>