Flex布局案例说明

1.首先在这里看到一个格式这里给了一个div是他的父盒子那么这个父盒子叫做box里面给了三个小盒子叫item

 

 

2.box就是父盒子他先给了一个宽高，margin就是为了父盒子和浏览器有一定的距离，padding就是让里面的子盒子和父盒子边框有一定的距离，然后在给到背景颜色，然后在给到border-radius就是父盒子的一个圆角效果的10像素，然后box-shadow给到的是阴影部分inset他是内阴影设置，然后最主要是要让display: flex作为转换

3.然后box item设置宽高，圆角效果，背景颜色，阴影部分

4.我们有把第二个圆做一个垂直居中，第三个顶部对齐，那这里就需要单独的某一个盒子所以我们是一个一个去选择的那么第二盒子，第二盒子单独设置居中，这里是align-self:center 那么这里用到的属性是align-self那么它的话是单个项目的方式，第二个是一个居中，第三个是 底部对齐flex-end，单独设置一下就可以了

 

 

 

这是我所学到的Flex布局案例说明，所以我要分享给你们，希望可以帮助到你们。

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！