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

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

在上一篇kano个人博客我们讲到了flex布局策略3个属性的实例教程,而其实际应用的属性还有很多,今天这篇博文kano再来为大家讲解几种flex页面布局属性。序号则沿用第一篇的序号做以衔接。

前端flex布局

4. flex-direction

值:row|row-reverse|column|column-reverse

默认:row

说明:定义flex容器主轴的方向

 

row  默认值,横向从左到右

row-reverse  横向从右到左

column  纵向从上到下(有一点像块元素的默认布局)

column-reverse  纵向从下到上

 

举两个例子:

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

flex-direction

可以看到元素从右边开始了

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

flex-direction

从上到下

5. align-content

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

默认:stretch

说明:当容器的侧轴还有剩余空间时,用以调整子元素的对齐方式,只对多行伸缩容器有效,与调整元素在主轴上对齐方式的justify-content(后面会讲)非常类似。

 

下面我们分别介绍各个属性值

flex-start:各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界,之后的每一行都紧靠住前面一行。

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

align-content

我们给了父元素一个高度,可以看到子元素很正常的从左到右排列,而行的方向是从上到下

 

flex-end: 各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界,之后的每一行都紧靠住前面一行。

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

flex-end

整体挪到了底部

 

center:各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐,保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。(如果剩下的空间是负数,则各行会向两个方向溢出的相等距离。)

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

center

整体居中

整体居中

当元素超出父元素的高度时依然整体居中,上下溢出同样的距离

 

space-between:各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行,该值等效于'flex-start'。在其它情况下,第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界,最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界,剩余的行则按一定方式在弹性盒窗口中排列,以保持两两之间的空间相等。

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

space-between

剩余空间平均分布

space-around:各行在弹性盒容器中平均分布,两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行,该值等效于'center'。在其它情况下,各行会按一定方式在弹性盒容器中排列,以保持两两之间的空间相等,同时第一行前面及最后一行后面的空间是其他空间的一半。

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

space-around

剩余空间平均分配,两头的空间是其余空间的一半

 

stretch(默认情况):各行将会伸展以占用剩余的空间。如果剩余的空间是负数,该值等效于'flex-start'。在其它情况下,剩余空间被所有行平分,以扩大它们的侧轴尺寸。

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

stretch

每行的元素都伸展了相同的高度

关于stretch有一个特殊的情况,假如我们给div3设一个height: 100px的话,你会发现一个奇葩的现象

stretch

div3的高度长到了100,而同一行3个未设高度的元素反而长的更多,这是什么原理?实际上是这样:默认情况下同一行的元素会保持和行内最高的元素同样的高度,为div3设了高度100px之后同一行的其他元素的高度也涨到了100px,而在stretch的作用下,其他的元素又伸展了一段高度,而div3的高度被写死不会增高,于是就出现了上面的现象。

 

※ 上面有图中你可能会看到一些本应该元素贴住父元素底部的地方留出了一段空白,那其实是div本身的margin-bottom造成的,元素实际是紧贴上的。

 

以上就是align-content的全部属性值介绍,描述摘抄自css手册,因为用自己的话感觉无法清楚的表达出来,手册的解释稍显晦涩,但是相信大家通过图例还是能很好的理解的。(篇幅原因,请转flex布局初探(三),下一篇kano个人博客中,我们会介绍flex-wrapalign-itemsalign-selfjustify-contentorder五个属性)。

发表评论

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

Go