乐趣区

关于前端:CSS-Flexbox-布局

jiezi

CSS 弹性盒子 Flexbox 布局

Flexbox（弹性盒子）是 CSS3 中引入的一种弱小且兼容性好的布局办法。应用 flexbox，能够很容易地解决好页面上的元素布局，并创立能够主动放大和放大的动静用户界面。

flex 盒子模式

只有在一个元素的 CSS 中增加 display: flex;，就能够应用其它 flex 属性来构建响应式页面了。

#box-container {display: flex;}

行，列 Row Culomn

给元素增加 display: flex 属性能够让它变成 flex 容器，而后能够让元素的我的项目排列成行或列。只有给父元素增加 flex-direction 属性，并把属性值设置为 row 或 column，即可横向排列或纵向排列它的所有子元素。创立一行将使子项程度对齐，创立一列将使子项垂直对齐。

flex-direction 的其余可选值还有 row-reverse 和 column-reverse。

留神： flex-direction 的默认值为 row。

#box-container {
  display: flex;
  flex-direction: row; 
  /* flex-direction: column */
}

父元素对齐 Align

子元素排列的方向被称为 main axis（主轴）。对于行，主轴程度贯通每一个我的项目；对于列，主轴垂直贯通每一个我的项目。

对于如何沿主轴线排放 flex 我的项目，有几种抉择。很罕用的一种是 justify-content: center;：即 flex 子元素在 flex 容器中居中排列。其余抉择包含：

  • flex-start：从 flex 容器的起始地位开始排列我的项目。对行来说是把我的项目移至右边，对于列是把我的项目移至顶部。如未设置 justify-content 的值，那么这就是默认值。
  • flex-end：从 flex 容器的终止地位开始排列我的项目。对行来说是把我的项目移至左边，对于列是把我的项目移至底部。
  • space-between：我的项目间保留肯定间距地沿主轴居中排列。第一个和最初一个我的项目被搁置在容器边际。例如，在行中第一个我的项目会紧贴着容器右边，最初一个我的项目会紧贴着容器左边，而后其余我的项目平均排布。
  • space-around：与 space-between 类似，但头尾两个我的项目不会紧贴容器边缘，所有我的项目之间的空间平均排布。
  • space-evenly：头尾两个我的项目不会紧贴容器边缘，所有我的项目之间的空间平均排布。
#box-container {justify-content: center;}

Flex 容器中，与主轴垂直的叫做 cross axis（穿插轴）。行的穿插轴是垂直的，列的穿插轴是程度的。

CSS 中的 align-items 属性用来定义 flex 子元素沿穿插轴的对齐形式。对行来说，定义的是元素的高低对齐形式；对列来说，是定义元素的左右对齐形式。

align-items 的可选值包含：

  • flex-start：从 flex 容器的起始地位开始对齐我的项目。对行来说，把我的项目移至容器顶部；对列来说，是把我的项目移至容器右边。
  • flex-end：从 flex 容器的终止地位开始对齐我的项目。对行来说，把我的项目移至容器底部；对列来说，把我的项目移至容器左边。
  • center：把我的项目居中搁置。对行来说，垂直居中（我的项目间隔顶部和底部的间隔相等）；对列来说，程度居中（我的项目间隔右边和左边的间隔相等）。
  • stretch：拉伸我的项目，填满 flex 容器。例如，排成行的我的项目从容器顶部拉伸到底部。如未设置 align-items 的值，那么这就是默认值。
  • baseline：沿基线对齐。基线是文本相干的概念，能够认为它是字母排列的下端基准线。
#box-container {align-items: center;}

换行 Wrap

CSS flexbox 有一个把 flex 子元素拆分为多行（或多列）的个性。

默认状况下，flex 容器会调整我的项目大小，把它们都塞到一起。对于行来说，所有我的项目都会在一条直线上。

不过，应用 flex-wrap 属性能够使我的项目换行展现。这意味着多进去的子元素会被移到新的行或列。换行产生的断点由子元素和容器的大小决定。

换行方向的可选值有这些：

  • nowrap：默认值，不换行。
  • wrap：如果排列以行为基准，就将行从上往下排列；如果排列以列为基准，就将列从左往右排列。
  • wrap-reverse：如果排列以行为基准，就将行从下往上排列；如果排列以列为基准，就将列从右往左排列。
#box-container {flex-wrap: wrap;}

膨胀 Shrink

下面提到的属性都是利用于 flex 容器（flex 子元素的父元素）的。除此之外，flex 子元素也有很多实用属性。

首先介绍的是 flex-shrink 属性。应用之后，如果 flex 容器太小，则子元素会主动放大。当容器的宽度小于外面所有子元素的宽度之和时，所有子元素都会主动压缩。

子元素的 flex-shrink 承受数值作为属性值。数值越大，则该元素与其余元素相比会被压缩得更厉害。比方，一个我的项目的 flex-shrink 属性值为 1，另一个我的项目的 flex-shrink 属性值为 3，那么后者相比前者会受到 3 倍压缩。

#box-1 {flex-shrink: 1;}
#box-2 {flex-shrink: 2;}

扩充 Grow

与 flex-shrink 绝对的是 flex-grow。flex-grow会在容器太大时对子元素作出调整。

如果一个我的项目的 flex-grow 属性值为 1，另一个我的项目的 flex-grow 属性值为 3，那么值为 3 的一个会较另一个扩充 3 倍。

#box-1 {flex-grow: 1;}
#box-2 {flex-grow: 2;}

初始大小 Basis

flex-basis 属性定义了在应用 CSS 的 flex-shrink 或 flex-grow 属性对元素进行调整前，元素的初始大小。

flex-basis 属性的单位与其余示意尺寸的属性的单位统一（px、em、% 等）。如果值为 auto，则我的项目的尺寸随内容调整。

#box-1 {flex-basis: 10em;}
#box-2 {flex-basis: 20em;}

简写 Shorthand

下面几个 flex 属性有一个简写形式。flex-grow、flex-shrink和 flex-basis 属性能够在 flex中一并设置。

例如，flex: 1 0 10px; 会把我的项目属性设为 flex-grow: 1;、flex-shrink: 0; 以及 flex-basis: 10px;。

属性的默认设置是 flex: 0 1 auto;。

#box-1 {flex: 2 2 150px;}
#box-2 {flex: 1 1 150px;}

重新排列 Rearrange

order 属性通知 CSS flex 容器里子元素的程序。默认状况下，我的项目排列程序与源 HTML 文件中程序雷同。这个属性承受数字作为参数，能够应用正数。

#box-1 {order: 2;}
#box-2 {order: 1;}

子元素对齐形式 Align

align-self。这个属性容许调整单个子元素本人的对齐形式，而不会影响到全副子元素。因为 float、clear 和 vertical-align 等调整对齐形式的属性都不能利用于 flex 子元素，所以这个属性显得非常有用。

align-self 可设置的值与 align-items 的一样，并且它会笼罩 align-items 所设置的值。

#box-1 {align-self: center;}
#box-2 {align-self: flex-end;}
退出移动版