Web前端开发教程之flex布局属性(三)

kano个人技术博客 web前端开发 1,780 次浏览 没有评论

看过kano技术个人博客技术教程的朋友肯定都知道,之前已经分享过两篇关于css的flex布局属性讲解了,落下的朋友可以移步去看下前面的教程:flex布局(一)、flex布局(二)。今天则是最后一篇的5个属性实例介绍了,序号则沿用第二篇的。

前端flex布局

6. flex-wrap

值:nowrap|wrap|wrap-reverse

默认:nowrap

说明:设置flex容器是单行还是多行

默认情况下,flex下的子元素都会排在一行上(按主轴方向),flex-wrap可以让元素多行排列:

wrap

.wrap {
  width: 400px;
  display: flex;
  border: 1px solid #ccc;
  flex-wrap: wrap;
}

.wrap div {
  padding: 15px;
  color: white;
  box-sizing: border-box;
  position: relative;
  margin-bottom: 10px;
}

.wrap div:nth-child(3n + 1) {
  background: red;
}

.wrap div:nth-child(3n + 2) {
  background: green;
}

.wrap div:nth-child(3n + 3) {
  background: blue;
}
 <div class="wrap">
  <div>1.哈哈哈</div>
  <div>2.哈哈哈</div>
  <div>3.哈哈哈</div>
  <div>4.哈哈哈</div>
  <div>5.哈哈哈</div>
  <div>6.哈哈哈</div>
  <div>7.哈哈哈</div>
  <div>8.哈哈哈</div>
  <div>9.哈哈哈</div>
  <div>10.哈哈哈</div>
  <div>11.哈哈哈</div>
  <div>12.哈哈哈</div>
  <div>13.哈哈哈</div>
  <div>14.哈哈哈</div>
  <div>15.哈哈哈</div>
  <div>16.哈哈哈</div>
  <div>17.哈哈哈</div>
</div>

flex布局

 wrap-reverse

.wrap {
  width: 400px;
  display: flex;
  border: 1px solid #ccc;
  flex-wrap: wrap-reverse;
}

flex布局

每一行的方向还是由flex-direction来决定的,在多行flex布局中,flex-grow和flex-shrink是根据元素所在行来起作用的,如:

.wrap div:nth-child(3n + 1) {
  background: red;
}

.wrap div:nth-child(3n + 2) {
  background: green;
}

.wrap div:nth-child(3n + 3) {
  background: blue;
  flex-grow: 1;
}

flex布局

更具体一点的说,在多行flex布局中,首先考虑元素在没有flex-grow和flex-shrink时的基准宽度,如果某一行的剩余宽度不够放下一个元素时则会换行,然后再以行为单位考虑元素的伸缩。因为元素在宽度不够时会换行,所以flex-shrink只在单个元素宽度超过父元素时才会起效了,比如我把div8的宽度设为800:

flex布局

所呈现的效果是div8占据了整行,但是并未超出父元素的宽度(这里没有设置flex-shrink的值,也就是默认为1)

7. align-items

值:flex-start|flex-end|center|baseline|stretch

默认:stretch

说明:设置flex子项在容器中的对齐方式(侧轴)

设置同一行元素的对齐方式

首先我们把父元素的align-content设为flex-start(这样不会影响子元素高度)

flex布局

stretch(默认值):元素在未设置高度的情况下默认会拉伸到和所在行最高元素相同的高度

将div3的高度设为100

.wrap {
  width: 400px;
  display: flex;
  border: 4px solid #ccc;
  flex-wrap: wrap;
  height: 400px;
  align-content: flex-start;
  align-items: stretch;
}

flex布局

如图所示,同一行的元素都涨到了100px

※ 下面都是修改align-items属性,就不一一贴代码了

flex-start:顶部对齐

flex布局

 flex-end:底部对齐(同一行最高元素紧贴顶部,其余元素和它的底部对齐)

flex-end

center:中线对齐

center

 baseline  基线对齐,同一行元素的首行基线在同一行上

baseline

如果不知道基线是什么可以搜一下,相关资料还是很多的

※ 上面是用多行flex举的例子,不过align-items在单行和多行中都可以使用

8. align-self

值:auto|flex-start|flex-end|center|baseline|stretch

默认:stretch

说明:单独指定子项在侧轴上的对齐方式

和align-items作用相同,只不过align-items是写在容器上,对所有子元素生效;而align-self是写在子元素上,只对某个子元素生效的

flex布局

如上图,在align-items: flex-start 的容器中,div2写了一个align-self: flex-end;

9. justify-content

值:flex-start|flex-end|center|space-between|space-around

默认:flex-start

说明:定义在主轴上还有剩余空间时,元素的对齐方式

flex-start:左对齐

.wrap {
  width: 400px;
  height: 200px;
  display: flex;
  border: 1px solid #ccc;
  flex-wrap: wrap;
  justify-content: flex-start;
}

flex-start

※ 下面都是修改justify-content属性,就不一一贴代码了

flex-end:右对齐

flex-end

 

center:居中

center

 

space-between:空间平均分配

space-between

 

space-around:空间平均分配,左右空间为元素间空间的一半

space-between 

10. order

值:<数字>

默认:0

说明:设置子元素出现的顺序,默认值为0(必须是整数,可以为负数),小的在前,大的在后。

<div class="wrap">
  <div>
    order: 3
  </div>
  <div>
    order: 1
  </div>
  <div>
    order: 2
  </div>
</div>
.wrap div:nth-child(3n + 1) {
  background: red;
  order: 3;
}

.wrap div:nth-child(3n + 2) {
  background: green;
  order: 1;
}

.wrap div:nth-child(3n + 3) {
  background: blue;
  order: 2;
}

order

可以看到order改变了元素的排序,很好理解

至此,kano个人博客的flex的属性已经全部说明完毕,是不是觉得也不是那么的难理解?希望对大家学习flex布局有所帮助。

 

※ 上面的属性说明中有的地方出现了“顶部对齐”“左对齐”这类的描述,这实际都是以主轴方向为flex-direction: row 的前提下说的,为了方便理解。如果主轴是其他方向呢?这个作为思考题给大家留个作业吧。

 

附:

1. 复合属性

flex中有两个方面简写的复合属性,如同font、background一样:{

flex: none|<flex-grow> <flex-shrink>? || <flex-basis>

flex-flow: <flex-direction>||<flex-wrap>

}

2. 作用于子元素还是容器

flex属性有一半是作用于容器,一半作用于子元素的,用错的地方可是不会生效的哦:{

作用于容器的属性: flex-direction, flex-wrap, align-content, align-items, justify-content

作用于子元素的属性: flex-grow, flex-shrink, flex-basis, align-self, order

}

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Go