Flex Box 概念梳理

时间 2019-11-21 标签 flex box 概念梳理

前言

最近从新学习了一下Flex Box，把知识点和相关概念作了一个梳理。加深记忆，方便回顾。css

参考内容：html

Flex Box

Flexible Box 模型，一般被称为 flexbox，是一种一维的布局模型。浏览器

之因此说 flexbox 是一种一维的布局，是由于一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。做为对比的是另一个二维布局 CSS Grid Layout，能够同时处理行和列上的布局。布局

采用 Flex 布局的元素，称为 Flex 容器（flex container），容器里的子元素称为项目（item）。学习

1.容器

概念

从容器的角度来看，有两个不变的轴，主轴由 flex-direction 定义，另外一根轴始终垂直于它。默认定义是：flex

1) 水平方向的主轴（main axis），主轴开始位置称为main start，结束位置称为 main endflexbox

2) 垂直方向的交叉轴（cross axis），交叉轴开始位置称为 cross start，结束位置称为 cross endspa

相关属性
- flex-direction：定义了主轴方向。决定容器内项目排列方向，默认从左到右row。若是你选择了 row 或者 row-reverse，你的主轴将沿着 inline(行级)方向延伸；选择 column 或者 column-reverse 时，你的主轴会沿着上下方向延伸 — 也就是 block(块级) 排列的方向。ssr
```
flex-direction：row | row-reverse | column | column-reverse
复制代码
```
  特别注意：flex-direction设置后会引发主轴和交叉轴方向改变。

flex-wrap：决定容器主轴方向上项目是否换行，默认不换行nowrap。reverse表示逆序。3d
```
flex-wrap: nowrap | wrap | wrap-reverse;
复制代码
```

flex-flow：是flex-direction 和flex-wrap属性的简写。默认为：row nowrap。
```
flex-flow: <flex-direction> || <flex-wrap>;
复制代码
```

justify-content：决定容器内项目在主轴上对齐方式。默认左对齐 flex-start。

justify-content: flex-start | flex-end | center | space-between | space-around;
/**
* flex-start（默认值）：左对齐。项目堆放在容器主轴开始位置(main start)；
* flex-end：右对齐。项目堆放在容器主轴结束位置(main end)；
* center： 居中。项目沿着主轴居中排列；
* space-between：两端对齐，项目之间的间隔都相等。
* space-around：每一个项目两侧的间隔相等。因此，项目之间的间隔比项目与边框的间隔大一倍。
**/
复制代码

align-items：决定容器内项目在交叉轴上对齐方式。默认为stretch。

align-items: flex-start | flex-end | center | baseline | stretch;
/**
* flex-start：交叉轴的起点对齐。
* flex-end：交叉轴的终点对齐。
* center：交叉轴的中点对齐。
* baseline: 项目的第一行文字的基线对齐。
* stretch（默认值）：若是项目未设置高度或设为auto，将占满整个容器的高度。
**/
复制代码

align-content：决定容器内项目在交叉轴上内容与剩余空间对齐方式。默认为 stretch。

特别注意：该属性只对设置了`flex-wrap:wrap`的容器生效，而且容器里的元素构成了多行。

align-content: flex-start | flex-end | center | space-between | space-around | stretch;
/**
* flex-start：与交叉轴的起点对齐。
* flex-end：与交叉轴的终点对齐。
* center：与交叉轴的中点对齐。
* space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
* space-around：每根轴线两侧的间隔都相等。因此，轴线之间的间隔比轴线与边框的间隔大一倍。
* stretch（默认值）：轴线占满整个交叉轴。
**/
复制代码

案例参考地址：codepen.io/pen/

2.项目

概念

项目默认沿主轴排列。单个项目占据的主轴空间叫作main size，占据的交叉轴空间叫作cross size。
相关属性
- order：定义项目在容器主轴方向上的排列顺序，数值越小排列越靠前。默认为 0 。
```
order: <integer>;
复制代码
```

flex-grow：定义项目基于 flex-basis 放大比例，默认为 0 ，即使容器存在剩余空间，也不放大。不容许负值。

剩余空间：元素占据完容器空间后的布局空白

flex-grow: <number>; /* default 0 */
/** * 若是全部项目的flex-grow属性都为1，则它们将等分剩余空间（若是有的话）。 * 若是一个项目的flex-grow属性为2，其余项目都为1，则前者占据的剩余空间将比其余项多一倍。 **/
复制代码

flex-shrink：定义项目在容器空间不足时的基于 flex-basis 缩小比例，默认为1，不容许负值。容器空间不足时该项目要缩小，而且项目内容会换行。只有在flex元素总和超出主轴才会生效。

flex-shrink: <number>; /* default 1 */
/** * 若是全部项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。 * 若是一个项目的flex-shrink属性为0，其余项目都为1，则空间不足时，前者不缩小。 **/
复制代码

flex-basis：能够理解成设置项目默认大小。定义项目分配多余空间以前，在主轴上占据的空间。默认为auto，即项目内容大小。
```
flex-basis: <length> | auto; /* default auto */
复制代码
```
若是容器内全部项目大小总和超过容器，不设置 wrap 的状况下会溢出容器：

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

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

flex 有几种预约义的值：
- flex: initial 是把flex元素重置为Flexbox的初始值，它至关于 flex: 0 1 auto。
- flex: auto 等同于 flex: 1 1 auto,代表元素既能够拉伸也能够收缩。
- flex: none 能够把flex元素设置为不可伸缩。它和设置为 flex: 0 0 auto 是同样的。
- flex: <positive-number> 常看到的 flex: 1 或者 flex: 2 等等。它至关于flex: 1 1 0或 flex:2 2 0。元素能够在以 flex-basis为0的基础上伸缩。
建议优先使用这个属性，而不是单独写三个分离的属性，由于浏览器会推算相关值。
align-self：用于设置单个项目在交叉轴上对齐方式，可覆盖容器的 align-items属性，默认为 auto。若是值为auto，则计算值为父元素的 ' align-items ' 值，不然为指定值。
```
align-self: auto | flex-start | flex-end | center | baseline | stretch;
复制代码
```

3.总结

以上把 Flex box 基本知识点作了大致的梳理，具体实战案例后面再更。。。

注：题图出处flexgrow