我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

苏南大叔继续描述flex弹性盒子模型的子元素属性,注意:说明对象以及从容器box,变成了子元素item。一些flex盒子的属性,其实是定义在item身上的。那么,这些属性都有什么呢?是什么控制了flex盒子内部的顺序及位置呢?

苏南大叔:网页css布局,flex弹性盒子,子元素如何控制顺序位置? - flex-item-order
网页css布局,flex弹性盒子,子元素如何控制顺序位置?(图3-1)

本文测试环境:macchrome@75.0.3770.100。本文主要讨论子元素的顺序及位置的问题。

order

order属性,调整子元素的顺序。苏南大叔理解着,就是破坏原有的左右排列(row)或者上下排列(column)的顺序的属性。下面的是测试范例:

<div class="box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
.box {
    width: 400px;
    height: 150px;
    border: 1px solid #c3c3c3;
    display: flex;
    flex-direction:column;
}
.item {
    width: 70px;
    height: 36px;
    line-height:36px;
    vertical-align:center;
    color:white;
    text-align:center;
}
.item:nth-child(1){
    background:red;
    order:4;
}
.item:nth-child(2){
    background:blue;
}
.item:nth-child(3){
    background:pink;
    order:1;
}
.item:nth-child(4){
    background:gray;
    order:-1;
}

默认的order,应该是0。因为order设置为负数的,排序在没设置order的元素之前。order越小,越靠近flex-start的位置。

苏南大叔:网页css布局,flex弹性盒子,子元素如何控制顺序位置? - demo-flex-item-order
网页css布局,flex弹性盒子,子元素如何控制顺序位置?(图3-2)

align-self

子元素itemalign-self属性,容器boxalign-items的属性,基本上是类似的。都是用于设置子元素在交叉轴(不一定是纵向哦)上的对齐方式的。

align-self可以覆盖align-items属性,可以取的值比align-items,多一个autoalign-self默认值也是autoalign-items的默认值是stretch

取值说明
flex-start交叉轴的开头
flex-end交叉轴的结尾
center交叉轴的中心
stretch元素被拉伸以适应容器
baseline元素位于容器的基线上
auto继承align-items默认

下面的是测试范例:

<div class="box">
    <div class="item">1</div>
    <div class="item">2</div>  
    <div class="item">3</div>
</div>
.box {
    width: 220px;
    height: 300px;
    border: 1px solid black;
    display: flex;
    align-items: flex-start;
}
.item {
    width:100px;
    height:100px;
    line-height:100px;
    vertical-align:center;
    background:red;
    text-align:center;
    color:white;
}
.item:nth-child(2) {
    align-self: center;
}

苏南大叔:网页css布局,flex弹性盒子,子元素如何控制顺序位置? - demo-flex-item-align
网页css布局,flex弹性盒子,子元素如何控制顺序位置?(图3-3)

总结

这两个属性看起来是非常拉风的,不过,苏南大叔就想:似乎没有啥卵用... 更多flex布局相关经验文章,请点击苏南大叔的博客:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   css    flex