CSS flexible box / grid layout

January 15, 2023

`display`

css

display =
  [ <display-outside> || <display-inside> ]         | ...

外部显示类型（outer display type）：决定主盒如何参与流布局。
内部显示类型（inner display type）：决定非替换元素生成的格式化上下文类型，即其后代盒子的布局方式。

当容器元素 display 为 [inline-]{flex,grid} 时，其子元素显然参与的不是流布局（而是flex或grid布局），故而此时子元素的外部显示类型无意义。
举个例子：子元素设置为 display:inline 和 display:block 效果相同。设置为 display:inline-flex 和 display:flex 效果相同。

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`	指定元素在（元素自身）剩余空间内的位置

content 指整个容器方向的空间（单数，一个容器）；items 为复数形式，指每个元素自己可占据的空间。
主轴，justify，默认为水平方向。这些属性在 grid 布局中具有相同的语义。

`{justify,align}-self`

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

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

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

`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'> ]

注意，在指定 flex 简写属性时：
省略 <flex-grow>时，默认值为 1
省略 <flex-shrink> 时，看是否指定了 <flex-basis>；若指定则 <flex-shrink> = 1，否则 <flex-shrink> = 0
省略 <flex-basis> 时，默认值为 0

作为单独属性时，flex-grow 默认值为 0，flex-shrink 默认值为 1

`place-items`

相当于同时指定 {justify,align}-items

css

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

`place-content`

相当于同时指定 {justify,align}-content

css

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

`place-self`

相当于同时指定 {justify,align}-self

css

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

`grid-template-{columns,rows}`

`grid-template-areas grid-area`

`grid-{column,row}[-{start,end}]`

`grid-auto-{columns,rows}`

`grid-auto-flow`

`grid`

←Back to home

This work is licensed under CC BY-NC-SA 4.0

NickName

E-Mail

Website

Comments

Latest
Oldest
Hottest

YieldRay

CSS flexible box / grid layout

Preview: