弹性布局flex

最新推荐文章于 2023-07-07 15:29:25 发布

清风白龙

最新推荐文章于 2023-07-07 15:29:25 发布

阅读量190

点赞数

分类专栏： web前端基础笔记

本文链接：https://blog.csdn.net/qq_48784569/article/details/107232169

版权

web前端基础笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

关于弹性布局flex的注意事项

设置了弹性布局后display:flex;其子元素的浮动float、clear、和vertical-align会失效。
在没有设宽高的盒子加弹性布局后，会影响默认盒子的宽高度。
使用justify-content: space-between;时一定要给它设宽度，不然会没有效果，交叉轴aligin-item: center;一样需要设高度。
居中也可以直接给弹性子盒子margin: auto;那么子元素块就会水平垂直居中啦！

	.fa {
            width: 500px;
            height: 500px;
            background-color: #f0f;
            margin: 100px auto;
            display: flex;
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: #0f0;
            margin: auto;
        }