Flex布局

技术分享 1个月前 (10-16) 0 999+

关注

Flex布局

Flex布局（弹性盒子布局）是CSS3中一种强大的布局模式，它为我们提供了一种更有效的方式来设计响应式页面结构。

一.什么是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: <integer>; /* 整数值 */ }

2.flex-grow

定义项目的放大比例，默认为0（即如果存在剩余空间，也不放大）：

.item {   flex-grow: <number>; /* 默认0 */ }

3.flex-shrink

定义了项目的缩小比例，默认为1（即如果空间不足，该项目将缩小）：

.item {   flex-shrink: <number>; /* 默认1 */ }

4.flex-basis

定义了在分配多余空间之前，项目占据的主轴空间：

.item {   flex-basis: <length> | 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; }

四.应用

1. 水平垂直居中

.container {   display: flex;   justify-content: center;   align-items: center; }

2. 圣杯布局

<div class="container">   <header>头部</header>   <div class="main">     <main>主内容区</main>     <nav>导航</nav>     <aside>侧边栏</aside>   </div>   <footer>底部</footer> </div>

.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;   } }