flex是一个十分好用的布局方法,能轻松的实现很多以往需要做复杂的工作才能实现的效果
在reactnative中 更是默认的flex布局
之前对flex布局都是一知半解,今天看到了一句值得划重点的知识点
码起来呀
在前端面试题中有一道经典css的考题:实现元素的水平垂直居中布局
当然实现的方法很多,毕竟css是十分灵活的
但是在css布局中 一行 align-items:center
就能解决这个问题
可能提到flex布局有些人也只能想到justify-content:center
和align-items:center
甚至弄不太清楚到底那个属性决定了水平居中哪个决定了垂直居中
flex布局中是分为 主轴 和 副轴 的
而主轴和副轴的方向又由flex-direction决定 该属性的默认值是row 即 横轴是主轴 竖轴是副轴
划重点来了
justify-content属性用于控制项目在主轴 的对齐方式
注意这里是主轴而不是横轴 当flex-direction的值是row 或者 就是默认值时,主轴就是横轴,但是当flex-direction值为column时 主轴就是竖轴
而align-items属性 是控制副轴的排列方式的
常见flex布局的考点
实现水平垂直居中
等高布局
- flex布局中子元素等高
Sticky Footer
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22<!-- HTML -->
<header></header>
<main></main>
<footer></footer>
//方案1 css
body {
display: flex;
flex-direction: column;
}
footer {
margin-top: auto;
}
//方案2 css
body {
display: flex;
flex-direction: column;
}
main {
flex: 1 0 auto;
}均分列
- flex布局
- 子元素 width:calc(100% / 3)