MUI 基本用法笔记
使用 ... 作为文本过长的提示符号
<!-- 使用 mui-ellipsis 类即可 -->
<p class="mui-ellipsis">
Example subtitle. The quick brown fox jumps over the lazy dog. Example subtitle. The quick brown fox jumps over the lazy dog.
</p>flex 布局
主轴与交叉轴
在 flex 布局中, 主轴由 flex-direction 定义, 垂直于主轴的即为交叉轴
flex-direction 可能的值:
| val | desc |
|---|---|
row | 沿行向为主轴 (一般情况下是水平) |
row-reverse | row, 但是正方向的相反 |
column | 沿列向为主轴 (一般情况下是垂直) |
column-reverse | column, 但是正方向的相反 |
起始线和终止线
flex-direction 为非 reverse 的起始线和终止线分别位于主轴的文本其实方向端和另一端
例如, flex-direction: row; 并且书写了英文的起始线位于 flexbox 最左侧, 阿拉伯文则为最右侧
reverse 则调换起始线和终止线
flex 容器
为了创建 flex 容器, 我们把一个容器的 display 属性值改为 flex 或者 inline-flex.
完成这一步之后, 容器中的直系子元素就会变为 flex 元素. 由于所有 CSS 属性都会有一个初始值, 所以 flex 容器中的所有 flex 元素都会有下列行为:
- 元素排列为一行 (flex-direction 属性的初始值是 row)
- 元素从主轴的起始线开始
- 元素不会在主维度方向拉伸，但是可以缩小
- 元素被拉伸来填充交叉轴大小
flex-basis属性为autoflex-wrap属性为nowrap
如果有太多元素超出容器, 它们会溢出而不会换行.
如果一些元素比其他元素高, 那么元素会沿交叉轴被拉伸来填满它的大小.
用 flex-wrap 实现多行 flex 容器
为了实现多行效果, 请为属性 flex-wrap 添加一个属性值 wrap.
由于 flex-wrap 的值设置为 wrap, 所以项目的子元素换行显示. 若将其设置为 nowrap, 这也是初始值, 它们将会缩小以适应容器, 因为它们使用的是允许缩小的初始 Flexbox 值.
如果项目的子元素无法缩小，使用 nowrap会导致溢出, 或者缩小程度还不够小.
简写属性 flex-flow
你可以将两个属性 flex-direction 和 flex-wrap 组合为简写属性 flex-flow. 第一个指定的值为 flex-direction, 第二个指定的值为 flex-wrap.
flex 元素
flex 元素上的属性
可用空间
假设在 1 个 500px 的容器中, 我们有 3 个 100px 宽的元素, 那么这 3 个元素需要占 300px 的宽，剩下 200px 的可用空间. 在默认情况下, flexbox 的行为会把这 200px 的空间留在最后一个元素的后面. 
flex-basis
flex-basis 定义了该元素的空间大小, flex 容器里除了元素所占的空间以外的富余空间就是可用空间.
该属性的默认值是 auto
浏览器会检测这个元素是否具有确定的尺寸, 在上面的例子中，所有元素都设定了宽度（width）为 100px，所以 flex-basis 的值为 100px.
也就是说, 若 flex 元素的 width 和 flex-basis 均未指定或后者为 auto, flex-basis 的值采用元素内容的尺寸.
即 我们给只要给 flex 元素的父元素声明 display: flex;, 所有子元素就会排成一行, 且自动分配大小以充分展示元素的内容.
flex-grow
flex-grow 若被赋值为一个正整数, flex 元素会以 flex-basis 为基础, 沿主轴方向增长尺寸.
注意, flex-grow 默认值为 0.
flex-grow 代表了在 flex-basis 分配后, 将可用空间分配给指定元素的份数
即每个子元素额外分配到的为起父 flexbox 所有子元素的 (flex-grow / sum(flex-grow)) * 可用空间.
flex-shrink
与 flex-grow 类似, flex-shrink 是用于处理 flex 元素收缩的问题的.
如果我们的容器中没有足够排列 flex 元素的空间, 那么可以把 flex 元素flex-shrink 属性设置为正整数来缩小它所占空间到 flex-basis 以下.
与 flex-grow 属性一样，可以赋予不同的值来控制 flex 元素收缩的程度, 给 flex-shrink 属性赋予更大的数值可以比赋予小数值的同级元素收缩程度更大.
当 flex-shrink 为 0 时, 即使容器空间不足也不会缩小, 可能会溢出.
当 flex-shrink >= 1 且 可用空间 < 0 时, 每个子元素额外分配到的为起父 flexbox 所有子元素的 (flex-shrink / sum(flex-shrink)) * 可用空间, 且分配到的空间恒为负空间.
flex 属性的简写
flex 简写形式 (将三个数值按这个顺序书写): flex-grow flex-shrink flex-basis
flex 几种预定义的值:
| value | equal | desc |
|---|---|---|
flex: initial | flex: 0 1 auto | flex-grow 的值为 0, 所以 flex 元素不会超过它们 flex-basis 的尺寸. flex-shrink 的值为 1, 所以可以缩小 flex 元素来防止它们溢出. flex-basis 的值为 auto. flex 元素尺寸可以是在主维度上设置的, 也可以是根据内容自动得到的. |
flex: auto | flex: 1 1 auto | 和上面的 flex:initial 基本相同, 但是这种情况下, flex 元素在需要的时候既可以拉伸也可以收缩. |
flex: none | flex: 0 0 auto | 元素既不能拉伸或者收缩，但是元素会按具有 flex-basis: auto 属性的 flexbox 进行布局. |
flex: <positive-number> | flex: <positive-number> 1 0 | flex: 1, flex: 2 等相当于 flex: 1 1 0, flex: 2 1 0 以此类推. 元素可以在 flex-basis: 0 的基础上伸缩. |
元素间的对齐和空间分配
align-items
使元素在交叉轴方向对齐, 这个属性的初始值为 stretch, 这就是为什么 flex 元素会默认被拉伸到最高元素的高度.
| value | desc |
|---|---|
stretch | 撑满整个 交叉轴 |
flex-start | 紧贴 交叉轴 起始线对齐 |
flex-end | 紧贴 交叉轴 终止线对齐 |
center | 居中对齐 |
justify-content
使元素在主轴方向上对齐, 主轴方向是通过 flex-direction 设置的方向. 初始值是 flex-start.
| value | desc |
|---|---|
stretch | 无效 |
flex-start | 紧贴 主轴 起始线对齐 |
flex-end | 紧贴 主轴 终止线对齐 |
center | 居中对齐 |
space-around | 主轴两侧与元素中间使用空区域对齐, 各元素到最小可显示完全的大小 |
space-between | 与 space-around 类似, 但是 主轴 起始线 与 终止线 两侧不再有空区域, 而是直接紧贴元素 |