居氛趴前一.什么是Flex布局？
Flex布局是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局，这使得元素在容器内的排列、对齐和空间分配变得更加简单和灵活。
基本概念
采用Flex布局的元素称为Flex容器，简称"容器"。它的所有直接子元素自动成为容器成员，称为Flex项目，简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。项目默认沿主轴排列。
二.Flex容器属性
1.display
定义一个Flex容器，可以是行内或块级元素：
.container {
display: flex; /* 或 inline-flex */
}
2.flex-direction
决定主轴的方向（即项目的排列方向）：
.container {
flex-direction: row; /* 默认值：从左到右 */
flex-direction: row-reverse; /* 从右到左 */
flex-direction: column; /* 从上到下 */
flex-direction: column-reverse; /* 从下到上 */
}
3.flex-wrap
默认情况下，项目都排在一条线上。flex-wrap定义如果一条轴线排不下，如何换行：
.container {
flex-wrap: nowrap; /* 默认不换行 */
flex-wrap: wrap; /* 换行，第一行在上方 */
flex-wrap: wrap-reverse; /* 换行，第一行在下方 */
}
4.justify-content
定义了项目在主轴上的对齐方式：
.container {
justify-content: flex-start; /* 默认值：左对齐 */
justify-content: flex-end; /* 右对齐 */
justify-content: center; /* 居中 */
justify-content: space-between; /* 两端对齐，项目间间隔相等 */
justify-content: space-around; /* 每个项目两侧的间隔相等 */
justify-content: space-evenly; /* 项目间间隔与项目与边框间隔相等 */
}
5.align-items
定义项目在交叉轴上如何对齐：
.container {
align-items: stretch; /* 默认值：拉伸填满容器高度 */
align-items: flex-start; /* 交叉轴的起点对齐 */
align-items: flex-end; /* 交叉轴的终点对齐 */
align-items: center; /* 交叉轴的中点对齐 */
align-items: baseline; /* 项目的第一行文字的基线对齐 */
}
三.Flex项目属性
1.order
定义项目的排列顺序。数值越小，排列越靠前，默认为0：
.item {
order: ; /* 整数值 */
}
2.flex-grow
定义项目的放大比例，默认为0（即如果存在剩余空间，也不放大）：
.item {
flex-grow: ; /* 默认0 */
}
3.flex-shrink
定义了项目的缩小比例，默认为1（即如果空间不足，该项目将缩小）：
.item {
flex-shrink: ; /* 默认1 */
}
4.flex-basis
定义了在分配多余空间之前，项目占据的主轴空间：
.item {
flex-basis: | auto; /* 默认auto */
}
5.flex
flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto：
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
6.align-self
允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性：
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
四.应用
- 水平垂直居中
.container {
display: flex;
justify-content: center;
align-items: center;
}
- 圣杯布局
头部
主内容区
导航
| 侧边栏
底部
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.main {
display: flex;
flex: 1;
}
main {
flex: 1;
}
nav, aside {
flex: 0 0 200px;
}
nav {
order: -1;
}
- 响应式导航栏
.navbar {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.logo {
margin-right: auto;
}
.nav-links {
display: flex;
}
@media (max-width: 768px) {
.navbar, .nav-links {
flex-direction: column;
}
}
五.浏览器兼容性
Flex布局已被所有现代浏览器支持，包括：
Chrome 29+
Firefox 28+
Safari 9+
Edge 12+
iOS Safari 9+
Android Browser 4.4+
六.主要优势包括：
简化复杂布局的实现
轻松实现元素的水平和垂直居中
创建自适应和响应式设计
改变元素的视觉顺序而不影响HTML结构
小结
掌握Flex布局是现代前端开发者的必备技能，它能够大大提高我们创建复杂界面的效率和灵活性。