CSS基础-Flexbox

flexbox 

是一种一维的布局模型，它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。

说 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。
作为对比的是另外一个二维布局 CSS Grid Layout，可以同时处理行和列上的布局。

 

主轴 flex-direction

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

• row 行
• row-reverse 反向行
• column 列
• column-reverse 反向列

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

 Flex 容器

文档中采用了 flexbox 的区域就叫做 flex 容器。
为了创建 flex 容器， 我们把一个容器的 display 属性值改为 flex 或者 inline-flex。 

完成这一步之后，容器中的直系子元素就会变为 flex 元素。所有CSS属性都会有一个初始值，所以 flex 容器中的所有 flex 元素都会有下列行为：

• 元素排列为一行 (flex-direction 属性的初始值是 row)。
• 元素从主轴的起始线开始。
• 元素不会在主维度方向拉伸，但是可以缩小。
• 元素被拉伸来填充交叉轴大小。
• flex-basis 属性为 auto。
• flex-wrap 属性为 nowrap。

这会让你的元素呈线形排列，并且把自己的大小作为主轴上的大小。如果有太多元素超出容器，它们会溢出而不会换行。
如果一些元素比其他元素高，那么元素会沿交叉轴被拉伸来填满它的大小。

 

然后可以根据情况，用flex-direction 更改flex主轴的方向。

接着，用flex-wrap：wrap 实现多行Flex容器。如果您的项目太大而无法全部显示在一行中，则会换行显示。

 

Flex 容器里->flex 元素上的属性

为了更好地控制 flex 元素，有三个属性可以作用于它们：

• flex-grow
• flex-shrink
• flex-basis

 flex-grow


flex-grow设置了一个flex项主尺寸的flex增长系数。它指定了flex容器中剩余空间的多少应该分配给该项目。

主尺寸是项的宽度或高度，这取决于flex-direction值。

剩余的空间是flex容器的大小减去所有flex项的大小加起来的大小。如果所有的兄弟项目都有相同的flex-grow系数，那么所有的项目将获得相同的剩余空间，否则将根据不同的flex-grow系数定义的比例进行分配。

flex-grow 与其他的flex属性flex-shrink和flex-basis一起使用，通常使用flex 速记来定义，以确保所有的值都被设置。

flex-grow 负值无效。省略时默认值为 1。

 flex-shink

flex-shrink属性是处理flex元素收缩的问题。
flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

给flex-shrink属性赋予更大的数值可以比赋予小数值的同级元素收缩程度更大。

flex-basis

 flex-basis 指定了 flex 元素在主轴方向上的初始大小。 该属性的默认值是 auto 。

如果所有元素都设定了宽度（width）为100px，所以 flex-basis 的值为100px。

如果没有给元素设定尺寸，flex-basis 的值采用元素内容的尺寸。

语法：

/* 指定<'width'> */
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;

/* 固有的尺寸关键词 */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/* 在flex item内容上的自动尺寸 */
flex-basis: content;

/* 全局数值 */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;

 

flex属性简写

你可能很少看到 flex-grow，flex-shrink，和 flex-basis 属性单独使用，而是混合着写在 flex 简写形式中。

单值语法: 值必须为以下其中之一:

• 一个无单位数(<number>): 它会被当作<flex-grow>的值。
• 一个有效的宽度(width)值: 它会被当作 <flex-basis>的值。
• 关键字 none，auto或initial.

双值语法: 第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。
　　　　  第二个值必须为以下之一：

• 一个无单位数：它会被当作 <flex-shrink> 的值。
• 一个有效的宽度值: 它会被当作 <flex-basis> 的值。

三值语法:

• 第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。
• 第二个值必须为一个无单位数，并且它会被当作  <flex-shrink> 的值。
• 第三个值必须为一个有效的宽度值， 并且它会被当作 <flex-basis> 的值。

 

元素间的对齐和空间分配

justify-content

justify-content属性用来使元素在主轴方向上对齐，

初始值是flex-start，元素从容器的起始线排列。
flex-end，从终止线开始排列，
center，在中间排列。
space-between，把元素排列好之后的剩余空间拿出来，平均分配到元素之间，元素之间间隔相等。
space-around，使每个元素的左右空间相等。

align-items

align-items 属性可以使元素在交叉轴方向对齐。

这个属性的初始值为stretch，这就是为什么flex元素会默认被拉伸到最高元素的高度。
实际上，它们被拉伸来填满flex容器 —— 最高的元素定义了容器的高度。

• stretch
• flex-start
• flex-end
• center