资讯专栏INFORMATION COLUMN

深入解析CSS FlexBox

tinysun1234 / 1732人阅读

摘要:如果用动画来表现,可以看出拉长的时候红色会变得比蓝色长,但压缩的时候却是蓝色变得比红色长,如此一来就更能体会在响应式设计里头的关键角色。

Flexbox是一个CSS3的盒子模型(box model),顾名思义它就是一个灵活的盒子(Flexible Box)。

Flexbox模型概念

第一步要来看Flexbox的盒子模型,根据W3C文章所描述,flex的盒子模型如下图所呈现,与一般的盒子模型不同的地方,在于Flexbox的盒子模型具有水平的起点与终点(main start、main end),垂直的起点与终点(cross start、cross end),水平轴与垂直轴(main axis、cross axis),然后元素具有水平尺寸与垂直尺寸(main size、cross size),这些都是相当重要的布局概念。

Flexbox属性介绍

再来我们先看看Flexbox有哪些属性:

display

flex-direction

justify-content

align-items

align-self

align-content

flex-wrap

order

flex

display

display是我们熟知的CSS属性,对于Flexbox来说,多了有两种方式可以设定,预设为“flex”,其布局方式与block几乎类似,都会强迫换行,但设定display:flex的子元素却具备了更多弹性的设定,此外另外一种方式则是“inline-flex”,和inline-block也是几乎雷同,意义上都是一个display:flex的元素外面包覆display:inline的属性,在后方的元素不会换行。

CSS:

.flex,
.inline-flex{
    width:100px;
    height:50px;
    border:1px solid #000;
}
.flex{
    display:flex;
}
.inline-flex{
    display:inline-flex;
}

flex-direction

flex-direction表示Flexbox内容元素的“排列方向”,分别有下列四种。

row:预设值,由左到右,从上到下

row-reverse:与row相反

column:从上到下,再由左到右

column-reverse:与column相反

CSS:

.flex-row{
    flex-direction:row;
}
.flex-row-reverse{
    flex-direction:row-reverse;
}
.flex-column{
    flex-direction:column;
}
.flex-column-reverse{
    flex-direction:column-reverse;
} 

justify-content

justify-content决定了内容元素与整个Flexbox的“水平对齐”位置,回想一下最上面讲的Flexbox盒子模型,具有main start与main end左右两个端点,justify-content就是按照这个方式做设定,而其中的设定值总共有下列五个。

flex-start:预设值,对齐最左边的main start

flex-end:对齐最左边的main end

center:水平居中

space-between:平均分配内容元素,左右元素将会与main start和main end贴齐

space-around:平均分配内容元素,间距也是平均分配

CSS:

.flex-start{
    justify-content:flex-start;
}
.flex-end{
    justify-content:flex-end;
}
.center{
    justify-content:center;
}
.space-between{
    justify-content:space-between;
}
.space-around{
    justify-content:space-around;
}

align-items

align-items刚好和justify-content相反,align-items决定了内容元素与整个Flexbox的“垂直对齐”位置,再回想一下最上面讲的Flexbox盒子模型,具有cross start与cross end左右两个端点,align-items与align-self就是按照这个方式做设定,设定值总共有下列五个。

flex-start:对齐最上面的cross start

flex-end:对齐最下面的cross end

center:垂直居中

stretch:预设值,将内容元素全部撑开至Flexbox的高度

baseline:以所有内容元素的基线作为对齐标准

CSS:

.flex-start{
    align-items:flex-start;
}
.flex-end{
    align-items:flex-end;
}
.center{
    align-items:center;
}
.stretch{
    align-items:stretch;
}
.baseline{
    align-items:baseline;
}
.flex-item{
    width:60px;
    text-align:center;
}
.item1{
    font-size:20px;
    line-height: 60px;
    background:#c00;
}
.item2{
    line-height: 30px;
    background:#095;
}
.item3{
    font-size:30px;
    line-height: 100px;
    background:#059;
}

align-self

align-self的设定与align-items相同,但目的不同,align-self的作用在于覆盖已经套用align-items的属性,如果照我们以前所写,因为align-items是针对所有子元素,所以必须要用align-self来进行覆盖,我们直接用上一个示例来修改就很清楚了。

CSS:

.item2{
    align-self:baseline;
    line-height: 30px;
    background:#095;
}

align-content

刚刚谈到的align-items是针对内容为单行的元素进行处理,如果遇到多行的元素,就要使用align-content这个属性,这个属性总共有六个设定值。

flex-start:对齐最上面的cross start

flex-end:对齐最下面的cross end

center:垂直居中

space-between:将第一行与最后一行分别对齐最上方与最下方

space-around:每行平均分配间距

stretch:预设值,内容元素全部撑开

CSS:

.flex-start,
.flex-end,
.center,
.space-between,    
.space-around,    
.stretch{
    display:inline-flex;
    flex-wrap:wrap;
    width:180px;
    height:160px;
    margin:5px 5px 40px;
    border:1px solid #000;
    vertical-align: top;
}
.flex-start{
    align-content:flex-start;
}
.flex-end{
    align-content:flex-end;
}
.center{
    align-content:center;
}
.space-between{
    align-content:space-between;
}
.space-around{
    align-content:space-around;
}
.stretch{
    align-content:stretch;
}
.align-content>div{
    padding:15px;
    margin:2px;
    background:#666;
}

flex-wrap

在刚刚的示例看到一个flex-wrap的属性,这个属性负责的是让内容的元素换行,因为当我们把父元素的display设定为flex或inline-flex的时候,子元素就是以单行的方式,弹性撑满父元素,所以就要利用flex-wrap来换行,共有三个设定值。

nowrap:预设值,单行

wrap:多行

wrap-reverse:多行,但内容元素反转

CSS:

.nowrap,
.wrap,
.wrap-reverse{
    display:inline-flex;
    flex-wrap:wrap;
    width:180px;
    height:80px;
    margin:5px 5px 40px;
    border:1px solid #000;
    vertical-align: top;
}
.column{
    flex-direction:column;
    width:120px;
    height:180px;
}
.nowrap{
    flex-wrap:nowrap;
}
.wrap{
    flex-wrap:wrap;
}
.wrap-reverse{
    flex-wrap:wrap-reverse;
}
.align-content div{
    width:30px;
    height:30px;
    margin:5px;
    background:#069;
}
.column div{
    background:#f50;
}

order

刚刚在flex-wrap的属性里头看到了可以把元素反转,order这个属性更是可以直接指定一个数字,就可以由小到大的排列顺序。

.item{
      width:50px;
      height:60px;
      text-align: center;
      line-height: 50px;
  }
  .order1{
      order:1;
      background:#c00;
  }
  .order2{
      order:2;
      background:#069;
  }
  .order3{
      order:3;
      background:#095;
  }
  .order4{
      order:4;
      background:#f50;
  }
  .order5{
      order:5;
      background:#777;
  }
  .order6{
      order:6;
      background:#077;
  }

flex

好酒沉瓮底,有耐心看到下面的才会看到重点喔哈哈!flex应该是Flexbox里头最重要的属性了,而flex其实是由三个属性组合而成,依照先后顺序分别是“flex-grow”、“flex-shrink”和“flex-basis”,如果flex只填了一个数值(无单位),那么预设就是以flex-grow的方式呈现,至于三个属性的解释如下:

flex-grow:数字,无单位,当子元素的flex-basis长度“小”于它自己在父元素分配到的长度,按照数字做相对应的“伸展”比例分配,预设值为0,不会进行弹性变化,不可为负值,设为1则会进行弹性变化。

flex-shrink:数字,无单位,当子元素的flex-basis长度“大”于它自己在父元素分配到的长度,按照数字做相对应的“压缩”比例分配,预设值为1,设为0的话不会进行弹性变化,不可为负值。

flex-basis:子元素的基本大小,作为父元素的大小比较基准,预设值为0,也因为预设值为0,所以没有设定此属性的时候,会以直接采用flex-grow属性,flex-basis也可以设为auto,如果设为auto,就表示子元素以自己的基本大小为单位。

三个属性可以分开设定,也可以合在一起用一个flex统一设定,下面的例子展现出同一个Flexbox,在不同的宽度,子元素会有不同大小的呈现。

HTML:

1
2
1
2

CSS:

.flex{
    display:inline-flex;
    height:60px;
    margin:5px 5px 40px;
    border:1px solid #000;
    vertical-align: top;
}
.flex-300{
    width:300px;
}
.flex-150{
    width:80px;
}
.item{
    height:60px;
    text-align: center;
    line-height: 50px;
}
.item1{
    flex:1 2 200px;
    background:#c00;
}
.item2{
    flex:2 1 100px;
    background:#069;
}

如果用动画来表现,可以看出拉长的时候红色会变得比蓝色长,但压缩的时候却是蓝色变得比红色长,如此一来就更能体会flex在响应式设计里头的关键角色。

以上就是Flexbox的完整介绍,因为有了这个属性,让在做layout的布局又更加弹性了!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/104209.html

相关文章

  • 深入解析CSS FlexBox

    摘要:如果用动画来表现,可以看出拉长的时候红色会变得比蓝色长,但压缩的时候却是蓝色变得比红色长,如此一来就更能体会在响应式设计里头的关键角色。 Flexbox是一个CSS3的盒子模型(box model),顾名思义它就是一个灵活的盒子(Flexible Box)。 Flexbox模型概念 第一步要来看Flexbox的盒子模型,根据W3C文章所描述,flex的盒子模型如下图所呈现,与一般的盒子...

    gplane 评论0 收藏0
  • 深入解析CSS FlexBox

    摘要:如果用动画来表现,可以看出拉长的时候红色会变得比蓝色长,但压缩的时候却是蓝色变得比红色长,如此一来就更能体会在响应式设计里头的关键角色。 Flexbox是一个CSS3的盒子模型(box model),顾名思义它就是一个灵活的盒子(Flexible Box)。 Flexbox模型概念 第一步要来看Flexbox的盒子模型,根据W3C文章所描述,flex的盒子模型如下图所呈现,与一般的盒子...

    shinezejian 评论0 收藏0
  • CSS及布局

    摘要:经过半年的打磨,正式发布,主要是新增了一些常用组件,并使用命名,为接下来的微信小程序开发做好准备。这两种方式实现的瀑布流式布局均支持首屏和网页窗口大小改变时的列数自适应。主要是对于标准里的布局方式草案中的布局方式进行一些总结。 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看...

    jaysun 评论0 收藏0
  • CSS Conf -《新时代CSS布局》学习总结

    摘要:分享嘉宾简介新时代布局的分享者是新加坡的国际知名专家陈慧晶。陈慧晶老师的分享主题介绍如下布局经常是令前端开发者头痛的一块工作。布局系统在这一小节中,慧晶老师主要分享了跟这新时代布局的三大栋梁。的首个公开工作草案是在发布的,而的则是发布。 作者:陈大鱼头 github: KRISACHAN 记录原因:2019年3月30日在深圳举行了第五届的CSS Conf,鱼头作为一枚CSS新手以及爱好者也...

    番茄西红柿 评论0 收藏0
  • CSS Conf -《新时代CSS布局》学习总结

    摘要:分享嘉宾简介新时代布局的分享者是新加坡的国际知名专家陈慧晶。陈慧晶老师的分享主题介绍如下布局经常是令前端开发者头痛的一块工作。布局系统在这一小节中,慧晶老师主要分享了跟这新时代布局的三大栋梁。的首个公开工作草案是在发布的,而的则是发布。 作者:陈大鱼头 github: KRISACHAN 记录原因:2019年3月30日在深圳举行了第五届的CSS Conf,鱼头作为一枚CSS新手以及爱好者也...

    libxd 评论0 收藏0

发表评论

0条评论

tinysun1234

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<