前言
在前端开发中，很多开发者都会使用flex布局来实现网页布局。但是，针对不同宽度的设备要实现灵活的响应式布局时，的确有不少难点需要克服。因此，推荐使用npm包@npm-polymer/iron-flex-layout，该包提供了一系列扩展了的flex mixin来简化开发响应式布局的过程。
安装
使用npm进行安装：
npm install --save @npm-polymer/iron-flex-layout
快速上手
使用iron-flex-layout的过程中，我们需要在元素的样式中导入iron-flex-layout的mixin：
@import "@npm-polymer/iron-flex-layout/iron-flex-layout-classes.css";
然后，在元素的样式中引入delayed-matches属性，用以处理响应式布局：
-- -------------------- ---- -------
-------- -
------ ------------------
-
------ ---- ------ --- ----------- ------ -
-------- -
------ --------------------
-
-响应式布局探究
众所周知，CSS中的flex布局只是用来实现固定宽度的布局，对于响应式布局而言，这个类库并不能直接处理。但是，iron-flex-layout类库为开发者提供了一些扩展的mixin来执行一些常见的响应式布局操作。
常见的flex布局方向
--layout-horizontal- 该元素为flex容器，子元素在一行显示--layout-vertical- 该元素为flex容器，子元素在一列显示
原点对齐方向
--layout-center- 在flex元素的父级中垂直和水平居中元素--layout-start- 将元素定位到父元素的顶部/左侧--layout-end- 将元素定位到父元素的底部/右侧
主轴对齐方向
--layout-justified- 使flex容器中所有子元素分别对齐，使他们沿着主轴等间隔排列--layout-around-justified- 使flex容器中所有子元素分别对齐，但在他们之前，之间和之后留出空格空白的空间。--layout-justified-center- 使flex容器中所有子元素分别对齐，并且在容器中水平居中它们
交叉轴对齐方向
--layout-start- 将元素定位到flex容器的顶部/左侧--layout-end- 将元素定位到flex容器的底部/左侧--layout-center- 将元素垂直和水平居中--layout-baseline- 将元素定位到flex容器的基线
响应式布局示例
以下代码将展示如何在不同设备宽度下，使用iron-flex-layout实现雷达图：
-- -------------------- ---- -------
------ -
------ --------------------
-
------ ---- ------ --- ----------- ------ -
------ -
------ ------------------
-
-在上面的代码中，我们为容器设置了一个水平的flex布局，然后定义了一个@media查询规则，用来在设备宽度小于600px时，修改flex容器的布局为垂直方向。
总结
本文介绍了一个非常有用的npm包@npm-polymer/iron-flex-layout， 它为前端开发者提供了许多扩展了的flex mixin，帮助开发者更方便快捷地实现响应式布局。我们也一起探讨了它是如何扩展标准flex布局处理响应式布局的，我们可以看出使用它将让前端开发变得更加容易。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff181e8991b448ddb1e