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