【老生常谈👴】系列好久都没更新啦,这次终于准备在这个系列上加点内容了,哈哈!而这次给大家带来的便是 flex布局,这个已经在现在前端开发中经常使用到的属性,虽然是一个“老东西”了。但是不妨碍它的重要性,因此这篇文章就准备聊聊关于它的事儿,废话不多说,开搞!
什么是flex布局
flex是 flexible 的缩写,翻译过来就是 弹性布局,从它的名称上我们就知道它是一种高度灵活的布局方式,通过它我们可以很轻易的完成较为复杂的布局,例如水平垂直居中等
任何元素都可以使用flex布局,块级元素只需加上display:flex
,行内元素加上display:inline-flex
,这时该元素就称为了 容器,需要注意的是flex布局中,子元素的float、clear将失效,并且不存在块级和行内元素之分,都统称为 flex-item
本文将从 容器 和 flex-item 两方面去讲解,go,go,go!
容器
容器中存在两条轴,一条 主轴,方向为 从左到右,另一条为 交叉轴,与主轴 垂直交叉,方向为 从上到下
对于flex容器,它有如下属性:
- flex-direction:决定主轴的方向,它有如下值
- row(默认值):主轴为水平方向,起点在左端
- row-reverse:主轴为水平方向,起点在右端
- column:主轴为垂直方向,起点在上沿
- column-reverse:主轴为垂直方向,起点在下沿。
- flex-wrap: 用来指定flex-item的 换行规则,默认不换行,它有如下值
- nowrap: 不换行,默认行为
- wrap: 换行,第一行在上方
- wrap-reverse: 换行,第一行在下方
- flex-flow:flex-direction 属性和 flex-wrap 属性的简写形式,默认值为row nowrap
- justify-content: 定义了flex-item在主轴上的排列方式,它有如下值
- flex-start(默认值):左对齐
- flex-end:右对齐
- center: 居中
- space-between:两端对齐
- space-around:每个项目两侧的间隔相等
- align-items:定义了flex-item在交叉轴上的排列方式,它有如下值
- flex-start:交叉轴的起点对齐
- flex-end:交叉轴的终点对齐
- center:交叉轴的中点对齐
- baseline: flex-item的第一行文字的基线对齐
- stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度
flex-item
它包含如下属性
- order:项目的排列顺序,数值越小,排列越靠前,默认为0,可以用于自定义flex-item的位置
- flex-grow:定义项目的放大比例,默认为 0,即如果存在剩余空间,也不放大
- flex-shrink:定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小
- flex-basis:定义了在分配多余空间之前,项目占据的主轴空间,默认值为 auto,即项目的本来大小
- flex:flex-grow flex-shrink 和 flex-basis 的简写,默认值为 0 1 auto,后两个属性可选
- align-self:允许flex-item有与其他flex-item不一样的对齐方式,可覆盖容器的 align-items属性,默认值为 auto,表示继承容器的 align-items 属性,如果没有容器,则等同于 stretch,可以取的值与 align-items 完全一致
结语
在前端的蛮荒年代,我们多用position,float之类的属性来构建页面,但经历过的人都知道那是一段艰难的岁月,但随着css不断规范化,涌现出的新规范让我们能越来越轻松地搭建页面,我想这就是技术的魅力吧,好啦,就写到这啦,over!