CSS3 弹性盒子和常用标签

抹泪的知更鸟

于 2022-02-25 17:16:58 发布

阅读量386

点赞数 1

分类专栏： HTML+CSS+JavaScript 文章标签： css3 css html

本文链接：https://blog.csdn.net/qq_51596354/article/details/123137383

版权

CSS3弹性盒子

学习目标

掌握CSS3弹性盒子的使用方法
掌握CSS3弹性盒子的水平分布方法 重点
掌握CSS3弹性盒子的垂直分布的方法 重点
掌握CSS3弹性盒子排序的用法

CSS3 弹性盒子属性

属性	描述
display	指定 HTML 元素盒子类型。
flex-direction	指定了弹性容器中子元素的排列方式。
justify-content	设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items	设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap	设置弹性盒子的子元素超出父容器时是否换行。
align-content	修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
flex-flow	flex-direction 和 flex-wrap 的简写。
order	设置弹性盒子的子元素排列顺序。
align-self	在弹性子元素上使用。覆盖容器的 align-items 属性。
flex	设置弹性盒子的子元素如何分配空间。

flex（下级）属性

让所有弹性盒模型对象的子元素都有相同的长度，忽略它们内部的内容

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。

语法

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

属性值

值	描述
flex-grow	一个数字，规定项目将相对于其他灵活的项目进行扩展的量。0
flex-shrink	一个数字，规定项目将相对于其他灵活的项目进行收缩的量。配合flex-basis一起用1
flex-basis	默认子元素宽度长度。合法值：“auto”、“inherit”、"%"、“px”、“em”。
auto	与 1 1 auto 相同。
none	与 0 0 auto 相同。

案例01

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习一</title>
		<link rel="stylesheet" type="text/css" href="../css/exercise1.css"/>
	</head>
	<body>
		<div class="content">
			<ul>
				<li>第1列</li>
				<li>第2列</li>
				<li>第3列</li>
				<li>第4列</li>
				<li>第5列</li>
			</ul>
		</div>
	</body>
</html>

css

 	body{
   
	margin: 0;
}
ul{
   
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
ul li{
   
	width: 18%;
	
}
ul li:nth-of-type(1){
   
	background-color: red;
}
ul li:nth-of-type(2){
   
	background-color: gray;
}
ul li:nth-of-type(3){
   
	background-color: yellow;
}
ul li:nth-of-type(4)

最低0.47元/天解锁文章

抹泪的知更鸟

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS3 弹性盒子和常用标签

CSS3弹性盒子学习目标掌握CSS3弹性盒子的使用方法掌握CSS3弹性盒子的水平分布方法重点掌握CSS3弹性盒子的垂直分布的方法重点掌握CSS3弹性盒子排序的用法CSS3 弹性盒子属性属性描述display指定 HTML 元素盒子类型。flex-direction指定了弹性容器中子元素的排列方式。justify-content设置弹性盒子元素在主轴（横轴）方向上的对齐方式。align-items设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式
复制链接

扫一扫