css之flex布局

主轴和交叉轴

主轴由flex-direction定义，可以取 4 个值：

row
row-reverse
column
column-reverse

交叉轴垂直于主轴

如果flex-direction (主轴) 设成了 row 或者 row-reverse 的话，交叉轴的方向就是沿着列向下的

理解主轴和交叉轴的概念对于对齐 flexbox 里面的元素是很重要的；flexbox 的特性是沿着主轴或者交叉轴对齐之中的元素

起始线和终止线

如果 flex-direction 是 row ，并且我是在书写英文，那么主轴的起始线是左边，终止线是右边。用起始和终止来描述比左右更合适，这会对你理解其他相同模式的布局方法（例如：CSS Grid Layout）起到帮助的作用

Flex容器的默认属性

把容器的display属性值改为flex或者inline-flex，就可以创建一个flex容器。容器中的直系子元素就会变为flex元素 所有 CSS 属性都会有一个初始值，所以 flex 容器中的所有 flex 元素都会有下列行为

flex-direction:row 主轴为row，即子元素横向排列
align-items:stretch 子元素在交叉轴方向被拉伸
flex:0 1 auto 子元素在主轴方向上不能拉伸，只能缩放，大小自适应
flex-wrap:nowrap 超出部分不会换行

Flex子元素的属性（作用在主轴上）

需要先了解一下「可用空间(available space)」这个概念,这几个flex属性的作用其实就是改变了容器中的可用空间的行为。换句话说，就是如何分配容器在主轴方向或者交叉轴方向上的可用空间

flex-grow 沿主轴方向增长尺寸，用数字代表权重。如果有其他元素也被允许延展，那么他们会根据权重大小各自占据可用空间的一部分
flex-shrink 如果容器中没有足够空间进行排列，就缩放它所占的空间，用数字代表权重
flex-basis 定义了元素在主轴方向上的尺寸
指定了 flex 元素在主轴方向上的初始大小
- auto 自适应：元素的主轴尺寸可在主轴方向弹性伸缩
- 100px 固定：100px
- 0 固定：元素的最小尺寸
当一个元素同时被设置了flex-basis(除值为auto外)和width(主轴是row)或height(主轴是column),flex-basis具有更高的优先级

简写形式一

你可能很少看到 flex-grow，flex-shrink，和 flex-basis 属性单独使用，而是混合着写在 flex 简写形式中。 Flex 简写形式允许你把三个数值按这个顺序书写 — flex-grow，flex-shrink，flex-basis

.box {
  display: flex;
}

.one {
  flex: 1 1 auto;
}

.two {
  flex: 1 1 auto;
}

.three {
  flex: 1 1 auto;
}

第一个数值是 flex-grow。赋值为正数的话是让元素增加所占空间。数字代表权重，可以看到上面的三个元素，flex-grow都是1，意味着权重相同。它们会把父元素的主轴剩余空间平均分
第二个数值是flex-shrink — 正数可以让它缩小所占空间，但是只有在 flex 元素总和超出主轴才会生效。数字代表权重
最后一个数值是 flex-basis；flex 元素是在这个基准值的基础上缩放的。auto代表元素的大小不是固定的

简写形式二

flex: initial flex: initial 相当于 flex: 0 1 auto （不能拉伸，收缩权重为1。整体的意思就是：主轴方向，元素尺寸可以缩放，并依次排列）
flex: auto 等同于 flex: 1 1 auto （可以拉伸，权重是1，可以收缩，权重是1。加上auto，整体的意思就是：主轴方向，元素可自由收缩，尽可能填满空间）
flex: none 和 flex: 0 0 auto 是一样的。元素既不能拉伸或者收缩
flex: 你在教程中常看到的 flex: 1 或者 flex: 2 等等。它相当于flex: 1 1 0 或者 flex: 2 1 0。元素可以在 flex-basis 为 0 的基础上伸缩。

疑问？

flex: 1 1 0
flex: 1 1 100px
flex: 1 1 auto 它们三者之间的最大区别

这三个属性的最大区别在于它们的初始尺寸和调整方式。 flex: 1 1 0 和 flex: 1 1 100px 的初始尺寸都是固定的，而 flex: 1 1 auto 的初始尺寸则是根据内容自动计算的。在调整方式上，flex: 1 1 0 和 flex: 1 1 100px 会收缩到固定的最小尺寸，而 flex: 1 1 auto 则会根据内容自动调整尺寸。