颜置籽酚一.什么是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.flexflex-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;}四.应用1. 水平垂直居中.container {display: flex;justify-content: center;align-items: center;}2. 圣杯布局头部主内容区导航侧边栏底部.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;}3. 响应式导航栏.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 29Firefox 28Safari 9Edge 12iOS Safari 9Android Browser 4.4六.主要优势包括简化复杂布局的实现轻松实现元素的水平和垂直居中创建自适应和响应式设计改变元素的视觉顺序而不影响HTML结构小结掌握Flex布局是现代前端开发者的必备技能它能够大大提高我们创建复杂界面的效率和灵活性。