少年啊,使用Less来打造你前端样式的武器库吧! - (2)Flex布局篇

我们很多时候会使用一些样式库来快捷实现css样式的使用以及重用, 以此来方便我们开发UI. 但是我们也可以Less来打造自己的前端样式库,作为自己的弹药库方便之后的项目开发.

下面我们一起来创建一个用于日常项目开发的样式弹药库吧!

之前说了基础布局样式的生成, 现在我们来看看Flex布局,Flex布局已经成为常用的样式布局,但是直接使用style需要书写太多的代码,我们同样可以把通过封装成常用的class来是进行使用.

少年啊,来使用Less来打造你前端样式的武器库吧! - (1)基础样式篇

少年啊,来使用Less来打造你前端样式的武器库吧! - (2)Flex布局篇

Flex基础样式

先来创建基础的flex样式

.flex {
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.flex-nowrap {
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.flex-wrap {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

// 行模式(主轴水平排列)
.flex-row {
    .flex();
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-lines: single;
}

// 列模式(主轴数值排列)
.flex-column {
    .flex();
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -webkit-box-orient: vertical;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-lines: single;
}

// 反向行模式(主轴水平排列)
.flex-row-reverse {
    .flex-row();
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-box-direction: reverse;
}

// 反向列模式(主轴水平排列)
.flex-column-reverse {
    .flex-column();
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    -webkit-box-direction: reverse;
}

// 自动填充(用与配合flex-basis填充剩余空间)
.flex-auto {
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-flex: 1;
    -webkit-flex-basis: 0;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
}

我们现在可是通过flex-row或者flex-column来开启flex模式的布局了

 <div class="flex-column">
        <div class="flex-row">
             <div>one</div>
           	 <div>two</div>
        </div>
        <div class="flex-row">
        	 <div>three</div>
           	 <div>four</div>
         </div>
 </div>

Flex对齐样式

下来我们来创建flex对齐的样式

// align-items
@align-items-keys: start, center, end, stretch;
@align-items-values: flex-start, center, flex-end, between, around;

.flex-align-items(@data, @i: 1) when(@i =< length(@data)) {
    @align: extract(@align-items-keys, @i);
    @value: extract(@align-items-values, @i);

    .align-items-@{align} {
        -webkit-align-items: @value;
        align-items: @value;
        -webkit-box-align: @align;
    }

    .flex-align-items(@data, (@i + 1));
}

// justify-content
@justify-content-keys: start, center, end, between, around;
@justify-content-values: flex-start, center, flex-end, space-between,
    space-around;

.flex-justify-content(@data, @i: 1) when(@i =< length(@data)) {
    @key: extract(@justify-content-keys, @i);
    @value: extract(@justify-content-values, @i);

    .justify-content-@{key} {
        -webkit-justify-content: @value;
        justify-content: @value;
    }

    .flex-justify-content(@data, (@i + 1));
}

// 遍历justify-content-keys生成样式
.flex-justify-content(@justify-content-keys);

// 遍历align-items-keys生成样式
.flex-align-items(@align-items-keys);

可以看到我们通过@align-items-keys和@align-items-values先定义了key和value这是用于生成对应的class名称以及为对应的样式进行赋值的.

然后我们通过when来遍历我们的keys来生成对应的样式

.flex-justify-content(@data, @i: 1) when(@i =< length(@data)) {
    .flex-align-items(@data, (@i + 1));
}

.flex-justify-content(@justify-content-keys)

我们通过extract方法可以使用index来提取出需要使用的key和value

这样我们就完成了align-items和justify-content的对齐样式实现

实现Flex固定比例大小

下来我们来实现Flex按固定比例来分配大小,通过设置flex-basis来实现我们的目的.

.flex-basis-loop(@n, @i:1) when (@i <= @n) {
    .flex-basis-@{i} {
        -webkit-flex-basis: percentage(@i / @n);
        -ms-flex-preferred-size: percentage(@i / @n);
        flex-basis: percentage(@i / @n);
    }
    .flex-basis-loop(@n, (@i + 1));
}

.flex-basis-loop(12)

我通过flex-basis-loop实现了将flex分为12份,分别对应着flex-basis-1到flex-basis-12的样式

通过percentage我们可以实现按百分比对大小进行分配

实现Flex弹性比例大小

我们接着来实现按弹性来分配flex的大小,通过设置flex-span来实现我们的目的.

.flex-span-loop(@n, @i:1) when (@i <= @n) {
    .flex-span-@{i} {
        -webkit-flex: @i @i auto;
        -ms-flex: @i @i auto;
        flex: @i @i auto;
        -webkit-box-flex: @i;
    }
    .flex-span-loop(@n, (@i + 1));
}

 .flex-span-loop(12)

这样我们也实现了对弹性大小的实现

我们也可以通过flex-basis和flex-auto来实现剩余大小自动填充的实现.

 <div class="flex-column">
 		// 高度为 2/12
        <div class="flex-row flex-basis-2">
             <div>one</div>
           	 <div>two</div>
        </div>
        // 高度为剩余空间
        <div class="flex-row flex-auto">
        	 <div class="flex-span-1">three</div>
           	 <div class="flex-span-2">four</div>
         </div>
 </div>

这样我们就基本完成了我们常用的flex布局相关内容.