flex容器与项目的常用属性和实例演示

flex容器与项目的常用属性和实例演示

将flex容器与项目的常用属性全部进行实例演示，并理解属性的常用值的显示效果

1. flex容器属性

flex容器	描述	属性
flex-flow	主轴方向与换行	row/column nowrap/wrap
justify-content	项目在主轴对齐方式	center/flex-start/flex-end/space-around/space-between/space-evenly
align-items	项目在交叉轴对齐方式	center/flex-end/flex-start/stretch/baseline
align-content	多行容器对齐方式	center/flex-start/flex-end/space-around/space-between/space-evenly/stretch

2. flex项目常用属性

flex项目	描述	属性
flex	项目伸/缩/宽度	0 1 auto/1
align-self	某个项目自身交叉轴上对齐方式	center/flex-start/flex-end/stretch/baseline/space-around/space-between/space-evenly
order	某个项目主轴上排序顺序	0 默认

3. flex容器实列演示

• body 标签中添加 container 盒子和项目

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

• style 标签中添加 css 基础样式，转换 container 为 flex 容器

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container {
    /* 转为 flex 容器 */
    display: flex;
    height: 20em;
    margin: 1em;
    padding: 1em;
    border: 1px solid #000;
}
.container>.item {
    width: 5em;
    height: 3em;
    background-color: lightgray;
    border: .1rem solid #000;
}

3.1 单行容器示例演示

主轴方向与换行/主轴方向与换行/项目在交叉轴对齐方式

• style 标签中继续添加样式，单行容器示例演示

/* flex单行容器实列演示 */
/* 主轴方向与换行 */
.container {
    /* 默认值：行方向不换行 */
    flex-flow: row nowrap;
    /* 行方向换行 */
    flex-flow: row wrap;
    /* 列方向不换行 */
    flex-flow: column nowrap;
    /* 列方向换行 */
    flex-flow: column wrap;
}
/* 项目在主轴对齐方式 */
.container {
    /* 设为默认行方向不换行 */
    flex-flow: row nowrap;
    /* 主轴居中 */
    justify-content: center;
    /* 左对齐 */
    justify-content: flex-start;
    /* 右对齐 */
    justify-content: flex-end;
    /* 分散对齐 */
    justify-content: space-around;
    /* 两端对齐 */
    justify-content: space-between;
    /* 平均对齐 */
    justify-content: space-evenly;
}
/* 项目在交叉轴对齐方式 */
.container {
    /* 拉伸对齐，默认对齐 */
    align-items: stretch;
    /* 内容基线对齐 */
    align-items: baseline;
    /* 交叉轴居中 */
    align-items: center;
    /* 顶部对齐 */
    align-items: flex-start;
    /* 底部对齐 */
    align-items: flex-end;
}

• 附上示例图

3.2 多行容器对齐方式

• style 继续添加样式

/* flex多行容器实列演示 */
.container {
    /* 设为行方向换行 */
    flex-flow: row wrap;
    /* 主轴对齐左对齐 */
    justify-content: flex-start;
    /* 交叉轴对齐改为默认拉伸对齐 */
    align-items: stretch;
}
.container>.item {
    /* 增大项目宽度，使其换行 */
    width: 8em;
}
.container {
    /* 拉伸对齐 */
    align-content: stretch;
    /* 主轴居中 */
    align-content: center;
    /* 左对齐 */
    align-content: flex-start;
    /* 右对齐 */
    align-content: flex-end;
    /* 分散对齐 */
    align-content: space-around;
    /* 两端对齐 */
    align-content: space-between;
    /* 拉伸对齐 */
    align-content: space-evenly;
}

• 附上示例图

4. flex项目常用属性示例演示

• style 继续添加样式

/* flex项目常用属性示例演示 */
.container {
    /* 设为默认行方向不换行 */
    flex-flow: row nowrap;
    /* 主轴对齐左对齐 */
    justify-content: flex-start;
    /* 交叉轴对齐改为默认拉伸对齐 */
    align-items: stretch;
}
.container>.item {
    /* 项目宽度恢复 5em，主轴单行显示 */
    width: 5em;
}
/* 添加区分背景色 */
.container .item:nth-of-type(2) {
    background-color: lightgreen;
}
.container .item:nth-of-type(3) {
    background-color: lightsalmon;
}
.container .item:nth-of-type(4) {
    background-color: lightseagreen;
}
/* 项目伸/缩/宽度 */
.container .item:first-of-type {
    flex: 1;
}
/* 项目3和4伸缩宽度是项目1的两倍 */
.container .item:nth-of-type(2)~* {
    flex: 2
}
/* 某个项目自身交叉轴上对齐方式 */
/* 项目1在交叉轴居中 */
.container .item:first-of-type {
    align-self: center;
}
/* 项目2在交叉轴顶部对齐 */
.container .item:nth-of-type(2) {
    align-self: flex-start;
}
/* 项目3在交叉轴底部对齐 */
.container .item:nth-of-type(3) {
    align-self: flex-end;
}
/* 项目4在交叉轴内容基线对齐 */
.container .item:last-of-type {
    align-self: baseline;
}
/* 某个项目主轴上排序顺序 */
/* 项目3排序1 */
.container .item:nth-of-type(3) {
    order: 1;
}
/* 项目2排序-1 */
.container .item:nth-of-type(2) {
    order: -1;
}

• 因为默认排序为0，项目3排序1，项目2排序-1，排序越小越在前，现在排序依次为：项目2(-1)，项目1(0)，项目4(0)，项目3(1)

• 示例图