flexbox开始使用flexbox


备注

本节概述了flexbox是什么,以及开发人员可能想要使用它的原因。

它还应该提到flexbox中的任何大型主题,并链接到相关主题。由于flexbox的文档是新的,您可能需要创建这些相关主题的初始版本。

版本

发布日期
候选人推荐2016年3月 2016年3月1日
候选人推荐2012年9月 2012年9月18日
2011年3月工作草案 2011-03-22
2009年7月工作草案 2009-07-23

Flexbox容器和项目

Flexbox或灵活框是一种以可预测的方式在页面上排列内容的布局方法。 Flexbox提供了一种改进,优于传统的块模型定位,使用浮动或甚至表格定位页面上的内容。

从本质上讲,Flexbox可以分解为父元素(flex容器)和子元素(flex项)。

Flex容器

可以通过将其display属性设置为flex来创建Flex容器:

.container {
  display: flex;
}
 

Flex项目

Flex容器的每个子元素都变为flex项。然后,这些弹性项可以接收其他属性,以修改其在页面上的定位方式。

.item {
  flex: 1;
}
 

这个flex: 1 属性是flex-grow: 1 简写flex-grow: 1 使它能够相对于容器内的兄弟成长。

将这些放在一起就是HTML标记:

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
 

Flexbox简介

CSS3中引入的Flexbox(灵活框)布局提供了一种在容器元素( flex container )中的子元素( flex items )之间布局,对齐和分配空间的更有效方法。最重要的是,即使它们的尺寸未知或动态,因此称为“弯曲”或“柔性”。

让我们从基础开始,看看如何将容器初始化为flex。

考虑以下标记:

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

只需使用display: flex 即可初始化flexbox。完成!

.flex-container {
  height: 100px;
  padding: 10px;
  background: grey;

  display: flex; // or display: inline-flex;
}
 

现在Flex容器已经准备好了,让我们玩它的flex项目,给它们每个宽度25%,并在它们的父容器内水平居中对齐flex项目。

.flex-item-1 {
  width: 25%;
  background: green;
}

.flex-item-2 {
  width: 25%;
  background: purple;
}

.flex-item-3 {
  width: 25%;
  background: pink;
}
 

请注意,我特意给了3个孩子,每个孩子的宽度为25%,以显示在弹性箱内移动孩子是多么容易。

现在,当我们运行上面的代码时,我们应该看到容器中的3个子项水平地彼此相邻。这是因为默认情况下,flexbox具有属性flex-direction: row 。默认情况下,弹性项目将彼此水平对齐。右边应该有一个间隙,因为孩子的总宽度没有加起来达到100%。

现在尝试将属性justify-content: centerflex-container

.flex-container {
  ...
  justify-content: center;
}
 

结果是孩子们水平居中对齐。相同的属性具有其他值,例如flex-end (向右对齐), space-around (项目周围的相等空间), space-between (项目之间的相等空间)。

重要说明:其他块元素属性(如text-align: center 等)对flex元素没有影响。

安装或设置

Flexbox是一个CSS3模块,由万维网联盟标准化。它是元素排列的布局模式,使得当页面布局必须适应不同的显示尺寸时,元素的行为可预测。

因为它是CSS3的一部分,所以您不需要安装任何东西。只要浏览器支持它,它就可以使用,大多数现代浏览器都可以使用它。要检查您的浏览器是否支持,请参阅兼容性图表

要在CSS中设置和使用flexbox ,只需将display: flex 添加到选择器即可。