Flex布局

Flex布局

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

Flex布局是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局，这使得元素在容器内的排列、对齐和空间分配变得更加简单和灵活。
基本概念

采用Flex布局的元素称为Flex容器，简称"容器"。它的所有直接子元素自动成为容器成员，称为Flex项目，简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。项目默认沿主轴排列。
二.Flex容器属性

1.display

定义一个Flex容器，可以是行内或块级元素：

1. .container {
2.   display: flex; /* 或 inline-flex */
3. }

复制代码

2.flex-direction

决定主轴的方向（即项目的排列方向）：

1. .container {
2.   flex-direction: row; /* 默认值：从左到右 */
3.   flex-direction: row-reverse; /* 从右到左 */
4.   flex-direction: column; /* 从上到下 */
5.   flex-direction: column-reverse; /* 从下到上 */
6. }

复制代码

3.flex-wrap

默认情况下，项目都排在一条线上。flex-wrap定义如果一条轴线排不下，如何换行：

1. .container {
2.   flex-wrap: nowrap; /* 默认不换行 */
3.   flex-wrap: wrap; /* 换行，第一行在上方 */
4.   flex-wrap: wrap-reverse; /* 换行，第一行在下方 */
5. }

复制代码

4.justify-content

定义了项目在主轴上的对齐方式：

1. .container {
2.   justify-content: flex-start; /* 默认值：左对齐 */
3.   justify-content: flex-end; /* 右对齐 */
4.   justify-content: center; /* 居中 */
5.   justify-content: space-between; /* 两端对齐，项目间间隔相等 */
6.   justify-content: space-around; /* 每个项目两侧的间隔相等 */
7.   justify-content: space-evenly; /* 项目间间隔与项目与边框间隔相等 */
8. }

复制代码

5.align-items

定义项目在交叉轴上如何对齐：

1. .container {
2.   align-items: stretch; /* 默认值：拉伸填满容器高度 */
3.   align-items: flex-start; /* 交叉轴的起点对齐 */
4.   align-items: flex-end; /* 交叉轴的终点对齐 */
5.   align-items: center; /* 交叉轴的中点对齐 */
6.   align-items: baseline; /* 项目的第一行文字的基线对齐 */
7. }

复制代码

三.Flex项目属性

1.order

定义项目的排列顺序。数值越小，排列越靠前，默认为0：

1. .item {
2.   order: <integer>; /* 整数值 */
3. }

复制代码

2.flex-grow

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

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

复制代码

3.flex-shrink

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

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

复制代码

4.flex-basis

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

1. .item {
2.   flex-basis: <length> | auto; /* 默认auto */
3. }

复制代码

5.flex

flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto：

1. .item {
2.   flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
3. }

复制代码

6.align-self

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性：

1. .item {
2.   align-self: auto | flex-start | flex-end | center | baseline | stretch;
3. }

复制代码

四.应用

1. 水平垂直居中

1. .container {
2.   display: flex;
3.   justify-content: center;
4.   align-items: center;
5. }

复制代码

2. 圣杯布局

1.   <header>头部</header>
2.   
3.     <main>主内容区</main>
4.     <nav>导航</nav>
5.     侧边栏</aside>
6.   
7.   <footer>底部</footer>

复制代码

1. .container {
2.   display: flex;
3.   flex-direction: column;
4.   min-height: 100vh;
5. }
7. .main {
8.   display: flex;
9.   flex: 1;
10. }
12. main {
13.   flex: 1;
14. }
16. nav, aside {
17.   flex: 0 0 200px;
18. }
20. nav {
21.   order: -1;
22. }

复制代码

3. 响应式导航栏

1. .navbar {
2.   display: flex;
3.   flex-wrap: wrap;
4.   justify-content: space-between;
5.   align-items: center;
6. }
8. .logo {
9.   margin-right: auto;
10. }
12. .nav-links {
13.   display: flex;
14. }
16. @media (max-width: 768px) {
17.   .navbar, .nav-links {
18.     flex-direction: column;
19.   }
20. }

复制代码

五.浏览器兼容性

Flex布局已被所有现代浏览器支持，包括：

• Chrome 29+
  
• Firefox 28+
  
• Safari 9+
  
• Edge 12+
  
• iOS Safari 9+
  
• Android Browser 4.4+
  

六.主要优势包括：

• 简化复杂布局的实现
  
• 轻松实现元素的水平和垂直居中
  
• 创建自适应和响应式设计
  
• 改变元素的视觉顺序而不影响HTML结构
  

小结

掌握Flex布局是现代前端开发者的必备技能，它能够大大提高我们创建复杂界面的效率和灵活性。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！