README

Flexbox 是一个用于响应式前端开发的强大工具。然而，规范仍处于初级阶段：语法已经经过三次重大修订，为了支持旧浏览器，几乎使用 Flexbox 做任何事情都需要4+行代码。

对于那些更喜欢PHP CSS预处理器的人来说，我已经编写了一个简单的脚本，其中包含了我所知道的全部 Flexbox 属性方法。这极大地简化了与 Flexbox 一起工作的痛苦。

注意：我已经将许可证从GPL3更改为MIT。这是一个更开放的许可证，你现在可以用它来处理非开源项目。如果您需要更宽松的许可证，请告诉我，它可能被批准。

安装

composer install curiositry\flexbox_functions

使用

通过 composer 在您的 style.php 顶部包含

<?php
header("Content-type: text/css");
include("../vendor/autoload.php");

use curiositry\flexbox_functions as flexbox;

然后调用一个 Flexbox 方法，如下所示

echo flexbox\order(1);

演示

我包含了一个用此脚本构建的演示。这是一个完全响应式的三列布局，在移动设备上将侧边栏和小工具区域放在底部。由于它构建得非常快且相当草率，所以并不完美，但它给出了脚本和 Flexbox 如何用于响应式设计的一些想法。

演示的一些截图

方法名称

在命名方法时，我选择了语义和可猜测性，而不是简洁性。通常，它们是：[属性名称]_[当前语法值]。如果属性名称或值包含连字符，则将其替换为下划线，并且冒号也替换为下划线。例如：display: flex; 变为 display_flex()，而 flex-direction: row-reverse; 变为 flex_direction_row_reverse()

我计划在将来维护一个具有缩写方法名称的另一个版本。

Flexbox 方法 & 结构

对于我在 Flexbox 规范中知道的所有属性和值，都有一个方法。顺序和值可以取变量，但除此之外，由于语法的改变，我不得不为每个值使用单独的方法。

display:flex
flex
order
justify-content
- start
- center
- end
- space-between
- space-around
align-items
- start
- center
- end
- baseline
- stretch
align-self
- auto
- start
- center
- end
- baseline
- stretch
align-content
- start
- center
- end
- space-between
- space-around
- stretch
flex-direction
- row
- row-reverse
- column
- column-reverse
flex-wrap
- nowrap
- wrap
- wrap-reverse

怪癖

如果在 style.php 中使用 css 注释注释掉一个 PHP Flexbox 类调用，它不起作用。您必须在 PHP 标签内使用 PHP 注释

结论

欢迎评论和批评！由于我没有捐赠选项，如果您想支持 Flexbox Functions 的发展，请告诉您的朋友和粉丝。传播这个信息比捐赠金钱更能让我高兴。

curiositry / flexbox_functions

维护者

详细信息

README

安装

使用

演示

方法名称

Flexbox 方法 & 结构

怪癖

结论