css flex属性学习笔记
參考文獻
flex: 1 0calc((100% / min(var(--cx-active-view), var(--cx-max-views))) -var(--cx-split-gutter));
https://developer.mozilla.org/en-US/docs/Web/CSS/flex
容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。
項目默認沿主軸排列。單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size。
主要記住 “容器”、“項目”、“主軸（橫軸）”和“交叉軸（縱軸）”的意思和指向就行。
可以理解成x軸和y軸。
flex-direction 決定主軸的方向（即項目的排列方向）。它有4個可能的值 ：
row（默認值）：主軸為水平方向，起點在容器的左端。
row-reverse：主軸為水平方向，起點在容器的右端。
column：主軸為垂直方向，起點在容器的上沿。
column-reverse：主軸為垂直方向，起點在容器的下沿。
flex: 2;
如果只包含一個值，代表flew-grow
/* Three values: flex-grow | flex-shrink | flex-basis */
flex-grow屬性定義項目的放大比例，默認為0。
flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。
如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。
如果container容器設置的flex-wrap則不存在空間不足的情況，如果超過會自動換行。
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。
語法：
/* Keyword values */ flex: auto; flex: initial; flex: none;/* One value, unitless number: flex-grow */ flex: 2;/* One value, width/height: flex-basis */ flex: 10em; flex: 30%; flex: min-content;/* Two values: flex-grow | flex-basis */ flex: 1 30px;/* Two values: flex-grow | flex-shrink */ flex: 2 2;/* Three values: flex-grow | flex-shrink | flex-basis */ flex: 2 2 10%;/* Global values */ flex: inherit; flex: initial; flex: unset;一些簡寫模式
單個數字
- 1：In this case it is interpreted as flex: 1 1 0; the flex-shrink value is assumed to be 1 and the flex-basis value is assumed to be 0.
Two-value syntax:
- 第一個值：必須是數字，被解析成flex-grow
- 第二個值：要么是數字，被解析成flex-shrink, 要么代表width，被解析成flex-basis.
flex: auto - 相當于：
The item is sized according to its width and height properties, but grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container. This is equivalent to setting “flex: 1 1 auto”.
2021年3月18日更新
學習網站：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The Flexbox Layout (Flexible Box) module (a W3C Candidate Recommendation as of October 2017) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).
目的：提供一種更加高效的方式來進行布局，對齊和為container內的元素分配space, 即使這些元素的尺寸未知或者是動態變化的。
The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space or shrinks them to prevent overflow.
Flex layout的理念是，賦予容器能夠修改其元素寬度，高度和順序的能力，達到采用最佳方式填充容器可用空間的能力，并且在各個類型的設備和屏幕尺寸上均有良好的顯示效果。
Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based). While those work well for pages, they lack flexibility (no pun intended) to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).
Flex layout并不依賴于direction，這一點和普通的布局方式不同。比如Block是基于垂直方向，而inline基于水平方向。當一個復雜應用發生了orientation變化，尺寸變化，拉伸或縮小時，Block和Inline這種布局方式缺乏足夠的應對能力。
Items will be laid out following either the main axis (from main-start to main-end) or the cross axis (from cross-start to cross-end).
Flex items可以隨著 main axis 布局，也可以隨著 cross axis布局。
main axis – The main axis of a flex container is the primary axis along which flex items are laid out. Beware, it is not necessarily horizontal; it depends on the flex-direction property (see below).
Main axis的主軸：不需要一定是水平方向。主軸的方向取決于flex-direction屬性。
main-start | main-end – The flex items are placed within the container starting from main-start and going to main-end.
Flex items從main-start到main-end進行布局。
更多Jerry的原創文章，盡在：“汪子熙”:
總結
以上是生活随笔為你收集整理的css flex属性学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 零跑汽车 2023 年第一季度收益达 1
- 下一篇： SAP Spartacus split