flex 弹性布局很好用,解决了我的排版问题,下面记录下我使用flex 弹性布局解决的一些常见问题,以供以后查阅!
一、基本概念介绍
(一)基本用法
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
1、flex-direction
分布方向,有两个值:
- row:水平分布
- column:垂直分布
2、justify-content
分布样式,常见值有:
- center:在分布方向上,居中;比如若是水平分布,那么就是水平居中,若是垂直分布,那么就是垂直居中;
- space-between:在分布方向上,所有元素等间隔分布,两边元素靠边
3、align-items
分布方向的反方向内部元素样式。比如:
情况一:
display: flex;
flex-direction: row;
align-items: center;
上面的意思是:水平分布,垂直方向上元素居中
情况二:
display: flex;
flex-direction: column;
align-items: center;
上面的意思是:垂直分布,水平方向上元素居中
(二)灵活用法–元素居中
这里以让元素居中为例进行讲解。比如我需要让一个元素不论怎样都居中,那么我们就可以让这个元素被一个<div>
包裹,然后设置弹性布局:
案例,让我爱我家四个文字水平、上下居中:
<div class="parent">
<text>我爱我家</text>
</div>
CSS1可行:
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
CSS2也可行:
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;