先上效果
Flexbox的基本概念
容器和项目
Flexbox布局主要涉及两种类型的元素：容器（flex container）和项目（flex items）。
- 容器：使用
display: flex或display: inline-flex将元素定义为Flex容器。 - 项目：容器内的直接子元素自动成为Flex项目。
主要属性
- Flex容器属性：
flex-direction：定义主轴方向（如row、column）。justify-content：沿主轴对齐项目（如flex-start、center、space-between）。align-items：沿交叉轴对齐项目（如stretch、center）。flex-wrap：定义项目是否换行（如nowrap、wrap）。
- Flex项目属性：
flex-grow：定义项目的放大比例。flex-shrink：定义项目的缩小比例。flex-basis：定义项目在分配多余空间之前的默认大小。flex：flex-grow、flex-shrink和flex-basis的简写。
实践：制作一个响应式导航栏
<nav class="navbar"> <a href="#" class="nav-link">Home</a> <a href="#" class="nav-link">About</a> <a href="#" class="nav-link">Services</a> <a href="#" class="nav-link">Contact</a> </nav>
body { margin: 0; font-family: Arial, sans-serif; } .navbar { display: flex; justify-content: space-around; align-items: center; background-color: #333; padding: 10px 0; } .nav-link { color: white; text-decoration: none; padding: 10px 20px; transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, border-bottom 0.3s ease; /* Added transition for smooth effects */ border-bottom: 3px solid transparent; /* Initial border color */ } .nav-link:hover { background-color: #555; color: #ff7e5f; /* Change text color on hover */ transform: scale(1.1); /* Scale the link to create a pop effect */ border-bottom: 3px solid #ff7e5f; /* Border appears on hover */ }
总结
通过在导航栏中加入简单的动画效果，我们不仅增强了用户的交互体验，也使得界面看起来更加现代和吸引人。这些动画效果简单易实现，却极大地提升了界面的吸引力和专业感。
