CSS3中的Flex布局-猿码集

Flex布局是CSS3中新加入的一种布局方式，它可以方便地实现弹性、自适应布局。下面将对Flex布局进行详细介绍。

1. 容器属性

Flex布局中的容器是指应用Flex布局的父级元素，常用的容器属性有flex-direction、justify-content、align-items和flex-wrap。

1.1 flex-direction

flex-direction属性用于设置主轴的方向，取值有row、row-reverse、column和column-reverse四种。其中，row表示主轴方向为水平方向，起点在左端；row-reverse表示主轴方向为水平方向，起点在右端；column表示主轴方向为垂直方向，起点在上端；column-reverse表示主轴方向为垂直方向，起点在下端。

主轴是设置Flex布局时的方向，它的起点是由flex-direction属性确定的。


.container {
  display: flex;
  flex-direction: row; /* 主轴方向为水平方向，起点在左端 */
}

1.2 justify-content

justify-content属性用于设置主轴上的对齐方式，取值有flex-start、flex-end、center、space-between和space-around五种。其中，flex-start表示沿主轴起点对齐；flex-end表示沿主轴终点对齐；center表示沿主轴居中对齐；space-between表示均匀分布在主轴上，首尾不留空隙；space-around表示均匀分布在主轴上，首尾留空隙。

对齐方式的具体效果取决于容器的宽度和子元素的尺寸。


.container {
  display: flex;
  justify-content: center; /* 沿主轴居中对齐 */
}

1.3 align-items

align-items属性用于设置交叉轴上的对齐方式，取值有flex-start、flex-end、center、baseline和stretch五种。其中，flex-start表示沿交叉轴起点对齐；flex-end表示沿交叉轴终点对齐；center表示沿交叉轴居中对齐；baseline表示沿基线对齐；stretch表示占满整个交叉轴。

如果子元素在交叉轴方向上没有设定尺寸，则align-items: stretch所有元素将占满整个交叉轴空间。


.container {
  display: flex;
  align-items: center; /* 沿交叉轴居中对齐 */
}

1.4 flex-wrap

flex-wrap属性用于设置是否换行，取值有nowrap、wrap和wrap-reverse三种。其中，nowrap表示不换行；wrap表示换行，第一行在上方；wrap-reverse表示换行，第一行在下方。

每个元素在Flex布局中默认都是nowrap，即不换行。


.container {
  display: flex;
  flex-wrap: wrap; /* 换行且第一行在上方 */
}

2. 项目属性

Flex布局中的项目是指容器中的子元素，常用的项目属性有flex、order、align-self和flex-basis。

2.1 flex

flex属性是flex-grow、flex-shrink和flex-basis三个属性的简写。其中，flex-grow表示项目的放大比例，默认为0；flex-shrink表示项目的缩小比例，默认为1；flex-basis表示项目的基准尺寸，默认为auto。

flex的默认值为1，即flex-shrink为1，flex-grow为1，flex-basis为0%。


.item {
  flex: 1 0 auto; /* flex-grow: 1; flex-shrink: 0; flex-basis: auto; */
}

2.2 order

order属性用于设置项目的排列顺序，数值越小，排列越靠前。默认值为0。

order属性只对项目在容器中的顺序有影响，不会改变源代码中的排列顺序。


.item {
  order: 1; /* 该项目排列顺序为第二个 */
}

2.3 align-self

align-self属性用于设置单个项目在交叉轴上的对齐方式，取值与align-items相同。如果项目未显式设置align-self，则align-items属性将作为其默认值。

align-self优先级高于align-items，可以单独为某个项目设置对齐方式。


.item {
  align-self: center; /* 沿交叉轴居中对齐 */
}

2.4 flex-basis

flex-basis属性用于设置项目在主轴上的初始尺寸，取值可以是一个具体的长度值或百分比，也可以是auto（默认值）。

flex-basis可以单独为某个项目设置初始尺寸。


.item {
  flex-basis: 150px; /* 初始尺寸为150px */
}

3. Flex布局的实际应用

Flex布局可以用于实现多列等高、水平垂直居中、自适应布局等效果。下面介绍几个常见的示例。

3.1 多列等高布局

多列等高布局是指多个列的高度相同。常用于产品列表和新闻列表等。在传统布局中，一般需要使用JavaScript或额外的Hack解决。但是在Flex布局中，可以轻松实现。


.container {
  display: flex;
  flex-wrap: wrap; /* 换行 */
}
.item {
  flex-basis: calc(33.333% - 20px); /* 因为padding和margin会撑大box容器 */
  margin: 10px; /* 左右各留10px作为相邻列的间隔 */
}

以上代码将三个项目放置在一行中，并且使用了calc()函数计算宽度，使三个项目铺满整行。同时，使用margin设置相邻列的间隔，达到美观的效果。

3.2 水平垂直居中

水平垂直居中是指将元素在父级容器中水平垂直居中，这是Web开发中经常会遇到的一个问题。在传统布局中，需要使用把top和left都设置成50%再配合上负的margin值来实现，但这样又很麻烦，而在Flex布局中，只需要简单几行CSS代码就能轻松实现。


.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

以上代码使用justify-content和align-items属性将元素在父级容器中完美居中。

3.3 自适应布局

自适应布局是指页面在不同分辨率下具有适应性，常用于响应式设计。在传统布局中，常常需要使用@media查询或JavaScript来实现。但是在Flex布局中，只需要简单的几行CSS代码即可实现。


.container {
  display: flex;
  flex-wrap: wrap; /* 换行 */
}
.item {
  flex-basis: calc(50% - 20px);
  margin: 10px;
}
@media (min-width: 768px) {
  .item {
    flex-basis: calc(25% - 20px);
  }
}
@media (min-width: 1024px) {
  .item {
    flex-basis: calc(20% - 20px);
  }
}

以上代码使用@media查询实现了在不同分辨率下不同的自适应布局。在768px以下分辨率时每行放两个项目，每个项目占据50%的宽度，1024px以上分辨率时每行放五个项目，每个项目占据20%的宽度。

4. 总结

Flex布局是CSS3中的新特性，它可以方便地实现弹性、自适应布局。Flex布局中的容器属性包括flex-direction、justify-content、align-items和flex-wrap，项目属性包括flex、order、align-self和flex-basis。同时，Flex布局还可以用于实现多列等高、水平垂直居中、自适应布局等效果。对于前端开发工程师来说，掌握Flex布局是必不可少的。

CSS3中的Flex布局