【前端学习笔记 CSS系列二十二】justify

最新推荐文章于 2024-04-23 16:26:38 发布

GUANYX~

最新推荐文章于 2024-04-23 16:26:38 发布

阅读量894

点赞数

分类专栏：前端学习笔记文章标签：前端 css css3

本文链接：https://blog.csdn.net/gyx1549624673/article/details/122944557

版权

前端学习笔记专栏收录该内容

56 篇文章 0 订阅

订阅专栏

一、效果

在这里插入图片描述

二、代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>justify-content属性</title>
		<style>
			.x {
				width: 1000px;
				height: 300px;
				border: 2px solid pink;
				margin: 100px auto;
				display: flex;
				/* justify-content: flex-start; 默认的，让子元素从父容器的开头开始排序 */
				/* justify-content: flex-end;  让子元素从父容器的结尾开始排序,但是顺序不变 */
				/* justify-content: center; 让子元素在父元素中间显示 */
				/* justify-content: space-between; 左边和右边都贴近盒子,中间平分空隙 */
				justify-content: space-around; /* 相当于给每个盒子添加左右margin外边距 */
			}
			.x>div {
				width: 250px;
				height: 100%;
			}
			.x>div:first-child {
				background-color: pink;
			}
			.x>div:nth-child(2) {
				background-color: purple;
			}
			.x>div:nth-child(3) {
				background-color: skyblue;
			}
			
			.y {
				width: 1000px;
				height: 600px;
				border: 2px solid pink;
				margin: 100px auto;
				display: flex;
				/* justify-content: flex-start; 默认的，让子元素从父容器的开头开始排序 */
				/* justify-content: flex-end;  让子元素从父容器的结尾开始排序,但是顺序不变 */
				/* justify-content: center; 让子元素在父元素中间显示 */
				/* justify-content: space-between; 左边和右边都贴近盒子,中间平分空隙 */
				justify-content: space-around; /* 相当于给每个盒子添加左右margin外边距 */
				
				
				/* 垂直对齐 */
				/* align-items: flex-start; 默认的，让子元素从父容器的开头开始排序,上对齐 */
				/* align-items: flex-end; 底部对齐 */
				/* align-items: center; 垂直居中对齐 */
				align-items: stretch; /* 在子元素不给高度的前提下,拉伸子元素的高度使其适应父容器 */
			}
			.y>div {
				width: 250px;
				/* height: 200px;   在子元素不定义高度的情况下，stretch才会生效，相当于给height:100%;*/
			}
			.y>div:first-child {
				background-color: pink;
			}
			.y>div:nth-child(2) {
				background-color: purple;
			}
			.y>div:nth-child(3) {
				background-color: skyblue;
			}
			
			.wrap {
				width: 1000px;
				height: 200px;
				border: 2px solid pink;
				margin: 100px auto;
				display: flex;
				/* flex-wrap: nowrap; 默认的,不拆行或者不拆列,强制在一起压缩显示 */
				flex-wrap: wrap; /* 当宽度不够的时候换行显示 */
				
				/* flex-flow: row wrap; 简写形式,flex-flow: 排列方向 是否换行 */
				/* 小技巧：
					align-content是针对多行垂直对齐的方式，但使用的前提是必须display：flex，然后flex-wrap:wrap;
				 
				 */
			}
			.wrap>div {
				width: 250px;
				height: 200px; 
			}
			.wrap>div:first-child {
				background-color: pink;
			}
			.wrap>div:nth-child(2) {
				background-color: purple;
			}
			.wrap>div:nth-child(3) {
				background-color: skyblue;
			}
			.wrap>div:nth-child(4) {
				background-color: hotpink;
				order: -1;
				/* order越小，越排在前面，默认都是0 */
			}
			.wrap>div:nth-child(5) {
				background-color: deeppink;
			}
		</style>
	</head>
	<body>
		<section class="x">
			<div>1</div>
			<div>2</div>
			<div>3</div>
		</section>
		<hr />
		<section class="y">
			<div>1</div>
			<div>2</div>
			<div>3</div>
		</section>
		<hr />
		<section class="wrap">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
		</section>
	</body>
</html>

GUANYX~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端学习笔记 CSS系列二十二】justify

一、效果二、代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>justify-content属性</title> <style> .x { width: 1000px; height: 300px; border: 2px solid pink; margin: 100px auto;
复制链接

扫一扫