【flex布局】

一、引入flex?

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

1.float实现中间自适应

    <!-- float实现中间自适应布局--><div class="traditional-container"><div class="left">左侧</div><div class="right">右侧</div><div class="middle">中间</div></div>

.left {float: left;width: 100px;
}.middle {overflow: hidden;/*创建BFC，自动填充剩余空间*/background-color: yellow;
}.right {float: right;width: 100px;
}

2.flex实现中间自适应

    <!-- flex实现中间自适应布局--><div class="flex-container"><div class="item">左侧</div><div class="item flex-grow">中间</div><div class="item">右侧</div></div>

.flex-container {display: flex;align-items: center;/* 垂直居中 */gap: 10px;/* 列间距 */
}.item {background-color: lightblue;padding: 20px;border: 1px solid #333;
}.flex-grow {flex-grow: 1;/* 占据剩余空间 */
}/* 响应式：在屏幕小于 600px 时变成竖排 */
@media (max-width: 600px) {.flex-container {flex-direction: column;}
}

CSS中的display属性用来设置元素是否被看为块级或行级盒子，例如流式布局、网格布局、弹性布局

二、什么是flex布局

• 弹性布局
• 任何一个容器都可以指定为flex布局

.box{display: flex;
}/*行内元素也可以使用flex布局*/
.box{display: inline-flex;
}/*Webkit内核的浏览器，必须加上-webkit前缀。*/
.box{display: -webkit-flex; /* Safari */display: flex;
}

三、基本概念

采用flex布局的元素称为flex容器。它的所有子元素自动成为容器成员，称为flex项目。

• main axis:水平主轴
• cross axis:垂直的交叉轴
• main size:单个项目占据的主轴空间
• cross size:单个项目占据的交叉轴空间
• 默认沿主轴排列

四、容器的属性

容器属性	Value
flex-direction（决定主轴方向）	row （默认水平为主轴，起点在左端）、row-reverse（默认水平为主轴，起点在右端） 、column （主轴为垂直，起点在上沿）、column-reverse（主轴为垂直，起点在下沿）
flex-wrap （如何换行）	nowrap （不换行）、wrap（换行） 、 wrap-reverse（换行，第一行在下方）
flex-flow	row nowrap（默认值，flex-direction属性和flex-wrap属性的简写形式）
justify-content（项目在主轴的对齐方式 ）	flex-start （默认左对齐）、== flex-end ==（右对齐） 、 center （居中）、space-between（两端对齐，项目之间间隔相等）、space-around（每个项目两侧距离相等）
align-items（项目在交叉轴对齐方式）	flex-start 、 flex-end 、 center 、baseline（项目的第一行文字的基线对齐） 、stretch（默认，如果项目未设置高度或设为auto，将占满整个容器的高度）
align-content（多根轴线的对齐方式）	flex-start （与交叉轴的起点对齐）、 flex-end（与交叉轴的终点对齐） 、center （与交叉轴的中点对齐）、 space-between （与交叉轴两端对齐，轴线之间的间隔平均分布）、space-around（每根轴线两侧的间隔都相等） 、 stretch（轴线占满整个交叉轴）

五、项目的属性

项目属性	Value
order（项目的排列顺序）
flex-grow(项目的放大比例)	默认为0，所有项目的flex-grow：1，则它们将等分剩余空间
flex-shrink（项目的缩小比例）	默认为1
flex-basis(在分配多余空间之前，项目占据的主轴空间（main size))	默认值为auto
flex	默认为 0 1 auto（flex-grow, flex-shrink 和 flex-basis的简写）
align-self（允许单个项目有与其他项目不一样的对齐方式）	默认值为auto 、flex-start 、flex-end 、 center 、baseline 、stretch