HTML第十八次

最新推荐文章于 2024-07-23 11:30:08 发布

常态..

最新推荐文章于 2024-07-23 11:30:08 发布

阅读量44

点赞数

分类专栏：网页前端文章标签： css flex html

本文链接：https://blog.csdn.net/weixin_54989803/article/details/116017760

版权

网页前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
			.box{
				width: 1000px;
				height: 700px;
				border: 1px solid purple;
				margin: auto;
				/*flex布局*/
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				flex-wrap: wrap-reverse;
 			}
			.box .box1{
				width: 100px;
				height: 100px;
				border: 1px solid paleturquoise;
			}
		</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 class="box1">11</div>
		</div>
	</body>
</html>





flex容器

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

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

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

/项目默认沿主轴排列。

/单个项目占据的主轴空间叫main size

/单个项目占据的交叉轴空间叫cross size






flex-direction:row/row-reverese;改变主轴；

row:默认值，从左到右；

row-reverese:从右到左；

column:从上往下；

column-reverese:从下往上

justify-content: flex-between;定义项目在主轴的对齐方式

justify-content: flex-between;space-between/flex-end/space-around/center:

space-between;两端对齐

flex-start:从主轴的开始位置开始排列

flex-end：从主轴的结束位置排列

center:居中

space-around:拉手对齐，环绕对齐






flex-wrap：决定项目换行

nowrap:默认值，不换行

wrap：换行显示

wrap-reverse：反向换行

常态..

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML第十八次

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 1000px; height: 700px; border: 1px solid purpl
复制链接

扫一扫