已经入了小程序的坑,也入了uni-app的坑,而为了项目能同时编译成小程序与APP以及H5的项目,这里必须要做的一件事情就是:所有的布局都必须用flex,不然在不同的设备上,都会有一些意想不到的BUG,小程序已经开发了一个了,功能也做得差不多了,flex,也基本上会了一些,但是还是不全会,不过我相信写完这一篇笔记以后,肯定要会得更多一些.
1.首先要说的是flex的特性:
flex可以简便、完整、响应式地实现各种页面布局,而且得到了所有浏览器的支持(IE必须10以上).特性其实就是弹性布局,至于什么叫弹性,其实我也不太清楚,不过,父元素设置了display为flex以后,子元素的float,clear,vertical-align这些属性肯定就是没用了.也就是说这个和display block,应该是有冲突的,目前非flex的页面大部分都是通过display:block或者是position的一些设置;这里要说一个flex的最大的优势,就是垂直居中,没事有时间大家百度一下非flex的垂直居中,真心是很麻烦, 而且有可能不响应式的,但是flex,可以轻松做到而垂直居中在响应式的页面下是很重要的.
2.基本概念
flex布局分为两大块,一个是父容器的属性配置,一个是子元素的属性配置.
父窗口首先需要设置display:flex,行内元素的话,可以写display:inline-flex,而且不同的内核可能还要加上一些前缀,比如display:-webkit-flex;
inline-flex我用得不多.这里就暂时不说了,另外uni-app是跨平台编译,所以直接写display:flex时,在不同的平台是会自动加上-webkit前缀的,这里,我也就不再多做说明.
一般简单的样式,子元素可能是不需要设置什么属性的,因为父元素上已经把属性设置好了.
3.父容器属性
父容器配置display:flex以后,就有一些flex布局专用的属性可以设置了主要是以下几个:
1)flex-direction
这个属性决定了父容器中的子元素的排列方向,一共有四个属性:
column 从上到下
row 从左到右
column-reverse 从下到上
row-reverse 从右到左
2)flex-wrap
这个属性是设置当flex-direction为row或者是row-reverse时,是否自动换行的问题.这个属性目前在我的开发中用的会比较多,一共有三个属性:
nowrap 不换行
wrap 换行,但是第一行在上面,向下挤
warp-reverse 换行,但是第一行以下面,向上挤
3)flex-flow
这个我基本不用,因为他是flex-direction与flex-wrap的简写形式,我一般不写这种合在一起的,不过用法如下:
1 | flex-flow:row nowrap |
上面的代码,也是这个属性的默认值.
4)justify-content
水平对齐方式,主要有五个属性:
flex-start 左对齐
flex-end 右对齐
center 居中
space-between 两端对齐,这种情况下,各元素之间的间隔会是一样的
space-around 子元素两侧自带一个相等的间距,这里要具体说明一下,如果子元素两侧自带的间距是1,那么子元素与子元素间的间距就是2,但最边上两个子元素与父元素的间距则只有1,就像是给子元素加了一个左右margin为1一样.但是这个1,是平均出来的.这个排版布局,估计我是很少用到了.理解起来容易, 解释起来吃力…
5)align-items
竖直方向上的对齐方式,主要有五个属性,其实和上面的justify-content很类似:
flex-start 顶部对齐
flex-end 底部对齐
center 垂直居中对齐
baseline 第一行文字底部对齐(完全没想到过这个属性会在什么时候用出来…)
stretch 高度百分百,铺满,对齐,子元素只要没设置高度,都会是百分百的高度.
6)align-content
多行对齐设置,这个功能我暂时还没用到,也实在是有点记不住功能,直接从网上先把属性扒下来吧…一共有六个属性:
flex-start 顶部对齐
flex-end 底部对齐
center 多行垂直居中,第一行与最后一行离上下边框的距离相等
space-between 第一行最后一行居顶居底,中间的行间距相等
space-around 每一行上下间距相等,如果每一行上下自带的间距是1,那么行与行间的间距就是2,但顶部与底部两行与父元素的上下间距则只有1,就像是给子元素加了一个上下margin为1一样,与justify-content的这个属性很类似,只不过一个是左右间距,一个是上下间距
strech 行与间之间没有间距,直接铺满父元素的高度
4.子元素属性
有些排版只设置父元素可能不能满足,所以还需要给子元素设置一些flex相关的属性以达到排版的目的,主要有以下几个属性:
1)order
这个属性很神奇,可以直接打乱子元素的顺序,也就是说order设置后,子元素并不需要按html中所排列的正序或者反序排列,可以是乱序,这个属性我觉得很强大,虽然暂时还没用上,但是他的作用不可替代,如果是老式的布局,在不改变html排列结构的前提下,除了用position做复杂的设置以外,我完全想不到更简单的办法…
order的属性就是直接写数字,只支持整数,默认值为0.
2)flex-grow
这个属性基本上可以在一定程度上替代百分比,而且支持动态,多屏,响应式的适配,如果父元素很宽,子元素加起来还没有父元素宽,这个放大比例就会决定子元素的宽度,比如一个父元素的宽度为4.子元素排列并没有撑满父元素.给子元素都加上flex-grow:1的属性,那么子元素的宽度将平分这个父元素的宽度,这个1就是占的比例,这个属性有个默认值,是0,也就是说不管父元素多宽,子元素是不缩放的,这样的话,可以完成很多响应式的设计,在父元素变化的时候,子元素有的宽度不变,有的按比例放大.属性必须是大于等于0的整数.
3)flex-shrink
属性和上面的很类似, 只不过设置的是缩小比例,不过默认值,是1,表示空间不足时默认是所有子元素都将等比缩小的,如果这里有想某一个元素不缩小时,一定要设置这个属性为0.属性必须是大于等于0的整数.
4)flex-basis
这个属性是为了上面的两个属性的子元素无法满足的情况,比如想固定宽度,这个宽度,默认为子元素的宽度,但是也可以设置成其它的值
5)flex
flex属性是flex-grow, flex-shrink和flex-basis的简写，默认值为0 1 auto,我一般用来做某元素定长,某元素占据剩余长度的功能.但是到了现在才发现,其实我写flex:1的意思,其实就只是flex-grow:1的意思.
6)align-self
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto,另外还可以设置为align-items的属性值,比如所有的子元素都是顶部对齐,但某个子元素可以配置其它的对齐方式,也对当前子元素生效
说到这里,基本上 flex 布局的属性,已经说完了.其实里面的有些属性我也没有用过.但是做为笔记,我也只能是百度扒出来记在这里.没事的时候,自己再来看看,以后再找flex属性,也不用再百度了.
