WebGIS加油站

Appearance

说明

介绍了有关弹性盒子的所有内容,重点介绍了父元素(flex container)和子元素(flex items)的所有可能属性。

flexbox-poster

1. 背景 ​

The Flexbox Layout旨在提供一种更有效的方法来布置、对齐和分配容器中物品之间的空间,即使它们的大小未知或动态。背后的主要思想是使容器能够更改其宽度/高度(和顺序)以最好地填充可用空间。

2. 基础和术语 ​

由于flexbox是一个完整的模块,而不是一个属性,因此它涉及很多事情,包括其整个属性集。其中一些应设置在容器(父元素上, flex container),而其他容器则要设置在子元素(flex items)上。“常规”布局基于block和inline, 而弹性布局基于“flex-flow directions”。

1.png

  • main axis：Flex 父元素的主轴是指子元素布局的主要方向轴，它由属性flex-direction来确定主轴是水平还是垂直的，默认为水平轴。
  • main-start | main-end ：分别表示主轴的开始和结束，子元素在父元素中会沿着主轴从main-start到main-end排布。
  • main size：单个项目占据主轴的长度大小。
  • cross axis：交叉轴，与主轴垂直。
  • cross-start | cross-end：分别表示交叉轴的开始和结束。子元素在交叉轴的排布从cross-start开始到cross-end。
  • cross size：子元素在交叉轴方向上的大小。

3. 弹性盒子属性 ​

3.1 父元素(flex container) ​

3.1.1 display ​

想要使用flex布局，首先需要给父元素指定为flex布局，这样容器内的元素才能实现flex布局。

css
.container {
  display: flex; /* or inline-flex */
}

2.png

3.1.2 flex-direction ​

主轴方向，它决定了容器内元素排列方向, 可能值有：row | row-reverse | column | column-reverse。

css
.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

3.png

  • row (默认):从左到右 ltr; 从右到左 rtl
  • row-reverse: 从右到左 ltr; 从左到右 rtl
  • column: 与 row 但从上到下
  • column-reverse: 与 row-reverse 但从下到上

3.1.3 flex-wrap ​

容器内元素是否可以换行，它有三个属性值：nowrap | wrap | wrap-reverse。

css
.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

4.png

  • nowrap(默认值):所有弹性项目将在一行上
  • wrap: 弹性项目将从上到下包裹到多行。
  • wrap-reverse: 弹性项目将从下到上包裹到多行。

3.1.4 flex-flow ​

flex-flow 是 flex-direction 属性和flex-wrap属性的简写，默认为:flex-flow:row nowrap，用处不大，最好还是分开来写。

css
.container {
    flex-flow: <flex-direction> <flex-wrap>;
}

3.1.5 justify-content ​

元素在主轴的对齐方式，它有五个属性值：flex-start | flex-end | center | space-between | space-around。

css
.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

5.png

  • flex-start(默认值):项目在挠曲方向开始时打包。
  • flex-end: 物品在弯曲方向的末端包装。
  • start: 物品包装在 writing-mode 方向。
  • end: 物品包装在物品的末端 writing-mode 方向。
  • left: 物品朝容器的左边缘包装,除非这对 flex-direction, 然后它的行为就像 start。
  • right: 物品包装在容器的右边缘,除非这对 flex-direction, 然后它的行为就像 end。
  • center: 项目沿线居中
  • space-between: 项目在该行中平均分布;第一项在起跑线上,最后一项在终点线上
  • space-around: 项目在行中均匀分布,周围空间相等。请注意,从视觉上看,这些空格是不相等的,因为所有项目在两侧都有相等的空格。第一项在容器边缘上有一个空间单位,而在下一项之间有两个空间单位,因为该下一个项目具有自己的适用间距。
  • space-evenly: 分配项目,以使任何两个项目(和边缘空间)之间的间距相等。

3.1.5 align-items ​

元素在交叉轴上的对齐方式，它有五个属性值：flex-start | flex-end | center | baseline | stretch.

css
.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

6.png

  • stretch(默认值):拉伸以填充容器(仍然尊重最小宽度/最大宽度)
  • flex-start / start / self-start: 项目放置在横轴的起点。这些之间的区别是微妙的,是关于尊重 flex-direction 规则或 - **writing-mode 规则。
  • flex-end / end / self-end: 项目放置在横轴的末端。区别再次是微妙的,是关于尊重的 flex-direction 规则与。writing-mode 规则。
  • center: 项目以交叉轴为中心
  • baseline: 项目对齐,例如其基准对齐

3.1.6 align-content ​

多根轴线对齐方式。如果元素只有一根轴线，该属性不起作用。它有六个属性值：flex-start | flex-end | center | space-between | space-around | stretch.

css
.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

7.png

  • normal(默认值):项目打包在其默认位置,好像没有设置任何值一样。
  • flex-start / start: 包装到容器开始处的物品。(更多支持) flex-start 荣誉 flex-direction 呢 start 荣誉 writing-mode 方向。
  • flex-end / end: 包装在容器末端的物品。(更多支持) flex-end 荣誉 flex-direction 结束荣誉 writing-mode 方向。
  • center: 以容器为中心的物品
  • space-between: 物品均匀分布;第一行在容器的开头,而最后一行在末尾
  • space-around: 项目均匀分布,每行周围空间相等
  • space-evenly: 项目均匀分布,周围空间相等
  • stretch: 线条伸展以占据剩余空间

3.1.7 gap, row-gap, column-gap ​

项目之间的空间。它适用该间距 仅在项目之间 不在外边缘。

css
.container {
  display: flex;
  ...
  gap: 10px;
  gap: 10px 20px; /* row-gap column gap */
  row-gap: 10px;
  column-gap: 20px;
}

8.png

3.2 子元素（items container） ​

3.2.1 order ​

用来定义项目的排列顺序。数值越小，排列越靠前，默认为0。

css
.item {
  order: 5; /* default is 0 */
}

9.png

3.2.2 flex-grow ​

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

css
.item {
  flex-grow: 4; /* default 0 */
}

10.png

3.2.3 flex-shrink ​

定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

css
.item {
  flex-shrink: 4; /* default 1 */
}

2.2.4 flex-basis ​

定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。

css
.item {
  flex-basis:  | auto; /* default auto */
}

2.2.5 flex ​

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，后两个属性可选。默认值为：flex:0 1 auto。

2.2.6 align-self ​

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

css
.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

11.png

4. 前缀 ​

scss
@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}
@mixin order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
}
.wrapper {
  @include flexbox();
  .item {
    @include flex(1 200px);
    @include order(2);
  }
}

参考资料与更多内容：

  1. MDN Flexbox
  2. 菜鸟教程-Flex布局教程

Copyright © 2025 LZUGIS