flex布局详解（内含align-items和align-content的对比案例）

changuncle

已于 2025-02-15 20:17:26 修改

阅读量4.3k

点赞数 30

文章标签：前端 javascript 开发语言

于 2024-11-08 10:44:04 首次发布

本文链接：https://blog.youkuaiyun.com/xiaouncle/article/details/143607613

版权

一、初识flex布局

1、什么是flex布局

传统的布局是基于盒装模型，依赖 display+position+float 属性。它对于特殊布局非常不方便，比如：自动计算间隔、垂直居中。

flex是 flexible box 或 flexbox 的缩写，表示弹性布局，可以为盒装模型带来更大的灵活性。

块级元素和行内元素都可以指定为 flex 布局，我们可以设置弹性容器的样式，也可以设置弹性元素的样式。

.box{
    display: flex;
}
.box{
    display: inline-flex;
}

2、flex布局的好处

简单易懂：与传统布局相比，flex布局的语法理解起来更加简单，容易上手
弹性和自适应：flex布局支持自动适应不同尺寸的屏幕，让页面更有弹性
等高布局：flex布局可以方便地实现多行等高布局
对齐和排序：flex布局支持多种对齐方式，包括水平和垂直对齐，还可以通过设置order属性对子元素进行排序
可与传统布局结合使用：flex布局可以与传统布局方式结合使用，实现更灵活地布局效果

3、flex布局相关概念

采用flex布局的元素，被称为flex容器（flex container），它所有的子元素自动成为容器成员，被称为flex元素（flex item）
容器默认存在两根轴，水平的主轴（main axis）和垂直的交叉轴（cross asix）
主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end
元素默认沿主轴排列，单个元素占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size

二、弹性容器样式属性(6个)

flex-direction：设置主轴的方向
flex-wrap：默认情况下元素都排在一条主轴上，如果沿主轴方向一条轴线排不下，是否换行
flex-flew：flex-direction和flex-wrap 的组合简写属性，顺序也是flex-direction在前、flex-wrap在后
justify-content：定义元素在主轴上的对齐方式
align-items：定义元素在交叉轴上的对齐方式
align-content：定义多根轴线的对齐方式（主轴为水平线时，表示容器内有多行元素）

1、flex-direction(有4个值)

row（默认值）：主轴为水平方向，起点在左端
row-reverse：主轴为水平方向，起点在右端
column：主轴为垂直方向，起点在上沿
column-reverse：主轴为垂直方向，起点在下沿

2、flex-wrap(有3个值)

nowrap：不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方

3、flex-flew

flex-flew是flex-direction和flex-wrap 的组合简写属性，顺序是flex-direction在前、flex-wrap在后。

4、justify-content(有6个值)

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中对齐
space-between：主轴方向两端挨着边框，元素之间的间隔相等
space-around：每个元素主轴方向两侧的间隔相等，所以元素之间的间隔比元素与边框的间隔大一倍
space-evenly：主轴方向元素之间、元素与边框之间的间隔都相等

5、align-items(有5个值)

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

/*此处的样式对应上图
为了方便大家分享工作心得、交流技术问题，我创建了QQ群389591879，
大家也可以在里边相互了解各自公司的信息，希望能对大家有所帮助，同道中人欢迎加群。
*/
.box {
    width: 650px;
    height: 200px;
    border: 10px solid #e16522;
    margin-top: 5px;
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
}

.box .shortitem {
    width: 100px;
    height: 70px;
    border: 1px solid #15b8bb;
    color: #15b8bb;
    background-color: #dfdfdf;
}

.box .tallitem {
    width: 100px;
    height: 100px;
    padding-top: 20px; /*此处设置了内边距*/
    border: 1px solid #15b8bb;
    color: #15b8bb;
    background-color: #dfdfdf;
}

/*此处的样式对应上图*/
.box {
    width: 650px;
    height: 200px;
    border: 10px solid #e16522;
    margin-top: 5px;
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
}

.box .shortitem {
    width: 100px;
    height: 70px;
    border: 1px solid #15b8bb;
    color: #15b8bb;
    background-color: #dfdfdf;
    line-height: 3em; /*此处设置了行高*/
}

.box .tallitem {
    width: 100px;
    height: 100px;
    border: 1px solid #15b8bb;
    color: #15b8bb;
    background-color: #dfdfdf;
}

/*此处的样式对应上图*/
.box {
    width: 650px;
    height: 200px;
    border: 10px solid #e16522;
    margin-top: 5px;
    display: inline-flex;
    flex-direction: row;
    align-items: stretch;
}

.box .shortitem {
    width: 100px; /*没设置height*/
    border: 1px solid #15b8bb;
    color: #15b8bb;
    background-color: #dfdfdf;
}

.box .tallitem {
    width: 100px; /*没设置height*/
    border: 1px solid #15b8bb;
    color: #15b8bb;
    background-color: #dfdfdf;
    line-height: 3em;
}

6、align-content(有6个值)

flex-start：与交叉轴的起点对齐
flex-end：与交叉轴的终点对齐
center：与交叉轴的中点对齐
space-between：交叉轴方向两端挨着边框，元素之间的间隔相等
space-around：每个元素交叉轴方向两侧的间隔相等，所以元素之间的间隔比元素与边框的间隔大一倍
stretch（默认值）：轴线占满整个交叉轴

三、弹性元素样式属性(6个)

order：定义元素的排列顺序，数值越小越靠前，默认是0
flex-grow：定义元素的放大比例，默认是0，即如果存在剩余空间也不放大
flex-shrink：定义元素的缩小比例，默认是1，即如果空间不足元素会被缩小
flex-basis：定义了在分配多余空间之前，元素占据的主轴空间，默认是auto，即元素的本来大小
flex：flex-grow、flex-shrink、flex-basis的组合简写，默认是0 1 auto，后两个属性可选
align-self：允许某个元素与其他元素的对齐方式不同，可覆盖align-items，默认是auto

/*此处的样式对应上图*/
.box div:nth-child(1){
    order: -1;
}
.box div:nth-child(2){
    order: 1;
}
.box div:nth-child(3){
    order: 3;
}
.box div:nth-child(4){
    order: 0;
}
.box div:nth-child(5){
    order: 2;
}