css - display:flex;布局问题

问题描述

问 题

下图的布局方式有哪几种？还有没有其他的：
1、左右布局
2、左中右布局

下面代码这种可以实现吗？都在一个盒子里面

解决方案

可以是可以，但这是竖着排的，按着顺序横着排可能有点问题，而且是写死的...

    ul{
        display: flex;
        list-style: none;
        width: 180px;
        height: 60px;
        flex-direction: column;
        flex-wrap:wrap;
    }
    li{
        display: inline-block;
        height: 30px;
        border: 1px solid red;
    }
    li:first-of-type{
        height: 60px;
    }

这篇关于css - display:flex;布局问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！