最新的Web开发教程
 

CSS3 Flexible Box

❮上一页 下一页章❯

CSS3 Flexbox

灵活的框或flexbox ，是CSS3新的布局模式。

使用flexbox保证行为的元素时，可预见的页面布局必须适应不同的屏幕尺寸和不同的显示设备。

对于许多应用，灵活的盒子模型提供了超过在于它不使用花车，也不符合其内容的利润率做Flex容器的利润率崩溃块模型的改进。

浏览器支持

在表中的数字指定完全支持特征的第一浏览器的版本。

其次是数字-webkit-或-moz-指定用一个前缀工作的第一个版本。

属性
Basic support
(single-line flexbox)		 29.0
21.0 -webkit-		 11.0 22.0
18.0 -moz-		 6.1 -webkit- 12.1 -webkit-
Multi-line flexbox 29.0
21.0 -webkit-		 11.0 28.0 6.1 -webkit- 17.0
15.0 -webkit-
12.1

CSS3 Flexbox概念

Flexbox由Flex容器和Flex项目。

柔性容器是由设置声明display的元素的属性，以任一flex （呈现为一个块）或inline-flex （呈现为内置）。

内的柔性容器有一个或更多个柔性物品。

注：Flex容器外柔性项目内的所有内容呈现如常。 Flexbox的定义如何弯曲项的Flex容器内都摆出来。

Flex的项目位于沿柔性线柔性容器内。 默认只有一个每柔性容器弯曲线。

下面的例子显示了三个弯曲的物品。 它们被定位在默认情况下：沿水平弯曲线，从左至右依次为：

例

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
</div>

</body>
</html>

试一试»

另外，也可以改变弯曲线的方向。

如果我们设定的direction属性rtl （从右到左），绘制文本从右向左，也是柔性线改变方向，这将改变页面布局：

例

body {
    direction: rtl;
}

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}

试一试»

Flex的方向

在flex-direction属性指定柔性容器内的柔性物品的方向。 的默认值flex-direction是row （左到右，顶部至底部）。

其他的值如下：

  • row-reverse -如果写入模式（方向）被左到右，挠性件将被布置从右到左
  • column -如果书写系统是水平的，柔性的项目将被垂直布置
  • column-reverse -同列，但逆转

下面的例子显示使用的结果row-reverse值：

例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

试一试»

下面的例子显示使用的结果column值：

例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

试一试»

下面的例子显示使用的结果column-reverse值：

例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

试一试»

该证明内容属性

该justify-content属性水平对齐灵活容器的物品时，物品不使用主轴的所有可用空间。

可能的值如下：

  • flex-start -默认值。 件被定位在容器的开头
  • flex-end -物品被定位在容器的端部
  • center -物品被定位在容器的中心
  • space-between -物品被定位为与线之间的空间
  • space-around -物品被定位空间之前，之间以及线之后

下面的例子显示使用的结果flex-end的价值：

例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

试一试»

下面的例子显示使用的结果， center值：

例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

试一试»

下面的例子显示使用的结果space-between的价值：

例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

试一试»

下面的例子显示使用的结果space-around价值：

例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

试一试»

对齐项物业

所述align-items属性垂直对齐柔性容器的物品时，物品不使用对交叉轴的所有可用空间。

可能的值如下：

  • stretch -默认值。 项目被拉伸以适应集装箱
  • flex-start -物品被定位在容器的顶部
  • flex-end -物品被定位在容器的底部
  • center -物品被定位在容器的中心（垂直地）
  • baseline -物品被定位在容器的基线

下面的例子显示使用的结果stretch值（这是默认值）：

例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: stretch;
    align-items: stretch;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

试一试»

下面的例子显示使用的结果flex-start值：

例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

试一试»

下面的例子显示使用的结果flex-end的价值：

例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

试一试»

下面的例子显示使用的结果， center值：

例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

试一试»

下面的例子显示使用的结果baseline值：

例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: baseline;
    align-items: baseline;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

试一试»

在柔性包装物业

所述flex-wrap属性指定柔性物品是否应该包裹与否，如果没有足够的空间，其中在一个柔性线路。

可能的值如下：

  • nowrap -默认值。 灵活的项目将不换
  • wrap -灵活的项目将包装如有必要，
  • wrap-reverse -柔性物品将包装，如果需要的话，以相反的顺序

下面的例子显示使用的结果nowrap值（这是默认值）：

例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 300px;
    height: 250px;
    background-color: lightgrey;
}

试一试»

下面的例子显示使用的结果wrap值：

例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 300px;
    height: 250px;
    background-color: lightgrey;
}

试一试»

下面的例子显示使用的结果wrap-reverse值：

例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
    width: 300px;
    height: 250px;
    background-color: lightgrey;
}

试一试»

对齐内容属性

该align-content属性修改的行为flex-wrap特性。 它类似于align-items ，但不是对准柔性物品，它对准弯曲线。

可能的值如下：

  • stretch -默认值。 线路延伸到占用的剩余空间
  • flex-start -线路都挤满朝着柔性容器的开始
  • flex-end -线条都挤满朝着柔性容器的结束
  • center -线条都挤满朝着柔性容器的中央
  • space-between -线条均匀地分布在Flex容器
  • space-around -线条均匀地分布在Flex容器，用半角空格的两端

下面的例子显示使用的结果， center值：

例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
    width: 300px;
    height: 300px;
    background-color: lightgrey;
}

试一试»

Flex的项目属性

订购

该order属性指定灵活相对于同一容器内的柔性物品的其余部分项目的顺序：

例

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}

.first {
    -webkit-order: -1;
    order: -1;
}

试一试»

余量

设定margin: auto;会吸收多余的空间。 它可用于挠曲件推入不同的位置。

在下面的例子中，我们设置margin-right: auto;第一个柔性的项目。 这将导致所有额外的空间被吸收到该元素的权利：

例

.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: 10px;
}

.flex-item:first-child {
    margin-right: auto;
}

试一试»

完美的定心

在下面的例子中，我们将解决几乎每天都有的问题：完美的定心。

这是很容易与Flexbox的。 设定margin: auto;会在这两个轴完全集中的项目：

例

.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: auto;
}

试一试»

调整自

该align-self柔性物品属性将覆盖柔性容器的该项目对齐项属性。 它具有相同的可能值作为align-items属性。

以下示例设置不同的对齐自我价值到每个弯曲项目：

例

.flex-item {
    background-color: cornflowerblue;
    width: 60px;
    min-height: 100px;
    margin: 10px;
}

.item1 {
    -webkit-align-self: flex-start;
    align-self: flex-start;
}
.item2 {
    -webkit-align-self: flex-end;
    align-self: flex-end;
}

.item3 {
    -webkit-align-self: center;
    align-self: center;
}

.item4 {
    -webkit-align-self: baseline;
    align-self: baseline;
}

.item5 {
    -webkit-align-self: stretch;
    align-self: stretch;
}

试一试»

柔性

的flex属性指定柔性物品的相对于相同的容器内的柔性物品的其余部分的长度，。

在下面的例子中，第一挠曲项目会消耗的自由空间的2/4，而另外两个柔性物品会消耗每个自由空间的1/4：

例

.flex-item {
    background-color: cornflowerblue;
    margin: 10px;
}

.item1 {
    -webkit-flex: 2;
    flex: 2;
}

.item2 {
    -webkit-flex: 1;
    flex: 1;
}

.item3 {
    -webkit-flex: 1;
    flex: 1;
}

试一试»

例子

更多示例

创建一个负责任的网站，Flexbox的
这个例子演示了如何创建一个Flexbox的响应网站布局。

CSS3 Flexbox的属性

下表列出了Flexbox的使用的CSS属性：

Property Description
display Specifies the type of box used for an HTML element
flex-direction Specifies the direction of the flexible items inside a flex container
justify-content Horizontally aligns the flex items when the items do not use all available space on the main-axis
align-items Vertically aligns the flex items when the items do not use all available space on the cross-axis
flex-wrap Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line
align-content Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines
flex-flow A shorthand propert for flex-direction and flex-wrap
order Specifies the order of a flexible item relative to the rest of the flex items inside the same container
align-self Used on flex items. Overrides the container's align-items property
flex Specifies the length of a flex item, relative to the rest of the flex items inside the same container

❮上一页 下一页章❯