YieldRay

css flexbox

January 15, 2023

https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Flexbox
https://developer.mozilla.org/docs/Web/CSS/CSS_flexible_box_layout
https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/

flex-direction

主轴

row (horizontal)
column (vertical)

flex-wrap

是否允许换行

nowrap (default)
wrap
wrap-reverse

justify/align - content/items


`justify`	沿主轴定位
`align`	沿交叉轴定位

https://developer.mozilla.org/docs/Web/CSS/justify-content
https://developer.mozilla.org/docs/Web/CSS/justify-items
https://developer.mozilla.org/docs/Web/CSS/align-content
https://developer.mozilla.org/docs/Web/CSS/align-items


`content`	指定这组元素在（整个）剩余空间的定位
`items`	指定元素在（元素自身）剩余空间内的位置

justify-items 为每个元素的 justify-self 指定默认值
align-items 为每个元素的 align-self 指定默认值

显然，在不允许换行的情况下，交叉轴上不会出现一组元素，此时 align-content 无效

justify/align - self

https://developer.mozilla.org/docs/Web/CSS/justify-self
https://developer.mozilla.org/docs/Web/CSS/align-self

flex-basis

指定元素的基础大小/尺寸（而无需 box-sizing: border-box）
在 flex-direction: row 下，相当于 width
在 flex-direction: column 下，相当于 height

flex-grow

指定元素在（容器）有剩余空间 时，元素分担增长尺寸的比例，默认值是 0

（每个元素）增长的尺寸 = 剩余空间 * （这个元素）根据比例得出百分比

剩余空间 = 容器尺寸 - 所有元素的基础尺寸（flex-basis）
根据比例得出百分比 = 这个元素的比例 / 所有元素的比例之和

flex-shrink

指定元素在（容器）溢出时，元素分担减小尺寸（收缩一词并不准确）的比例，默认值是 1

（每个元素）减小的尺寸 = 溢出空间 * （这个元素）根据比例得出百分比

溢出空间 = 容器尺寸 - 所有元素的基础尺寸（flex-basis）
其实和剩余空间的计算方法相同

由于默认值是 1，所以溢出时，每个元素都会收缩。对不应该收缩的元素指定 flex-shrink: 0 即可

此属性会受到元素指定的最小尺寸的影响，如 min-width
min-width 的优先级更高。一旦元素收缩到最小尺寸将不再收缩
一些元素有默认的最小尺寸，如 input[type="text"] 的最小尺寸是 170px-200px
要使这种元素也收缩，可以指定其 min-width: 0px

flex

css

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

place-items

css

place-items =
  <'align-items'> <'justify-items'>?

place-content

css

place-content =
  <'align-content'> <'justify-content'>?

place-self

css

place-self =
  <'align-self'> <'justify-self'>?

←Back to home

▲