参考文献

  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”.

<html>
<style>
#flex-container {background-color: red;display: flex;width: 50px;flex-direction: row;
}#flex-container > .flex-item {flex: 1 4 auto;background-color: blue;
}#flex-container > .raw-item {flex: 1 0 auto;background-color: green;
}
</style>
<div id="flex-container"><div class="flex-item" id="flex">Flex box</div><div class="raw-item" id="raw">Raw2 box</div>
</div>
</html>

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属性学习笔记相关推荐

html5 scrollheight,JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记...
全文参考:https://github.com/iuap-design/blog/issues/38 .MDN clientHeight,只读 clientHeight可以用公式 CSS height ...
html 滚动条 scrolltop scrollheight,JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记...
全文参考:https://github.com/iuap-design/blog/issues/38 .MDN clientHeight,只读 clientHeight可以用公式 CSS height ...
狂神css3笔记,【CSS】CSS3学习笔记（一）——选择器
✨CSS 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不 ...
HTML、CSS、JavaScript学习笔记图文并茂案例详实（再次系统学习-持续更新）
HTML学习笔记 2020/7/11 P1~P31 HTML基础知识点 2020/7/12 P31~P92 P31~P61 HTML基础 P62~P92 CSS基础 2020/7/13 P93~P11 ...
HTML+CSS前端开发学习笔记
HTML+CSS 学习路线: 1.HTML 1.1基础概念 web标准: 基本结构标签: html骨架: <!DOCTYPE>标签:文档类型的声明标签 <!DOCTYPE html& ...
HTML、CSS、JavaScript 学习笔记
HTML-CSS 块级元素和内联元素 HTML div 和span HTML框架 HTML 符号实体参考手册 HTML 速查列表 HTML 基本文档基本标签Basic Tags 文本格式化Forma ...
CSS - Flex属性 - flex-grow / flex-shrink / flex-basis
用css3的flex好久了,虽然用的没问题,但还是很纠结,其他属性大都明白,但是flex-grow.flex-shrink.flex-basis始终搞不清,最经搜集了大量的资料,总算是明白了. 网上大 ...
flex布局学习笔记
前端笔试面试经常会问到:不定宽高如何水平垂直居中.最简单的实现方法就是flex布局,父元素加上如下代码即可: display: flex; justify-content: center; align ...
常见的CSS字体样式属性/font-size/font-family/font-weight/font-style/font综合属性/@font-face属性/学习笔记
一.常见的CSS字体样式属性 1.font-size属性:用于设置字体字号该属性的值有相对长度单位:em(相对当前对象内文本字体尺寸)px(像素,最常用) 绝对长度单位:in(英寸)cm(厘米)m ...

css flex属性学习笔记

一些简写模式

单个数字

Two-value syntax:

2021年3月18日更新

css flex属性学习笔记相关推荐

最新文章

热门文章