布局"/>
聊一聊我知道的flex布局
flex 布局的基本概念
MDN上是这样定义flex布局的:Flexible Box 模型,通常被称为 flexbox,是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 flexbox 的主要特性,更多的细节将在别的文档中探索。
我们说 flexbox 是一种一维的布局,是因为一个 flexbox 一次只能处理一个维度上的元素布局,一行或者一列。作为对比的是另外一个二维布局 CSS Grid Layout,可以同时处理行和列上的布局。
现代浏览器几乎都支持flex布局,目前前端使用最多的应该也是flex和grid两种布局方式了,下面会记录一下我常用的一些布局属性和技巧。
使用flex
布局时,浮动布局会失效。想要某个元素靠右可以使用margin-left:auto;
flex主轴main-axis
和交叉轴cross-axis
- 开启
flex
布局:display:flex | inline-flex
,在如div
此类元素使用flex
,span
这类元素使用inline-flex
.flex-box{display: flex;border: 1px solid #999;width: 300px;height: 200px;margin: auto;
}
.flex-box > div{border:1px solid #999;width: 50px;height: 50px;background-color: bisque;
}
<div class="flex-box"><div>1</div><div>2</div><div>3</div>
</div>
在开启flex
布局前,div
是块级元素,会独占一行
开启之后
开启flex
布局后,我们所有操作除了控制容器其他全部都是作用于main-axis
和cross-axis
两根轴上。
操作父容器
flex-direction
控制主轴和交叉轴方向
- row (默认值)
- column
- row-reverse
- column-reverse
在 flex 容器中添加 flex-direction
属性可以让我们更改 flex 元素的排列方向。设置 flex-direction: row-reverse
可以让元素沿着行的方向显示,但是起始线和终止线位置会交换。
把 flex 容器的属性 flex-direction
改为 column
,主轴和交叉轴交换,元素沿着列的方向排列显示。改为 column-reverse
,起始线和终止线交换。
justify-content
控制主轴上子元素排列
- flex-start(默认值)
- flex-end
- center
- space-between
- space-around
- space-evenly
flex-start
默认为左对齐,flex-end
右对齐,center
居中对齐,space-between
两端对齐,子元素之间的间距是与边框的两倍,space-around
与space-between
相反,space-evenly
子元素之间的间距都相等,平分所有剩余空间。
align-iterms
控制交叉轴子元素排列
- stretch(默认值)
- flex-start
- flex-end
- center
- baseline
stretch
如果项目未设置高度或设为auto,将占满整个容器的高度。flex-start
交叉轴起点对齐,flex-end
交叉轴终点对齐,center
交叉轴居中对齐。baseline
基线对齐
flex-wrap
控制子元素是否可换行
- nowrap(默认值)
- wrap
- wrap-reverse
nowrap
默认不换行,所有子元素都排列在一行。wrap
开启换行,当容器一行放不下所有子元素时,自动排列到下一行。wrap-reverse
开启换行,但第一行会排列到最下方。
align-content
- stretch(默认值)
- flex-start
- flex-end
- center
- space-between
- space-around
- space-evenly
align-content
定义了多根轴线的对齐方式。一根轴线不生效。必须是设置了flex-wrap
为非nowrap
且出现了换行才生效。align-content
是综合了justify-content
和align-iterms
设置两根轴线的对齐方式。
操作子元素(项目item
)
order
项目的排列顺序。数值越小,排列越靠前,默认为0
flex-grow
项目的放大比例,默认为0,0表示不缩放
flex-shrink
项目的缩小比例,默认为1,0表示不缩放
flex-basis
在分配多余空间之前,项目占据的主轴空间。
align-self
单个项目覆盖父容器的align-items
属性。效果和align-items
相同,只是作用与单个子元素上。
总结
flex
我常用的属性基本就这些,当然还有很多其他的可以探索。如:flex-grow flex-shrink flex-basis
可以简写为flex: flex-grow flex-shrink flex-basis;
但是为了好读建议还是分开写,flex
布局有时候我们也需要再加入position
定位才能达到完美布局。flex
布局如果实现比较麻烦的话,还可以使用grid
布局,以后我估计会写一篇关于grid
布局的吧。才疏学浅,就先写到这吧👋。
更多推荐
聊一聊我知道的flex布局
发布评论