css篇（002）—— Flex布局

念念不忘
851 阅读7分钟

一、flex布局是什么

Flexbox的布局正式名称：CSS Flexible Box Layout Module， 是CSS3中新的布局模块，旨在改善容器中的项目对齐，方向和顺序，即使它们的尺寸是动态的甚至是未知的。flex容器的主要特征是能够修改其子项的宽度或高度，以在不同屏幕尺寸上以最佳方式填充可用空间。

许多设计人员和开发人员发现此flexbox布局更易于使用，因为元素的定位更简单，因此可以用更少的代码来实现更复杂的布局，从而简化开发过程。Flexbox布局算法基于方向，这与基于垂直和水平的块或行内布局不同。这种Flexbox布局应用于小型应用程序组件，而新的CSS网格布局模块 正在出现以处理大规模布局。

二、基本概念

要使用flex布局，只需要在父html元素设置diaplay属性为flex即可

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

或者，如果您希望将其显示为嵌入式元素，请使用

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

任何一个容器都可以指定为flex布局，采用flex布局的元素我们称为Flex容器（flex container）,它的所有直接子元素都自动变为flex项目（flex item） 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

三、容器属性

3.1 弹性方向 flex-direction

此属性通过设置弹性容器主轴的方向来指定弹性项目在弹性容器中的布局方式。它们可以在两个主要方向上进行布局，例如水平行或垂直列：

.flex-container {
  -webkit-flex-direction: row | row-reverse | column | column-reverse; /_ Safari _/
  flex-direction:         row | row-reverse | column | column-reverse;
}

取值：

  • row(默认值）: 主轴为水平方向，起点在左端，flex item在上下文中从左到右排成一排；
  • row-reverse: 主轴为水平方向，起点在右端, flex item在上下文中从右到左排成一排；
  • column: 主轴为垂直方向，起点在上沿，flex item在上下文中从上到下堆叠在一列；
  • column-reverse: 主轴为垂直方向，起点在上沿，flex item在上下文中从下到上堆叠在一列。

3.2 flex-wrap属性

最初的flexbox概念是在一行中设置其项目的容器。该flex-wrap属性控制flex容器是以单行还是多行布置其项目，以及新行的堆叠方向。

.flex-container {
  -webkit-flex-wrap: nowrap | wrap | wrap-reverse; /_ Safari _/
  flex-wrap:         nowrap | wrap | wrap-reverse;
}

取值：

  • nowrap(默认): 不换行，Flex项目显示在一行中，默认情况下会缩小它们以适应Flex容器的宽度；
  • wrap: 换行，从左到右和从上到下，弹性项目将显示在多行中；
  • wrap-reverse：换行，从左到右和从下到上，弹性项目将显示在多行中。

3.3 flex-flow属性

flex-flow属性是设置flex-direction属性和flex-wrap属性的简写， 默认值为row nowrap。

.flex-container {
  -webkit-flex-flow: <flex-direction> || <flex-wrap>; /_ Safari _/
  flex-flow: <flex-direction> || <flex-wrap>;
}

3.4 justify-content属性

justify-content属性使flex项目沿着flex容器当前行的主轴对齐。当一行中的所有伸缩项目都不灵活或已达到最大大小时，它有助于分配剩余的可用空间。

.flex-container {
  -webkit-justify-content: flex-start | flex-end | center | space-between | space-around; /_ Safari _/
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

取值：

  • flex-start(默认值): flex item在上下文中与弹性容器的左侧对齐;
  • flex-end:flex item在上下文中与弹性容器的左侧对齐;
  • center：flex item在上下文中与弹性容器的中心对齐;
  • space-between：两端对齐，项目之间的间隔都相等，Flex项目以相等的间距显示，第一个和最后一个Flex项目与flex容器的边缘对齐；
  • space-around：每个项目两侧的间隔相等。在每个Flex项目（甚至第一个和最后一个Flex项目）周围均以相等的间距显示。

3.5 align-items属性

Flex项目可以在Flex容器的交叉轴上对齐方式，类似于justify-content但在主轴方向上。此属性为所有Flex项目（包括匿名项目）设置默认对齐方式。

.flex-container {
  -webkit-align-items: flex-start | flex-end | center | baseline | stretch; /_ Safari _/
  align-items: flex-start | flex-end | center | baseline | stretch;
}

具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下，取值：

  • flex-start：交叉轴的起点对齐；
  • flex-end：交叉轴的终点对齐；
  • center：交叉轴的中点对齐；
  • baseline: 项目的第一行文字的基线对齐；
  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

3.6 align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.flex-container {
  -webkit-align-content: flex-start | flex-end | center | space-between | space-around | stretch; /_ Safari _/
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

取值：

  • flex-start：与交叉轴的起点对齐。
  • flex-end：与交叉轴的终点对齐。
  • center：与交叉轴的中点对齐。
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch（默认值）：轴线占满整个交叉轴。

四、项目属性

4.1 order属性

order属性控制flex容器的子代出现在flex容器内的顺序。默认情况下，它们的顺序与最初在flex容器中添加的顺序相同。默认值为0，数值越小，排列越靠前。

.flex-item {
  -webkit-order: <integer>; /_ Safari _/
  order: <integer>;
}

4.2 flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

注意：负数无效

.flex-item {
  -webkit-flex-grow: <number>; /_ Safari _/
  flex-grow: <number>;
}

如上图所示，如果所有Flex项目的grow都设置为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

4.3 flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认情况下，所有弹性项目都可以缩小，但是如果我们将其设置为0 _（请勿收缩），它们将保持原始大小，默认值为1。

注意：负数无效

.flex-item {
  -webkit-flex-shrink: <number>; /_ Safari _/
  flex-shrink: <number>;
}

如果所有Flex项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

4.4 flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.flex-item {
  -webkit-flex-basis: <length> | auto; /_ Safari _/
  flex-basis: <length> | auto;
}

此属性采用与width和height属性相同的值，并在根据弹性系数分配可用空间之前指定弹性项目的初始主要尺寸。

4.5 flex属性

此属性是简写flex-grow，flex-shrink和flex-basis性能。除其他值外，还可以将其设置为auto（1 1 auto）和none（0 0 auto）。

默认值： 0 1 auto

.flex-item {
  -webkit-flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] /_ Safari _/
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

4.6 align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

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

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

参考文章

  1. www.ruanyifeng.com/blog/2015/0…
  2. scotch.io/tutorials/a…
avatar
文章
阅读
粉丝