文章目录
此文为学习笔记
参考视频教程:【黑马!真的很详细!】CSS3-flex布局(flex布局的单个知识点忘记也可以复习)
在线游戏:FLEXBOX FROGGY:练习Flex布局的小游戏
另一地址的博文:弹性布局 | 墨匠初心
一、Flex 布局原理
Flex 是 Flexible Box 的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性, 任何一个容器都可以指定为 Flex 布局
-
当我们为父盒设为flex布局以后,子元素的float、clear和vertical-align属性将失效
-
弹性布局 = 伸缩布局 = 伸缩盒布局 = 弹性和布局 = Flex布局
- 采用 Flex 布局的元素,称为 Flex 容器,简称:“容器”。它的所有子元素自动成为容器成员,称为 Flex 项目,简称项目
总结 Flex 布局原理: 通过给父盒添加flex属性, 来控制子盒的位置和排列方式
二、Flex 布局父项常见属性
flex-direction:设置主轴的方向(项目的排列方向)
1. 主轴和侧轴
在Flex布局中,分为主轴和侧轴两个方向,类似的叫法有:行和列,x轴和y轴
2. 属性值
flex-direction属性决定主轴的方向(即项目的排列方向)
注意:主轴和侧轴是会变化的,就看flex-direction设置谁为主轴,剩下的就是侧轴,而子元素跟随主轴排列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
/* 给父级添加flex属性 */
display: flex;
width: 800px; height:300px;
background-color: #008c8c;
/* 默认的主轴是 x轴,行,row */
/* flex-direction: row; */
}
div span {
width: 150px; height: 100px; margin: 10px;
border: 1px solid #ffff;
}
</style>
</head>
<body>
<div><span>1</span><span>2</span><span>3</span></div>
</body>
</html>
justify-content:设置主轴上的子元素排列方式
justify-content属性定义了项目在主轴上的对齐方式
注意:使用此属性之前一定要确定好主轴是哪个
justify-content:flex-start
justify-content:flex-end;
justify-content:center
justify-content:space-around
justify-content:space-between
flex-wrap:设置子元素是否换行
默认情况下,项目都排在一条线(又称“轴线”)上。
flex-wrap属性默认值为nowarp:不换行,如果Flex项目过多,会自动压缩子元素的width
flex-wrap:nowrap
flex-warp:warp
align-items:设置侧轴上的子元素的排列方式(单行)
该属性是控制子项在侧轴上的排列方式,通常在子项为单行时使用
此处单行:flex-wrap:nowrap; 或flex-wrap:warp;但项目不多,依旧是一行
align-content:设置侧轴上的子元素的排列方式(多行)
设置子项在侧轴上的排列方式,并且只能用于子项出现换行的情况(多行),在单行( 仅指flex-wrap:nowrap;)下是没有效果的
flex-flow:复合属性,相当于同时设置了 flex-direction 和 flex-warp
三、Flex 布局子项常见属性
flex属性
flex属性定义子项目分配剩余空间(width或height吸收),用flex来表示占多少份数,默认为0
计算总份数(各子项flex属性之和),然后计算子项占了多少份
align-self属性
align-self 控制子项自己在侧轴上的排列方式
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items;
order属性定义项目的排列顺序
数值越小,排列越靠前,默认为0
注意:和z-index没关系