flex弹性容器的基本使用

Gjanuary

已于 2023-07-29 13:05:15 修改

阅读量145

点赞数

分类专栏：前端学习记录文章标签： flex弹性容器

于 2022-02-26 09:11:58 首次发布

本文链接：https://blog.csdn.net/Gjanuary/article/details/123145105

版权

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

75 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<!-- 移动端必设置 -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<title>弹性容器使用</title>
	<style>
		*{
			margin: 0;
			padding: 0;
			list-style-type: none;
		}
		ul{
			width: 800px;
			border: 1px solid red;
			/*设置为弹性元素*/
			display: flex;
			/*
				设置方向
				row 表示在一行
				column 表示在一列
			*/
			flex-direction: row;
			/*
				设置弹性元素是否在弹性容器中自动换行
					可选值	nowrap（默认值）不会自动换行
							wrap会自动换行
			*/
			flex-wrap: wrap;
			/*
				设置子元素的排列方式
				flex-start靠主轴开始位置
				flex-end靠主轴结束位置
				center 居中
				space-around 空白分布到子元素的2测
				space-evenly 空白单边分配
			*/
			justify-content: space-evenly;
			/*
				align-item 元素在辅轴上如何对齐
				center居中对齐
				
			*/
		}
		li{
			width: 100px;
			height: 100px;
			background-color: burlywood;
			color:white;
			text-align: center;
			line-height: 100px;
			font-size: 35px;
			float: left;
			/*
				flex-grow指定子元素的伸展系数，
					当父元素有多余空间的时候，子元素该如何伸展
					也就是说父元素的空间，子元素会按照系数比例进行分配
			*/
			/*flex-grow: 1;*/
			/*flex-shrink，0表明不会伸缩，值越大伸缩越小*/
			/*flex-shrink: 0;*/
		}
		li:nth-child(1){
			background-color: pink;
		}
		li:nth-child(2){
			background-color: black;
		}
		li:nth-child(3){
			background-color: goldenrod;
		}
	
		
	</style>

</head>
<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
	
</body>
</html>
<!--
	flex弹性盒：使用弹性盒子必须先将父级元素设置为一个弹性容器
		（1）通过display类设置弹性容器
			display:flex  设置为块级弹性容器(比较常用)
			display:inline-flex 设置为行内的弹性容器
		（2）弹性元素
			弹性容器的直接子元素就是弹性元素（只是第一层子元素）

-->