flex弹性布局-盒子模型

109 阅读1分钟

在学习了flex布局之后,对于这个知识想要把自己的理解表达出来,因此就有了这第一篇笔记,若有问题,欢迎指出

1.盒子模型 在一个容器中加上display:flex即可使得当前容器成为一个flex的盒子容器,可以对这个容器加上flex属性,例如

flex.png

这里就是将整个容器中分别添加了flex为1和flex为2的两个容器,使得两者以1:2的比例分割整个容器,代码如下

2.关于flex布局的样式 这个内容网上有很多,我依照自己的理解大概写了下

flex样式.png

下面是一些网络上的图片,应该都看到过

 justify-content属性

flex元素对齐.png

align-items属性

Snipaste_2022-06-24_13-30-12.png

align-content属性

Snipaste_2022-06-24_13-31-20.png

具体可了解阮一峰的博客中,附上链接 第一次写博客,欢迎大家来指导~~