css3 flex布局

[Myoursky]

原文链接 实现代码
FlexBox布局官方称为CSS灵活的盒布局模型，是CSS3中一种新的布局模型，在元素的大小是动态或不确定的时候，改善其在容器内的排版，方向和排序。flex容器最重要的特性是，在不同的屏幕尺寸中，以最合适的方式来改变子元素的宽高来填充父级空间。

许多设计人员和开发人员发现flexbox布局更容易使用，因为元素本身变得简单，因此可以用很少的代码来实现复杂的布局。flexbox布局算法是基于方向的，而块布局和行内布局是基于垂直和水平模式的。flexbox布局应该被用于小型的应用组件，大规模的布局可以用CSS网格布局模型来处理。

这篇文章主要讲解flex属性在具体布局中的展示，而不是flex属性如何工作的。

基础

在我们开始介绍flexbox属性时，我们先简单了解下flexbox模型。flex布局由父容器flex container和直接子类flex items组成。

上图展示了用于描述flex容器和其子类的属性和术语。你可以通过官方文档获得更详细的信息。

flexbox布局在2009年初次发布后，经过了一系列的迭代和版本变更。所以为了避免混淆，我们选择2014年9月份发布的最新版本。如果你需要兼容老版本的浏览器，可以参照这篇文章。

支持最新flexbox规则的浏览器情况如下：

• Chrome 29+
• Firefox 28+
• Internet Explorer 11+
• Opera 17+
• Safari 6.1+ (prefixed with -webkit-)
• Android 4.4+
• iOS 7.1+ (prefixed with -webkit-)

你可以从这边获取更详细的兼容性和支持情况。

用法

使用flexbox布局，只需要在父元素上设置display属性即可。

.flex-container {
  display: -webkit-flex; /* Safari */
  display: flex;
}

如果你想像行内元素一样展示,可以这样使用：

.flex-container {
  display: -webkit-inline-flex; /* Safari */
  display: inline-flex;
}

注解：这是你唯一需要在父容器上设置的属性，设置过之后，所有子元素都会变成flex元素。

有多种方式可以对flexbox属性进行分类。但是我发现最容易理解flexbox功能的方式就是将其分为flex容器和flex元素。接下来我们将一一介绍它们。

Flexbox容器属性

flex-direction

这个属性通过设置flex容器主轴的方向指定flex元素如何在flex容器中排列。它可以设置两个排列方向。类似行水平方向和列垂直方向。

.flex-container {
  -webkit-flex-direction: row; /* Safari */
  flex-direction: row;
}

通过设置方向为: row, flex元素被从左往右排列在一个ltr环境中。

.flex-container {
  -webkit-flex-direction: row-reverse; /* Safari */
  flex-direction:         row-reverse;
}

通过设置方向为: row-reverse, flex元素被从右往左排列在一个ltr环境中。

.flex-container {
  -webkit-flex-direction: column; /* Safari */
  flex-direction:         column;
}

通过设置方向为: column, flex元素被从上至下排列成一列。

.flex-container {
  -webkit-flex-direction: column-reverse; /* Safari */
  flex-direction:         column-reverse;
}

通过设置方向为: column-reverse, flex元素被从下往上排列成一列。

默认值: row

注解: row和row-reverse独立于writing mode,所以在rtl环境中，它们会以相反的方向展示。

flex-wrap

flexbox初始值是将容器的子元素显示在一条线上的。flex-wrap属性用于设置容器子元素是排列在一行还是换行排列，以及换行排列时的方向。

.flex-container {
  -webkit-flex-wrap: nowrap; /* Safari */
  flex-wrap:         nowrap;
}

flex元素被排列在一行显示。并且默认会收缩以适应flex容器宽度。

.flex-container {
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap:         wrap;
}

flex元素排列成多行显示。从左至右，从上到下。

.flex-container {
  -webkit-flex-wrap: wrap-reverse; /* Safari */
  flex-wrap:         wrap-reverse;
}

flex元素排列成多行显示。从左至右，从下往上。

默认值: nowrap

注解: row和row-reverse独立于writing mode,所以在rtl环境中，它们会以相反的方向展示。

flex-flow

这个属性是flex-direction和flex-wrap的简写。

.flex-container {
  -webkit-flex-flow:  || ; /* Safari */
  flex-flow:          || ;
}

默认值: row nowrap

justify-content

justify-content属性将flex元素沿着父容器主轴方向排列。无论子元素是不能转变还是可转变的，它都能帮助分配左侧自由空间以达到它们的最大尺寸。

.flex-container {
  -webkit-justify-content: flex-start; /* Safari */
  justify-content:         flex-start;
}

flex元素在ltr环境中，被排列在flex容器的左侧。

.flex-container {
  -webkit-justify-content: flex-end; /* Safari */
  justify-content:         flex-end;
}

flex元素在ltr环境中，被排列在flex容器的右侧。

.flex-container {
  -webkit-justify-content: center; /* Safari */
  justify-content:         center;
}

flex元素在ltr环境中，被排列在flex容器的中部。

.flex-container {
  -webkit-justify-content: space-between; /* Safari */
  justify-content:         space-between;
}

flex元素被以相同的间距排列，第一和最后的flex元素被放在flex容器的边缘位置。

.flex-container {
  -webkit-justify-content: space-around; /* Safari */
  justify-content:         space-around;
}

flex元素被以相同的间距排列，包括第一个和最后一个flex元素。

默认值: flex-start

align-items

align-items使flex元素沿着flex容器的交叉轴线排列。与justify-content相似，但是是在垂直方向上。这个属性设置了所有flex元素的排列方式，包括匿名元素。

.flex-container {
  -webkit-align-items: stretch; /* Safari */
  align-items:         stretch;
}

flex元素从flex容器交叉轴的开始到结束填充满整个高度（宽度）。

.flex-container {
  -webkit-align-items: flex-start; /* Safari */
  align-items:         flex-start;
}

flex元素被安排从flex容器交叉轴的开始位置排列。

.flex-container {
  -webkit-align-items: flex-end; /* Safari */
  align-items:         flex-end;
}

flex元素被安排从flex容器交叉轴的结束位置排列。

.flex-container {
  -webkit-align-items: center; /* Safari */
  align-items:         center;
}

flex元素被安排排列在flex容器交叉轴的中间位置。

.flex-container {
  -webkit-align-items: baseline; /* Safari */
  align-items:         baseline;
}

flex元素被安排按照它们的基线位置排列。

默认值: stretch

注解: 阅读此处关于基线如何计算的更多细节。

align-content

当存在额外空间时，align-content属性沿着flex容器交叉轴方向排列flex元素。与justify-content在主轴方向排列单个flex元素类似。

.flex-container {
  -webkit-align-content: stretch; /* Safari */
  align-content:         stretch;
}

flex元素拉伸排列开，元素列后的间距相等。

.flex-container {
  -webkit-align-content: flex-start; /* Safari */
  align-content:         flex-start;
}

flex元素沿着交叉轴开始方向排列在flex容器中

.flex-container {
  -webkit-align-content: flex-end; /* Safari */
  align-content:         flex-end;
}

flex元素沿着交叉轴结束方向排列在flex容器中

.flex-container {
  -webkit-align-content: center; /* Safari */
  align-content:         center;
}

flex元素排列在flex容器交叉轴中心位置。

.flex-container {
  -webkit-align-content: space-between; /* Safari */
  align-content:         space-between;
}

flex元素按照等分间距排列在flex容器中，第一行和最后一行排在容器边缘位置。

.flex-container {
  -webkit-align-content: space-around; /* Safari */
  align-content:         space-around;
}

flex元素行保持上下间距相等，排列于flex容器中。

默认值: stretch

注解: 这个属性只有当flex容器中的flex元素占多行时才有作用。如果flex元素只占有一行，那么该属性没有作用。

flex容器注意事项

所有的*column-属性在flex容器中都不起作用。
::first-line和::first-letter伪元素不能应用于flex容器。

Flexbox元素属性

order

order属性用于控制flex元素在flex容器中的显示顺序。默认情况下，它们按照最初加入的顺序排列。

.flex-item {
  -webkit-order: ; /* Safari */
  order:         ;
}

order元素可以在不改变html代码结构的前提下，重新排列flex元素。

默认值: 0

flex-grow

该属性指定flex扩展的要素，它指定当flex容器的剩余空间是正数的时候，flex元素如何来分配它。

.flex-item {
  -webkit-flex-grow: ; /* Safari */
  flex-grow:         ;
}

如果flex元素的flex-grow属性相同，那么它们分配到的剩余空间相同。

第二个元素相对于其他元素分配到更多的剩余空间。其分配值与其它元素的尺寸相关。

默认值: 0

注解: 不支持负数。

flex-shrink

该属性指定flex收缩的要素，它指定当flex元素的长度或者宽度超过flex容器时，如果压缩特定比例来排列到flex容器中。此处同样是分配剩余空间，但是是负的剩余空间。

.flex-item {
  -webkit-flex-shrink: ; /* Safari */
  flex-shrink:         ;
}

默认情况下flex元素都可以被压缩，但是当flex-shrink设置为0时，flex元素将始终保持其原始大小。

默认值: 1

注解: 不支持负数。

flex-basis

该属性和宽度和高度属性取相同的值。并且在flex其它属性分配剩余空间前，初始化指定flex元素的尺寸。

.flex-item {
  -webkit-flex-basis: auto | ; /* Safari */
  flex-basis:         auto | ;
}

flex-basis指定了第四个flex元素的初始化尺寸。

默认值: auto

注解: 这里的auto值命名问题将在未来被修复。

flex

这个属性是flex-grow, flex-shrink 和 flex-basis的缩写形式。除了其它值之外，它也可以被设置为auto (1 1 auto)和none (0 0 auto).

.flex-item {
  -webkit-flex: none | auto | [  ? ||  ]; /* Safari */
  flex:         none | auto | [  ? ||  ];
}

默认值: 0 1 auto

注解：相比独立的组件属性，W3C更鼓励使用flex简写形式，因为简写形式重置了所有不具体的属性来让它变得更通用。

align-self

align-self属性可以用来重写单个flex元素的默认值和align-items设置的值。具体可以参照align-items。

.flex-item {
  -webkit-align-self: auto | flex-start | flex-end | center | baseline | stretch; /* Safari */
  align-self:         auto | flex-start | flex-end | center | baseline | stretch;
}

第3和第4个flex元素被 align-self 属性重写了原有值。

默认值: auto

注解: align-self: auto使该元素继承父元素上align-items设置的值，如果没有父类，那么默认为拉伸。

#flex元素注意事项

float,clear和vertical-align在flex元素上没有作用。所以不要在flow元素上使用。

Flexbox

这就是你可以运用的不同的flex属性和发现flexbox布局强大的地方。组合几个不同布局就可以构造复杂的布局。

实例:
1.Flexbox Properties Demonstration by Dimitar (@justd) on CodePen
2.github代码链接