有关Flex布局(弹性布局)的基本知识和常用布局

1.采用flex布局的元素称为''容器'':容器有两个轴,主轴和侧轴

2.容器的属性

1.flex-direction : 决定主轴的方向

flex-direction: row | row-reverse | column | column-reverse;

主轴是水平方向:

• flex-direction:row(默认值):起点在左边
• flex-direction:row-reverse:起点在右边

主轴是垂直方向:

• flex-direction:column:起点在上沿
• flex-direction:column-reverse:起点在下沿

2.flex-wrap:决定是否换行

flex-wrap: nowrap | wrap | wrap-reverse;

• flex-wrap: nowrap | wrap | wrap-reverse;
• flex-wrap: nowrap(默认值):不换行
• flex-wrap: wrap:换行
• flex-wrap: wrap-reverse:换行在第一行上方

3.flex-flow:是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap

4.justify-content:主轴上对齐方式

justify-content: flex-start | flex-end | center | space-around | space-between | space-between;

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-around:两侧的间隔相等
• space-between:两端对齐,每一项间隔相等
• space-evenly:每一项和每一项间隔  每一项和容器间隔相等

5.align-items:交叉轴上的对齐方式

align-items: flex-start | flex-end | center | baseline | stretch;

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）: 如果项目未设置高度或设为auto，将占满整个容器的高度。

3.布局

等高布局

.item {    width: 400px;    height: 300px;    background: skyblue;    display: flex;    justify-content: space-between;    padding: 5px;}.item div {    width: 100px;    font-size: 20px;    background: pink;}.item div p {		text-align: center;}

左侧宽度固定，右侧自适应布局

html, body {    margin: 0;    padding: 0;}.container {    display: flex;    width: 100%;    height: 100vh;    background: skyblue;}.left-tree {    width: 200px;    height: 100%;    background: pink;}.main {		flex: 1 1 auto;}

粘性页脚:无论中间的内容有多少，页脚始终在底部展示

html, body {    margin: 0;    padding: 0;}.container {    display: flex;    flex-direction: column;    width: 100%;    height: 100vh;}.header {    width: 100%;    height: 60px;    background: pink;}.main {    flex: 1 1 auto;    background: skyblue;}.footer {    width: 100%;    height: 60px;    background: pink;}