容器属性，项目属性

容器属性

1.主轴水平方向,起点在左端,默认值

flex-direction: row;

2.主轴水平方向,起点在右端,

flex-direction: row-reverse;

3.主轴垂直方向,起点在上沿,

flex-direction: column;

4.主轴垂直方向,起点在下沿;

flex-direction: column-reverse;

子项目占据父容器的空间均为1,均分父级容器的空间

属性定义的内容,如果一条轴线排不下,如何换行 */

1.nowrap:不换行

flex-wrap: nowrap;

2.wrap:第一行在上方

flex-wrap: wrap;

3.wrap:第一行在下方

flex-wrap: wrap-reverse;

默认值就是左对齐

justify-content: flex-start;

右对齐

justify-content: flex-end;

justify-content: center;

项目的两端对其,项目之间的间隔是相等的

justify-content: space-between;

每个项目的两侧的间隔是相等的,项目之间的间隔比项目与边框的间隔大一倍

默认值:stretch

align-items:stretch ;

align-items: center;

align-items: flex-start;

align-items: baseline;

align-content属性:设置排列方向后,并且设置换行,这个属性才会起作用

align-content: flex-start;

align-content: flex-end;

align-content: center;

align-content: space-between;

align-content: space-around;

align-content: stretch;

默认设置 ：会拉伸容器内每个项目所占的空间，填充方式为每个项目下方增加空白，第一个项目默认从容器的顶端开始排列

项目属性

所有项目的flex-grow:;为1,将等分剩余空间,剩余空间的含义,去掉固定内容的之外的空间,

如果本身内容很多,比如我们这里第二个项目,虽然均分,但是还是会相比内容较少的项目占据比较大的空间

之前学习的容器属性flex-wrap,默认值不换行,项目宽度超过了容器的宽度的时候,项目会进行缩放

默认情况下,所有的项目进行统一缩放,默认值为1

flex-shrink: 1;

之前学习的容器属性flex-wrap,默认值不换行,项目宽度超过了容器的宽度的时候,项目会进行缩放

第一步:平分剩余空间(伸缩项目分配的剩余空间=容器的空间-所有项目内容的空间)

第二步:虽然内容少,想占多的地方,可以给他设置宽度 */

width: 150px;

flex-basis设置.

flex-basis:150px;

flex-basis:40%;

flex-basis:12rem;

伸缩项目分配的剩余空间=容器的空间-basis设置的空间（150px）

第三步:默认值auto,

flex-basis: auto;

第四步:flex-basis 是0的情况,设置为0.项目内容就不再占空间

第一步:

align-items: center;

第二步:第一个项目把自己的对齐方式设置为auto,表示继承父元素align-items属性

align-self: auto;

固定高度的多行文本居中

display:table 成为一个块级表格元素,子元素display:table-cell使子元素成为表格单元格,就会变成单元格,设置单元格的垂直居中:verticle:middle.