flex弹性盒子布局

FlexBox是一个弹性盒子布局，它是一个初学前端或移动端开发的开发者或兴趣爱好者必学的一部分

前端部分还是需要通过实战项目去强化这些理论知识

小白实战项目可以看该博客链接: https://blog.csdn.net/weixin_43675314/article/details/134406291

FlexBox的特点

• 没有浮动
• 响应式（移动端格外友好）
• 定位更加便捷
• 边距不折叠
• 排序不需要子元素控制
• 为小屏幕而生（Grid布局更加面向的是大屏幕）

首先需要介绍的一个重要概念就是主轴和交叉轴：主轴是从左到右；而交叉轴则永远垂直于主轴，即从上到下（若flex-direction为column，则上述概念相反）

Flex的一些属性

• display:flex; (常用)
  • display: inline-flex;
• flex-direction: row / column; (常用)
  • flex-direction:row-reverse / column-reverse
• flex-warp: wrap / wrap-reverse;
• flex-flow: row wrap / row wrap-reverse;
• justify-content: space-between / center;(常用)
  • justify-content: space-evenly / space-around;
• align-items: center; (常用)
  • align-items: flex-start / flex-end / baseline;

对于以上代码中，最常用的元素其实就是，对某一个contanier区域进行垂直居中对齐，代码如下：

display: flex;				//将盒子设置成flex布局
justify-content: center; 	//主轴对齐
align-items: center;		//交叉轴对齐

前端部分还是需要通过实战项目去强化这些理论知识 小白实战项目可以看该博客链接: https://blog.csdn.net/weixin_43675314/article/details/134406291