[福清seo]flex合理布局案例新手入门实例教程【方法篇】 公布時间: 今年08月0五日 09:50:52  创作者:福清seo

什么叫 Flexbox ?

Flexbox 是 flexible box 的通称(愚人港口注：含意是 灵便的小盒子器皿 )，是 CSS3 引进的新的合理布局方式。它决策了原素怎样在网页页面上排序，使他们能不在同的显示屏规格和机器设备下可预测分析地呈现出去。

它往往被称作 Flexbox ，是由于它可以拓展和收拢 flex 器皿内的原素，以较大程度地添充能用室内空间。与之前合理布局方法(如 table 合理布局和波动原素嵌入块原素)对比，Flexbox 是一个更强劲的方法：

不在同方位排序原素

再次排序原素的显示信息次序

变更原素的两端对齐方法

动态性地将原素装进器皿

甚么状况下不提议应用 Flexbox ?

尽管 Flexbox 十分合适放缩，两端对齐和再次排列原素，但下列状况应当尽可能防止应用 Flexbox 合理布局：

总体网页页面合理布局

彻底适用旧访问器的网站

访问器适用 Flexbox 的状况：

老版访问器，如IE 11或更低版本号，不兼容或仅一部分适用 Flexbox 。假如你要安全性的应用网页页面一切正常展现，你应当退还到别的的 CSS 合理布局方法，例如融合float 的 display: inline-block 或是 display: table 等。可是，假如您只对于当代访问器，那麼 Flexbox 肯定非常值得一试。

专业术语

在 Flexbox 实体模型中，有三个关键定义：

flex 项(愚人港口注：也称 flex 子原素)，必须合理布局的原素

flex 器皿，其包括 flex 项

最好的学习培训方法是以工作经验和事例初中习，因此要我们刚开始吧!

Level 1   基本

1)建立一个 flex 器皿

.flex-container {

display: flex;

}

See the Pen Flexbox 1   Basic by feiwen8772 (@feiwen8772) on CodePen.0

要建立一个 flex 器皿，您只必须将一个 display: flex 特性加上到一个原素上。默认设置状况下，全部的立即子原素都被觉得是 flex 项，并从左往右先后排序在一行中。假如 flex 项的总宽总数超过器皿，那麼 flex 项将按占比变小，直至他们适应 flex 器皿总宽。

2)将 flex 项排列成一列

.flex-container {

display: flex;

flex-direction: column;

}

See the Pen 将flex 项排列成一列 by feiwen8772 (@feiwen8772) on CodePen.0

能够根据(在 flex 器皿中)设定 flex-direction: column 使 flex 项竖直合理布局。还可以根据设定 flex-direction: column-reverse 或 flex-direction: row-reverse 来使 flex 项以反过来的次序排序。

.flex-container {

display: flex;

flex-direction: column-reverse;

}

See the Pen flex 项以反过来的次序排序 by feiwen8772 (@feiwen8772) on CodePen.0

Level 2   初学者

1)靠右两端对齐的 flex 项

.flex-container {

display: flex;

justify-content: flex-end;

}

回忆一下，每一个 Flexbox 实体模型都是有 flex 方位(主轴)。justify-content 用以特定 flex 项在 flex 方位(direction)上的两端对齐部位。在上边的事例中，justify-content:flex-end 表明 flex 项在水准方位上靠 flex 器皿的尾端两端对齐。这便是为何她们被放到了右侧。

See the Pen 将 flex 项靠右两端对齐 by feiwen8772 (@feiwen8772) on CodePen.0

2)垂直居中两端对齐的 flex 项

.flex-container {

display: flex;

justify-content: center;

}

See the Pen 垂直居中两端对齐 flex 项 by feiwen8772 (@feiwen8772) on CodePen.0

3)铺平的 flex 项

您能够根据应用下列 justify-content 特性的三个间隔值之一来特定器皿中 flex 项中间应显示信息是多少室内空间：

space-evenly : flex 器皿起止边沿和第一个 flex 项中间的间隔和每一个邻近 flex 项中间的间隔是相同。(愚人港口注：该特性之前非常少见到，缘故是之前访问器不兼容，chrome 也是 60 版本号以后才适用。拓宽一下，align-content: space-evenly 也是这一逻辑性，提议在 chrome 60 下查询 这一demo 。 )

space-between : 一切2个邻近 flex 项中间的间隔是同样的，但不一定相当于第一个/最终一个 flex 项与 flex 器皿边沿中间的间隔;起止边沿和第一个新项目中间的间隔和尾端边沿和最终一个新项目中间的间隔是相同的。

space-around : flex 器皿中的每一个 flex 项的每一侧间隔全是相同的。一定要注意，这寓意着2个邻近 flex 项中间的室内空间将是第一个/最终一个 flex 项两者之间近期边沿中间的室内空间的二倍。

愚人港口注：在网上找了一幅图片能更强的表述 justify-content 特性值的主要表现，如图所示：

4)flex 项在交叉式轴上的两端对齐

.flex-container {

display: flex;

justify-content: center;

align-items: center;

}