收藏
批改状态：合格
老师批语：今晚有实战, 大家应该出来练一练了
什么是弹性布局（flex）？有什么用？
任何一个元素,只要设置了display: flex属性, 就可以将它声明为一个Flex容器
Flexible Box 模型，通常被称为 flexbox, 是一种一维布局模型，它给 flexbox 的子元素之间提供了强大的空间元素的分布和对齐能力。
在传统布局中, 元素水平对齐比较容易实现,而垂直对齐非常麻烦Flex可以优雅的实现容器中多个子元素之间如何分布, 以及对齐方式。
flex的主轴与交叉轴。
作业：
1.1：
.container {
height: 400px;
border: 1px solid red;
/*创建flex容器，以块元素显示, 容器宽度由元素宽高叠加构成*/
display:flex;
}
.item {
width: 100px;
background:#E11DCDFF;
border: 1px solid black;
font-size: 2rem;
text-align: center;
line-height: 100px;
}效果：
手抄：
1.2以行内元素显示, 容器宽度由元素宽高叠加构成。注解：在容器设置了：display: inline-flex;，以行内元素显示
/*设置父级框的颜色边框样式*/
.container {
height: 400px;
border: 1px solid red;
/*创建flex容器，以行内元素显示, 容器宽度由元素宽高叠加构成*/
display: inline-flex;
}
.item {
width: 100px;
background:#E11DCDFF;
border: 1px solid black;
font-size: 2rem;
text-align: center;
line-height: 100px;
}实际效果：
手抄：
2.1:水平排列，弹性填充不换行，在flex容器里添加上：flex-direction: 控制flex元素排列的方向。
.container {
height: 300px;
border: 2px solid red;
/*创建flex容器，以块级元素显示*/
display: flex ;
/*水平排列, 弹性填充不换行*/
/*默认值: 从左到右水平排列,从起始线到终止线*/
flex-direction: row;
}
.item {
width: 100px;
background-color: lightblue;
border: 1px solid black;
font-size: 2rem;
text-align: center;
line-height: 100px;
}效果：
2.2，从右到左水平排列, 反向
flex-direction: row-reverse;
效果：
2.3：垂直排列, 弹性元素表现的如同块元素，从上到下
css
.container {
height: 300px;
border: 2px solid red;
/*创建flex容器，以块级元素显示*/
display: flex;
}
/*垂直排列, 弹性元素表现的如同块元素*/
/*取消容器高度和元素的宽度,这样看上去更直观*/
.container {
height: auto;
/*从上到下垂直排列(如块元素),主轴为垂直方向*/
flex-direction: column;
}
.item {
width: auto;
}
.item {
width: 100px;
background-color: lightblue;
border: 1px solid black;
font-size: 2rem;
text-align: center;
line-height: 100px;
}
效果
2.3：垂直排列，从下往上。
flex-direction: column-reverse;
效果
手抄：
3.1：显示效果，换行显示：
css：
/*创建flex容器*/
.container {
/*定义高度，创建多行flex容器*/
width: 500px;
/*以块级元素显示*/
display: flex;
/*换行显示, 元素宽度不压缩*/
flex-wrap: wrap;
}效果图：
3.3，显示效果，不换行显示：
css
/*公共样式*/
.container {
height: 300px;
border: 2px solid red;
}
.item {
width: 100px;
background-color: lightblue;
border: 1px solid black;
font-size: 2rem;
text-align: center;
line-height: 100px;
}
/*创建flex容器*/
.container {
/*定义高度，创建多行flex容器*/
width: 500px;
/*以块级元素显示*/
display: flex;
/*反向换行显示*/
flex-wrap: wrap-reverse;
} 
手抄：
4.弹性元素在主轴上如何分布
4.1： flex-start: 单行样式和多行样式
css
/*从起始线(左)开始,默认值*/.
flex-start{justify-content: flex-start; } 效果：
4.1：flex-start: 多行样式
css：
/*从起始线(左)开始,默认值*/
.flex-start {
justify-content: flex-start;
}
/*创建一个通用样式组件*/
.wrap {
flex-wrap: wrap;
} 
4.2：flex-end: 主轴终点开始排列，单行和多行。
css：
/*flex-end: 从终止线(右)开始*/
.flex-end{justify-content: flex-end;}
/*进行换行处理*/
.wrap {
flex-wrap: wrap;
} 效果：
4.3:center: 弹性元素做一个整体居中显示
css:
/*center: 所有元素居中排列*/
.center{justify-content: center;}
/*进行换行处理*/
.wrap {
flex-wrap: wrap;
} 效果：
4.4：space-between:首尾元素紧贴起止点,其它元素平分剩余空间
css：
/*space-between:主轴上首元素贴起始线,尾元素贴终止线,剩余元素均分空间*/
.space-between{justify-content: space-between;}
/*进行换行处理*/
.wrap {
flex-wrap: wrap;
} 效果：
4.5：space-around:每个元素二边空间相等,相邻元素空间累加。
css:
/*space-around: 主轴上空间在元素二侧平均分配,元素间隙比它到边框间隙大一倍*/
.space-around{justify-content: space-around;}
/*进行换行处理*/
.wrap {
flex-wrap: wrap;
} 效果：
4.6:space-evenly:每个元素, 以及元素到与起止点的空间全部相等
css:
/*space-evenly主轴上剩余空间在元素之间平均分配,包括元素与边框之间*/
.space-evenly{justify-content: space-evenly;}
/*进行换行处理*/
.wrap {
flex-wrap: wrap;
}效果：
5,使用justify-content的按排列来设置导航。
css
a {
text-decoration: none;
background-color: lightgreen;
color: black;
padding: 5px 10px;
margin: 0 5px;
border-radius: 5px 5px 0 0;
}
nav {
display: flex;
border-bottom: 1px solid gray;
}
a:hover,
a:focus,
a:active {
background-color: orangered;
color: white;
}
/*设置导航从起始线(左)开始排序,*/
nav {
justify-content: flex-start;
}
/*从终止线(右)开始*/
nav {
justify-content: flex-end;
}
/*设置所有元素居中排列*/
nav {
justify-content: center;
}效果：
手抄：
6.align-items: 设置单行容器中元素在垂直轴上的排列方式
stretch: 默认值, 元素高度自动拉伸充满整个容器
css:
.container {
width: 500px;
height: 300px;
}
/*单行容器*/
/*stretch: 默认值,元素在交叉轴上自动延展到容器的高度*/
.stretch {
align-items: stretch;
}
/*多行容器*/
/*align-content: stretch: 元素拉伸高度填充全部空间*/
.wrap-stretch {
align-content: stretch;
}
.wrap {
flex-wrap: wrap;
}效果：
flex-start: 元素紧贴容器起点
css：
@import url("public.css");
.container {
width: 500px;
height: 200px;
}
/*单行容器*/
/*align-items: flex-start: 元素从容器的交叉轴起始线开始排列*/
.flex-start{align-items: flex-start}
/*多行容器*/
/*align-content: flex-start;: 默认顶部, 起始线*/
.wrap-flex-start{align-content: flex-start};
.wrap {
flex-wrap: wrap;
}效果：
flex-end: 元素紧贴容器终点
css：
@import url("public.css");
.container {
width: 500px;
height: 200px;
}
/*align-items: flex-end: 元素从容器的交叉轴终止线开始排列*/
.flex-end{align-items: flex-end;}
/*align-content: flex-end;: 底部, 终止线*/
.wrap-flex-end{align-content: flex-end;}
.wrap {
flex-wrap: wrap;
}效果：
center: 所有元素做为一个整体在容器垂直方向居中显示
css：
@import url("public.css");
.container {
width: 500px;
height: 200px;
}
/*align-items: center: 元素位于交叉轴中心位置排列*/
.center{align-items: center;}
/*align-content: center: 居中*/
.wrap-center{align-content: center;}
.wrap {
flex-wrap: wrap;
} 效果：
space-between: 垂直方向首尾行紧贴起止点,其它行平分剩余空间
css：
.wrap-space-between{align-content: space-around;}
.wrap {
flex-wrap: wrap;
}效果：
space-around: 每个元素二边空间相等,相邻元素空间累加
css：
/*align-content: space-around: 交叉轴上空间在元素二侧平均分配,元素间隙比它到边框间隙大一倍*/
.wrap-space-around {
align-content: space-around;
}
.wrap {
flex-wrap: wrap;
}效果：
space-evenly: 每个元素, 以及元素到与起止点的空间全部相等
css：
/*align-content: space-evenly: 交叉轴上剩余空间在元素之间平均分配,包括元素与边框之间*/
.wrap-space-evenly {
align-content: space-evenly;
}
.wrap {
flex-wrap: wrap;
}效果：
手抄：
总结：
通过学习Flex，相比以前的布局更简单。
Flex对齐排列有两种，一种是水平排列，一种是垂直排列。水平排列分两种，从左到右排列，从右到左排列，垂直排列也分两种，从上到下排列和从下到上排列。
Flex中, 起始线使用flex-start, 终止线用flex-end表示
Flex容器，容器中定义flex时，为块元素，独占一行，垂直排列，定义或inline-flex时，做为行内元素显示,即宽度由flex元素决定。
flex-direction 可以设置二个排列方向,四个值，水平排列，分左右，右左，垂直排列分上下，下上
flex-wrap 可以设置是否换行 ，三个值,二个方向，
flex-flow 作用是简写flex-direction和flex-wrap属性
justify-content 设置排列起始位置，按排列起始位置与剩余空间分配议案
align-items 控制元素在交叉轴上的排列方式
align-content 只适用于在多行容器中,控制交叉轴上元素的排列和容器剩余空间的处理方式,有二种对齐方式: 基本对齐, 分布式对齐
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
