fiex 布局
2020年6月17日传统布局与flex布局
- 如果是pc端页面布局就用传统布局
- 如果是移动端布局或者不考虑兼容性问题PC端页面布局,我们还是使用flex弹性盒子布局
传统布局
- 兼容性好
- 布局繁琐
- 局限性,不能再移动端很好的布局
flex弹性布局
- 操作方便,布局简单,移动端应用很广泛
- pc端浏览器支持情况较差
- ie11或更早低版本,不支持或仅部分支持
flex布局原理
- 伸缩布局=弹性布局=弹性盒子布局=flex布局
- 任何一个盒子都可以指定为flex布局
- 当我们为父盒子设为flex布局以后,子元素的float . clear 和vertical-align 属性将失效
- 就是通过给父盒子添加flex属性,来控制子盒子的位置和排序
- flex布局中,默认的子元素是不换行的,如果装不开会缩小子元素的宽度,放到父元素中
常用用父类选项
|
1 2 3 4 5 6 7 8 9 |
display: flex; justify-content: ; /*设置主轴子元素排列方式 flex-start(开头) flex-end(结尾);center(中间);space-around(平分剩余空间);space-between(先贴两边,在平分剩余空间,<strong>重要</strong>);*/ align-items: ; /*设置侧轴子元素排列方式(单行) flex-start; center; flex-end; stretch(子元素不要给高度)*/ align-content: ; /*设置子元素排列方式(多行) flex-start;flex-end;center;space-around;space-between;stretch;*/ flex-flow: ; /*复合属性 相当于同时设置了 flex-direction 和 flex-wrap*/ flex-direction: ; /*设置主轴 row row-reverse column column-reverse*/ flex-wrap: ; /*设置子元素是否换行 nowrap; wrap;*/ |
flex-direction设置主轴方向
- 在flex布居中,是分为主轴和侧轴两个方向,
- 默认主轴方向水平向右
- 默认侧轴方向水平向下
flex-direction属性决定主轴的方向,(即项目的排列方向)
注意:主轴和侧轴的是会变化的,就看flex-direction设置谁为主轴,剩下的就是侧轴,而我们的子元素就是跟着主轴排列的
justify-content属性定义了项目在主轴上的对齐方式
注意:使用这个属性之前一定要确定好主轴是哪一个
align-items(单行) 不换行情况使用,设置侧轴上的子元素 
align-content(多行) 换行情况下使用, 设置侧轴上的子元素
align–items 和 align–content 如何选择就是看是否换行,或者看flex-wrap:wrap是否开启
常用用子类选项
|
1 2 3 |
flex /*属性定义子项目分配<strong>剩余空间</strong>,用来表示占多少份默认为0 可以写成百分比 如 20%*/ align-self /*控制自己在侧轴的排序方式 flex-start flex-end center stretch*/ order /*更改子元素的排序方式, 默认为0 ,值越小 越往前 */ |
