![cover](https://img-blog.csdnimg.cn/b2fce104ce444494b79174776e32836a.png#pic_center)
Flex布局
前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例可供参考一、Flex布局的介绍Flex布局(Flexible布局,弹性布局)目前特别在移动端用的最多,目前PC端也使用越来越多了。将一个元素设置为display:flex;flex元素会变成一个fl
最近,在复习flex的内容,看了coderwhy老师的flex讲解豁然开朗,于是,就将它整理成一个笔记来记录学习成果,方便日后查阅。
一、Flex布局的介绍
Flex布局(Flexible布局,弹性布局),一维布局模型。目前特别在移动端用的最多,目前PC端也使用越来越多了。
将一个元素设置为display:flex;flex元素会变成一个flex容器。
- 开启了Flex布局的元素叫做flex container,即Flex容器;
- flex container里面的直接子元素叫做flex items,即Flex项目。
一个flex容器默认存在两个轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。
主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。
项目默认沿主轴排列,通过设置,可以让项目按照cross轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
二、Flex的属性
这里有一个设置为Flex布局的案例,代码如下所示:
<!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>
/* Flex容器 */
.container {
width: 500px;
height: 400px;
background-color: orange;
display: flex;
}
/* Flex项目 */
.item {
width: 100px;
height: 100px;
text-align: center;
color: white;
line-height: 100px;
}
.item1 {
background-color: red;
}
.item2 {
background-color: #0f0;
}
.item3 {
background-color: rgb(0, 38, 255);
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">item1</div>
<div class="item item2">item2</div>
<div class="item item3">item3</div>
</div>
</body>
</html>
效果如下所示:
1.应用在flex contianer 上的属性(Flex容器属性)
- flex-direction 决定主轴的方向
- justify-content 决定flex items在主轴上的对齐方式
- align-items 决定flex items在交叉轴上的对齐方式
- flex-wrap 决定了flex container是单行还是多行
- flex-flow flex-direction与flex-wrap的缩写属性
- align-content 决定了多行flex items 在cross axis交叉轴上的对齐方式
1.flex-direction属性:决定主轴的方向(即项目的排列方向)。它有4个取值:
row(默认值)、row-reverse、column、column-reverse。
设置 flex-direction: row;
设置flex-direction: row-reverse;
设置flex-direction: column;
设置flex-direction: column-reverse;
2.justify-content属性决定了flex items在主轴main axis上的对齐方式。(水平对齐的方式)
flex-start(默认值):左对齐,与main start 对齐
flex-end:右对齐
center: 居中
space-between:两端对齐,项目之间的间隔都相等。
Space-evenly:flex items之间的间距相等,flex items与main start、main end之间的距离等于flex items之间的距离。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
它可能取5个值,具体对齐方式与轴的方向有关,下面假设主轴为从左到右。
/* Flex容器 */
.container {
width: 500px;
height: 400px;
background-color: orange;
/* 开启Flex布局 */
display: flex;
/*
flex-direction 绝对主轴的方向
row:默认值,主轴为水平方向,起点在左端。
*/
flex-direction: row;
justify-content: flex-start;
/* justify-content: flex-end; */
/* justify-content: center; */
/* justify-content: space-between; */
/* justify-content: space-around; */
}
/* Flex项目 */
.item {
width: 100px;
height: 100px;
text-align: center;
color: white;
line-height: 100px;
}
① flex-start默认值:左对齐 设置 justify-content: flex-start;
② flex-end:右对齐 设置 justify-content: flex-end;
③ Center:居中对齐 设置 justify-content: center;
④ Space-between:两端对齐,项目之间的间隔都相等。 设置 justify-content: space-between;
⑤ Space-evenly:flex items之间的间距相等,flex items与main start、main end之间的距离等于flex items之间的距离。 设置 justify-content: space-evenly;
⑥ Space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。 设置 justify-content: space-around;
flex items之间的间距相等,flex items与main start、main end之间的距离是flex items之间距离的一半。
3. align-items 项目在交叉轴的对齐方式
- align-items:flex-start; flex项目在交叉轴开始位置展示(起点对齐),不再适应整个容器的高度了
- align-items:flex-end; flex项目在交叉轴结束位置展示(终点对齐)
- align-items:flex-center; flex项目在交叉轴居中展示(中点对齐) 常用
- align-items:stretch;(默认值) 如果项目未设置高度或设为auto,将占满整个容器的高度
将3个flex items的高度设置成不一样的;在有高度的情况下,默认是顶部对齐(交叉轴的起点)的。align-items: flex-start;
/* Flex容器 */
.container {
width: 500px;
height: 400px;
background-color: orange;
/* 开启Flex布局 */
display: flex;
align-items: flex-start;
}
/* Flex项目 */
.item {
width: 100px;
height: 100px;
text-align: center;
color: white;
/* line-height: 100px; */
}
.item1 {
background-color: red;
height: 60px;
}
.item2 {
background-color: #0f0;
height: 150px;
}
.item3 {
background-color: rgb(0, 38, 255);
height: 120px;
}
有高度的情况下,flex-end是底部对齐(交叉轴的终点)对齐;align-items: flex-end;
有高度的情况下,center是中心点对齐;align-items: center;
有高度的情况下,baseline是flex items的第一行文字的基线对齐;align-items: baseline;
4. flex-wrap 决定了flex container是单行还是多行。
- nowrap(默认):单行,不换行;
- wrap:多行,第一行在上方。
- wrap-verse:多行,第一行在下方。
注释掉之前添加的高度,将flex container宽度改成 550px,并添加flex items,一共是9个。现在再看,这几个是沿着主轴依次进行排布的。
<!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>
/* Flex容器 */
.container {
width: 550px;
height: 400px;
background-color: orange;
/* 开启Flex布局 */
display: flex;
/* 不换行,默认 */
/* flex-wrap: nowrap; */
/* 换行 */
/* flex-wrap: wrap; */
}
/* Flex项目 */
.item {
width: 100px;
height: 100px;
text-align: center;
color: white;
/* line-height: 100px; */
}
.item1 {
background-color: red;
/* height: 60px; */
}
.item2 {
background-color: #0f0;
/* height: 150px; */
}
.item3 {
background-color: rgb(0, 38, 255);
/* height: 120px; */
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">item1</div>
<div class="item item2">item2</div>
<div class="item item3">item3</div>
<div class="item item1">item4</div>
<div class="item item2">item5</div>
<div class="item item3">item6</div>
<div class="item item1">item7</div>
<div class="item item2">item8</div>
<div class="item item3">item9</div>
</div>
</body>
</html>
① 默认是收缩的,所有的flex items 都会在同一行显示(收缩显示)。flex-wrap: nowrap;
② Wrap:换行。flex-wrap: wrap;
③ Wrap-reverse(用的很少!) flex-wrap: wrap-reverse;
5. flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
6. align-content
align-content决定了多行flex items 在cross axis交叉轴上的对齐方式,用法与justify-content类似。如果项目只有一根轴线,该属性不起作用。
stretch用得很少,了解即可。
flex-start:从交叉轴上依次排布多行,两行会紧挨着。align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
2. 应用在flex items 上的属性(Flex项目属性)
- order
- align-self
- flex-grow
- flex-shrink
- flex-basis
- flex
- order:定义项目的排列顺序,默认为0。可以设置任意整数(正整数、负整数、0),数值越小越靠前。
.item1 {
background-color: #f00;
order: 10;
}
.item2 {
background-color: #0f0;
order: 6;
}
.item3 {
background-color: #00f;
order: 100;
}
可以看到item2在最前面,因为它的order数值最小。
2.align-self:flex项目的对齐方式(auto|flex-start|flex-end|center|baseline|stretch) 默认值为auto,表示继承父元素的align-items属性。
它是给flex项目设置的,允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。
- auto为默认属性,表示继承父元素的align-items属性。
<style>
/* Flex容器 */
.container {
width: 550px;
/* width: 600px; */
height: 400px;
background-color: orange;
/* 开启Flex布局 */
display: flex;
flex-direction: row;
/* 项目在交叉轴的对齐方式为center居中 */
align-items: center;
}
/* Flex项目 */
.item {
width: 100px;
/* height: 100px; */
text-align: center;
color: white;
/* auto为默认属性,表示继承父元素的align-items属性 */
align-self: auto;
}
.item1 {
background-color: red;
height: 60px;
}
.item2 {
background-color: #0f0;
height: 150px;
}
.item3 {
background-color: rgb(0, 38, 255);
height: 120px;
}
</style>
这里,父级的align-items是center的,设置为auto
- flex-start:顶部对齐(交叉轴的起点)对齐。
设置item2为flex-start,item2就会顶部对齐。
- flex-end:底部对齐(交叉轴的终点)对齐。
- center是中心点对齐。
- baseline是flex items的第一行文字的基线对齐;
- strech:不给flex items设置高度,那么flex items将会占满整个容器的高度,在交叉轴对元素进行拉伸了。
这里不对item2设置高度,就会进行拉伸。
3.flex-grow:属性定义项目的放大比例,默认为0,空间充足,等比例补全,等分剩余空间。 (可以设置flex项目在flex布局中的占比) 常用。
flex容器的总宽度为600px,每个flex项目的宽度是100px。 这里,设置所有项目的flex-grow属性都为1,即三个flex项目的比例是1:1:1,那么它们将等分剩余空间(如果有的话)。
总宽度会减去三个元素本身的宽度(前提:宽度足够的情况下),600-3100=300;剩下的宽度就是300,那么300就会根据我们设置的1:1:1的比例去分,也就是每个flex项目分到100px。那么最后,它们的宽度就是100+100=200px。
这里,设置三个项目的flex-grow的比例是1:2:1,那么它们将等分剩余空间(如果有的话)。
总宽度会减去三个元素本身的宽度,600-3100=300;剩下的宽度就是300,那么300就会根据我们设置的1:2:1的比例去分,也就是第一个元素分到75px,第二个元素分到150px,第三个元素分到75px。那么最后,第一个和第三个元素100+75=175px,第二个元素100+150=250px。
4.flex-shrink:定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。 不常用 。
5.flex-basis:主轴排列为宽度,交叉轴排列为宽度,设置px,默认值是auto。(就是设置宽度)
根据它作为可用空间留下的空间来定义该项目的大小 不常用。
flex:综合上面三个样式。默认值为0 1 auto,设三个值,分别是flex-grow, flex-shrink, flex-basis,由于后面两个不常用,所以,常用的写法为:flex:1。
flex属性的简写值:flex-grow, flex-shrink, flex-basis。
面试题分享
问题1:如何实现左侧固定宽度,右侧自适应的两栏布局?
1.利用flex布局:
将右侧设置flex:1即可。
2.利用grid布局:
还是能实现左侧固定,右侧自适应的两栏布局。
问题2:如何实现左右固定宽度,中间自适应的三栏布局?
1.利用flex布局:
2.利用grid布局:
问题3:如何实现将一个flex项目放在flex容器的右下角?
设置主轴和交叉轴均为flex-end即可,代码如下:
效果如下所示:
![Logo](https://devpress.csdnimg.cn/79de2bf0b7994defa4242ef90d5513fa.jpg)
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)