Flex布局

老衲法号别乱来

于 2021-06-08 09:02:30 发布

阅读量152

点赞数

本文链接：https://blog.csdn.net/weixin_44619450/article/details/117688541

版权

本文详细介绍了Flex布局的作用，焦点在于理解flex-direction属性的不同取值（水平和垂直方向，起点位置变化），以及justify-content属性如何实现项目对齐。通过实例展示了如何灵活调整元素在容器中的排列方式。

摘要由CSDN通过智能技术生成

Flex布局
1. Flex布局是用来做什么的Flex（Flexible Box）意思为：“弹性布局”。用来为和模型提供最大的灵活性。

Flex-ditrtion的属性
（1）Flex-ditrtion属性决定主轴的方向 flex-ditrtion：row; 这是它默认的主轴为水平方向，起点在左端。

（2）flex-diretion:row-reverse; 这是它主轴为水平方向，起点在右端。
![在这里插入图片描述](https://img-blog.csdnimg.cn/202106080900470.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYxOTQ1MA==,size_16,color_FFFFFF,t_70#pic_center)
  	                           
（3）flex-direction:column; 这是主轴为垂直方向，起点在上沿。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210608090101798.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYxOTQ1MA==,size_16,color_FFFFFF,t_70#pic_center)

（4）Flex-direction:column-reverse; 这是主轴为垂直方向，起点下沿
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210608090137909.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYxOTQ1MA==,size_16,color_FFFFFF,t_70#pic_center)