小程序开发最常用布局知识:flex布局详解

理解

flex布局实现需要至少两层控件,外层叫做容器,内部的叫做项目(item).类似于Android里的ViewGroup和里面装的View。

容器分两个轴,水平的主轴(main axis)和竖直方向的交叉轴(cross axis),就相当于盒子模型中的xy轴,或者android中的xy轴.

基本的布局原则

不像安卓里有那么多的定义好了布局规则的ViewGroup,比如RelativeLayout,Linearlayout,以及Listview,GridView等,flex布局的名字就只有这一种(display: flex;),它是通过容器的一些属性来控制具体的布局规则的。

那么如何确定布局规则呢?

容器上的属性

第一步,确定众多的item是横向排列还是纵向排列:

flex-direction:
        row(默认值):主轴为水平方向,起点在左端。
        row-reverse:主轴为水平方向,起点在右端。
        column:主轴为垂直方向,起点在上沿。
        column-reverse:主轴为垂直方向,起点在下沿。

第二步:一行或者一列放不下,怎么办?怎样换行或换列?

flex-wrap: nowrap | wrap | wrap-reverse;

flex-wrap.png

前面两个属性的简写形式:flex-flow

flex-flow:  || ;

第三步:每个item之间在主轴方向上(flex-direction所确定的方向)以什么方式对齐?

justify-content: 
    flex-start(默认值):左对齐
    flex-end:右对齐
    center: 居中
    space-between:两端对齐,项目之间的间隔都相等。
    space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

第四步:每个item在交叉轴方向上以什么方式对齐?

align-items:
    flex-start:交叉轴的起点对齐。
    flex-end:交叉轴的终点对齐。
    center:交叉轴的中点对齐。
    baseline: 项目的第一行文字的基线对齐。
    stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

第五步:多行或者多列时(多根轴线),轴线和轴线之间的对齐方式

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

每个item的属性

1.排列顺序:order,数值越小,排列越靠前,默认为0。
一般情况下,控件一个个写过去,没什么可说的,但有时想把后面的一个控件显示到前面,或者把前面的一个控件显示在最后,就需要这个了

2.大小/宽高的控制:

2.1项目的大小:flex-basis
flex-basis: length | auto; /* default auto */

2.2 当项目多时,我这个项目怎么缩小:flex-shrink

2.3 当项目少时,本项目怎么放大:flex-grow

注:flex-shrink和flex-grow有点类似于安卓中线性布局的weight。

 缩写形式:flex

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。

3.对齐方式,可以覆盖容器上规定的对齐规则。

类似于Android中母布局中gravity与子布局中layout-gravity的关系。这里的相关属性值可以类比Android中相对布局中子view 定位的相关属性。

align-self: auto | flex-start | flex-end | center | baseline | stretch;

发表评论

电子邮件地址不会被公开。 必填项已用*标注