目录
介绍
flex布局的优点缺点以及布局原理
优点
1.优点在于容易操作,根据flex规则很容易达到某个布局效果。
2.集合了百分比布局和浮动的优点,可以具体设置宽度
也免于设置以及清除浮动,同样可以达到相同的效果。
缺点
1.pc端布局稍差,IE11及以下版本不支持。
布局原理
1.通过给父盒子添加flex属性,来控制子盒子的位置和排列方式
2.设置flex属性的容器称为flex父容器,父容器的子元素称为子容器
(flex项目)
当设置flex布局之后,子元素的float,clear,vertical-align属性将失效
学习
由于篇幅原因会演示一部分,想学会就要积极动手
父容器常见属性
主轴
1.flex-direction(设置主轴方向)
flex布局中分为主轴和侧轴,默认主轴为x轴(水平向右), 侧轴为y轴(水平向下), direction属性可以改变主轴的方向,以及更换主轴。
属性值 | 说明 |
---|---|
row | 左→右 |
row-reverse | 右→左 |
column | 上→下 |
column-reverse | 下→上 |
演示
<style>
div {
/* 没有设置flex属性 */
width: 300px;
height: 300px;
background-color: red;
}
div span {
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<div>
<span class="a">1</span>
<span class="b">2</span>
<span class="c">3</span>
</div>
</body>
可以看出行内元素的特性产生了这种效果 span元素 由内容的多少来决定大小,中间的间隙则是默认的white-space属性产生的回车效果,
<style>
div {
/* 给父容器设置flex布局 */
display: flex;
width: 800px;
height: 300px;
background-color: red;
/* 默认值为row */
flex-direction: row;
}
div span {
color: green;
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
设置成flex布局之后,新效果的产生 是因为flex布局会将行内元素转换成行内快元素,标签的大小由设置的宽高决定,而不是内容,元素之间的缝隙也消失了。
我们修改 direction属性看看效果
flex-direction: row-reverse; 把默认主轴设置为了 反向行(x)排列
2.justify-content 设置主轴上子元素的排列方式
使用这个属性之前应当确认好主轴
属性值 | 说明 |
---|---|
flex-start | 从左到右或者是从上到下(看主轴) |
flex-end | 排列到尾部。(跟主轴反转做好区分) |
center | 在主轴居中对齐 |
space-around | 平分剩余空间 |
space-between | 先两边贴边再平方剩余空间 |
演示
justify-content: flex-end;
div {
/* 给父容器设置flex布局 */
display: flex;
width: 800px;
height: 300px;
background-color: red;
/* 默认值为row */
flex-direction: row;
/* 设置主轴排列方式 */
justify-content: flex-end;
}
同样是从左往右排列 只不过是会排列到尾部
justify-content: space-around;
<style>
div {
/* 给父容器设置flex布局 */
display: flex;
width: 800px;
height: 300px;
background-color: red;
/* 默认值为row */
flex-direction: row;
/* 设置主轴排列方式 */
justify-content: space-around;
}
div span {
color: green;
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
主轴 x轴剩余空间平均分配
3.flex-wrap设置子元素是否换行
属性值 | 说明 |
nowrap | 不换行(默认值) |
wrap | 换行 |
wrap-reverse | 换行后位置互换 |
<style>
div {
/* 给父容器设置flex布局 */
display: flex;
width: 800px;
height: 300px;
background-color: red;
/* 默认值为row */
flex-direction: row;
/* 设置主轴排列方式 */
justify-content: space-around;
}
div span {
color: green;
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<div>
<span class="a">1</span>
<span class="b">2</span>
<span class="c">3</span>
<span class="d">4</span>
<span class="e">5</span>
</div>
</body>
多添加了两个span标签 设置了分配剩余空间的属性后 父容器撑不下并不会变大,而是会压缩子元素和剩余空间,首先是会分配剩余空间给新的标签,当剩余空间没有了,会压缩子元素的大小。(居中也是)
如果没有设置分配空间 而是给的margin外边距 则不会压缩剩余空间 会直接改变子元素本身的大小。
div {
/* 给父容器设置flex布局 */
display: flex;
width: 600px;
height: 300px;
background-color: red;
/* 默认值为row */
flex-direction: row;
/* 设置换行 */
flex-wrap: wrap;
}
剩余空间不够则会直接换行,第一行和第二行中间的距离 可以设置下面学到的align-content:flex-start属性消除。
flex-flow属性试direction和wrap属性的结合属性 可以直接设置 flex-flow:row wrap;
侧轴
1.align-items设置侧轴子元素的排列方式(单行使用)
属性值 | 说明 |
---|---|
flex-start | 从上到下 |
flex-end | 从下到上 |
center | 居中 |
stretch | 拉伸(不能设置高度) |
<style>
div {
/* 给父容器设置flex布局 */
display: flex;
width: 600px;
height: 300px;
background-color: red;
/* 默认值为row */
flex-direction: row;
/* 主轴水平居中 */
justify-content: center;
/* 侧轴垂直居中 */
align-items: center;
}
div span {
color: green;
width: 100px;
height: 100px;
background-color: aqua;
margin: 15px;
}
</style>
</head>
<body>
<div>
<span class="a">1</span>
<span class="b">2</span>
<span class="c">3</span>
</div>
</body>
这样就实现了水平垂直居中,以往如果用外边距margin:auto,往往只能做到水平居中,还需要搭配其他的属性。
2.align-content 设置侧轴上的子元素的排列方式(多行)
属性值 | 说明 |
---|---|
flex-start | 在侧轴的头部开始排列 |
flex-end | 排列到侧轴的尾部 |
center | 居中 |
space-around | 平分侧轴剩余空间 |
space-between | 子项在侧轴先分布在两头,再平分剩余空间 |
stretch | 行拉伸以占据剩余空间(不能有高度) |
<style>
div {
/* 给父容器设置flex布局 */
display: flex;
width: 600px;
height: 300px;
background-color: red;
/* 默认值为row */
flex-direction: row;
/* 水平平分 */
justify-content: space-around;
/* 垂直平分 */
align-content: space-around;
/* 换行 */
flex-wrap: wrap;
}
div span {
color: green;
width: 100px;
height: 100px;
margin: 20px;
background-color: aqua;
}
</style>
</head>
<body>
<div>
<span class="a">1</span>
<span class="b">2</span>
<span class="c">3</span>
<span class="a">1</span>
<span class="b">2</span>
<span class="c">3</span>
<span class="b">2</span>
<span class="c">3</span>
</div>
</body>
子容器常见属性
1.flex属性
flex属性定义子项目在分配剩余空间时,自己占的份数。
<style>
div {
/* 给父容器设置flex布局 */
display: flex;
width: 600px;
height: 300px;
background-color: red;
/* 先两端对齐再分配剩余空间 */
justify-content: space-between;
}
.b {
flex: 1;
}
div span {
color: green;
width: 100px;
height: 100px;
border: solid 3px orange;
background-color: aqua;
}
</style>
</head>
<body>
<div>
<span class="a">1</span>
<span class="b">2</span>
<span class="c">3</span>
</div>
设置的两端补齐在平分, 1和3占在两边 2应该在中间然后 2的两边是相同大小的剩余空间,因为给2设置的flex为1,所以中间2就补满了。
<style>
div {
/* 给父容器设置flex布局 */
display: flex;
width: 600px;
height: 300px;
background-color: red;
}
.a {
flex: 3;
}
.b {
flex: 3;
}
.c {
flex: 1;
}
div span {
color: green;
width: 100px;
height: 100px;
border: solid 3px orange;
background-color: aqua;
}
</style>
分成七份,1和2各占三份,3占一份。
2.align-self控制单个子元素侧轴的排列方式
设置单个子元素的排列方式会覆盖align-items
<style>
div {
/* 给父容器设置flex布局 */
display: flex;
width: 600px;
height: 300px;
background-color: red;
align-items: flex-end;
}
.a {
flex: 3;
align-self: flex-start;
}
.b {
flex: 3;
}
.c {
flex: 1;
}
div span {
color: green;
width: 100px;
height: 100px;
border: solid 3px orange;
background-color: aqua;
}
</style>
给第一个span单独设置了start另外两个是end
3.order修改标签的排列顺序
<style>
div {
/* 给父容器设置flex布局 */
display: flex;
width: 600px;
height: 300px;
background-color: red;
align-items: flex-end;
}
.a {
flex: 3;
align-self: flex-start;
}
.b {
flex: 3;
}
.c {
flex: 1;
order: -1;
}
div span {
color: green;
width: 100px;
height: 100px;
border: solid 3px orange;
background-color: aqua;
}
</style>
order默认为0,第三个span标签order设置为-1,变成了最小的,所以变成了第一个,此属性可以帮助我们不修改标签的位置来改变页面元素。
总结
常见父项属性
flex-direction
:设置主轴的方向justify-content
:设置主轴上的子元素排列方式flex-wrap
:设置子元素是否换行align-content
:设置侧轴上的子元素的排列方式(多行)align-items
:设置侧轴上的子元素排列方式(单行)flex-flow
:复合属性,相当于同时设置了 flex-direction 和 flex-wrap
flex布局子项常见属性
- flex 子项目占的份数
- align-self 控制子项自己在侧轴的排列方式
- order 属性定义子项的排列顺序(前后顺序)