苏南大叔继续描述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布局相关经验文章,请点击苏南大叔的博客:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

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

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

本站的忠实读者小伙伴,正在阅读下面这些文章: