布局模式:
块(Block),用于网页中的部分
行内(Inline),用于文本
表,用于二维表数据
定位(position),用于元素的明确位置
弹性布局 (flex),可以更轻松地设计灵活的响应式布局结构,而无需使用浮动或定位
flex 就是flexible box的缩写,意为弹性布局,用来为盒装模型提供最大的灵活性 任何一个容器都可以指定为flex布局
给父容器添加display: flex/inline-flex;属性,即可使容器内容采用弹性布局显示,而不遵循常规文档流的显示方式
容器添加弹性布局后,仅仅是容器内容采用弹性布局,而容器自身在文档流中的定位方式依然遵循常规文档流
display:flex; 容器添加弹性布局后,显示为块级元素
display:inline-flex; 容器添加弹性布局后,显示为行内元素
设为 Flex布局后,子元素的float、clear和vertical-align属性将失效 但是position属性,依然生效
弹性布局中的两个方向:
主轴: 在弹性布局中,我们会通过属性规定水平/垂直方向为主轴
交叉轴: 与主轴垂直的另一方向,称为交叉轴
父元素(容器)
通过将 display 属性设置为 flex,flex 容器将可伸缩
弹性布局中必须有一个 display 属性设置为 flex 的父元素
弹性容器的直接子元素会自动成为弹性项目
可以在父元素(容器)中设置flex 容器属性:
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction 属性
定义容器要在哪个方向上堆叠 flex 项目 (决定主轴的方向)
flex-direction: column;垂直堆叠 flex 项目 从上到下(主轴为垂直方向,起点在上沿)
flex-direction: column-reverse;垂直堆叠 flex 项目 但从下到上 (主轴为垂直方向,起点在下沿)
flex-direction: row;水平堆叠 flex 项目 从左到右 默认(主轴为水平方向,起点在左端)
flex-direction: row-reverse;水平堆叠 flex 项目 但从右到左 (主轴在水平方向,起点在右端 )
flex-wrap 属性
规定是否应该对 flex 项目换行 (定义如果一条轴线排不下,如何换行)
flex-wrap: wrap;规定 flex 项目将在必要时进行换行 (换行,并且第一行在容器最上方)
flex-wrap: nowrap;规定将不对 flex 项目换行 默认(当容器宽度不够时,每个项目会被挤压宽度)
flex-wrap: wrap-reverse;规定如有必要,弹性项目将以相反的顺序换行 ( 换行,并且第一行在容器最下方)
flex-flow 属性
用于同时设置 flex-direction 和 flex-wrap 属性的简写属性
flex-flow: row wrap;水平堆叠 flex 项目(从左到右) 并 规定 flex 项目将在必要时进行换行
justify-content 属性
用于对齐 flex 项目 (定义了项目在主轴上的对齐方式)
justify-content: center;将 flex 项目在容器的中心对齐 (居中)
justify-content: flex-start;将 flex 项目在容器的开头对齐 默认(项目位于主轴起点)
justify-content: flex-end;将 flex 项目在容器的末端对齐 (项目位于主轴终点)
justify-content: space-around;显示行之前、之间和之后带有空格的 flex 项目 (每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。开头和最后的项目,与父容器边缘有一定的间隔)
justify-content: space-between;显示行之间有空格的 flex 项目 (两端对齐,项目之间的间隔都相等。开头和最后的项目,与父容器边缘没有间隔)
align-items 属性
用于垂直对齐 flex 项目 (定义项目在交叉轴上如何对齐)
align-items: center;将 flex 项目在容器中间对齐 (交叉轴的中点对齐)
align-items: flex-start;将 flex 项目在容器顶部对齐 (交叉轴的起点对齐)
align-items: flex-end;将弹性项目在容器底部对齐 (交叉轴的终点对齐)
align-items: stretch;拉伸 flex 项目以填充容器 默认 (如果项目未设置高度或设为auto,将占满整个容器的高度)
align-items: baseline;使 flex 项目基线对齐 (项目的第一行文字的基线对齐。文字的行高、字体大小会影响每行的基线)
align-content 属性
用于对齐弹性线 (定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用)
当项目换为多行时,可使用align-content取代align-items
align-content: space-between;显示的弹性线之间有相等的间距 (与交叉轴两端对齐,轴线之间的间隔平均分布)
align-content: space-around;显示弹性线在其之前、之间和之后带有空格 (每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍)
align-content: stretch;拉伸弹性线以占据剩余空间 默认 (轴线占满整个交叉轴)
align-content: center;在容器中间显示弹性线 (与交叉轴的中点对齐)
align-content: flex-start;在容器开头显示弹性线 (与交叉轴的起点对齐)
align-content: flex-end;在容器的末尾显示弹性线 (与交叉轴的终点对齐)
完美的居中
将 justify-content 和 align-items 属性设置为center,然后 flex 项目会在两个轴的方向同时居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>完美的居中</title>
<style>
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background-color: black;
}
.flex-container div {
background-color: red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="flex-container">
<div></div>
</div>
</body>
</html>
子元素(项目)
flex 容器的直接子元素会自动成为弹性(flex)项目
用于弹性项目的属性有:
order
flex-grow
flex-shrink
flex-basis
flex
align-self
order 属性
可以改变 flex 项目的顺序 (定义项目的排列顺序。数值越小,排列越靠前,默认为0)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.flex-container {
display: flex;
align-items: stretch;
background-color: black;
}
.flex-container div {
background-color: red;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
</body>
</html>
flex-grow 属性
规定某个 flex 项目相对于其余 flex 项目将增长多少 (定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.flex-container {
display: flex;
align-items: stretch;
background-color: black;
}
.flex-container div {
background-color: red;
color: white;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 2">2</div>
<div style="flex-grow: 4">3</div>
</div>
</body>
</html>
flex-shrink 属性
规定某个 flex 项目相对于其余 flex 项目将收缩多少 (定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小)
flex-basis 属性
规定 flex 项目的初始长度
定义项目占据的主轴空间。如果主轴为水平,则设置这个属性,相当于设置项目的宽度。 原width将会失效。
flex 属性
是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性
使第二个弹性项目不可增长(0),不可收缩(0),且初始长度为 10 像素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.flex-container {
display: flex;
align-items: stretch;
background-color: black;
}
.flex-container div {
background-color: red;
color: white;
width: 300px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div style="flex: 0 0 10px">2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
align-self 属性
规定弹性容器内所选项目的对齐方式 (定义单个项目自身在交叉轴上的排列方式)
将覆盖容器的 align-items 属性所设置的默认对齐方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.flex-container {
display: flex;
height: 200px;
background-color:black;
}
.flex-container div {
background-color:red;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div style="align-self: flex-start">2</div>
<div style="align-self: flex-end">3</div>
</div>
</body>
</html>