开发者社区> 问答> 正文

(内附图例)flex三栏布局,默认川字结构,媒询之后为凹字结构

结构如下,写死的,只能在这种结构下操作,不能提取出来,flex的属性试了一遍,目前没找到相应的方法,也去看了别人写的CSS库里面的内容,还没发现~ 所以上来请教下有没遇到这类需求的童鞋的解决办法~ 限定flex

<div class="container">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
</div>

screenshot
screenshot

展开
收起
杨冬芳 2016-06-13 11:06:30 2535 0
1 条回答
写回答
取消 提交回答
  • IT从业

    核心属性flex-basis

    .container {
      display: flex;
      flex-wrap: wrap;
    }
    
    .cell {
      flex: 0 0 33.333333%;
    }
    
    @media (max-width: 300px) {
      .cell:nth-child(1) {
        flex-basis: 50%;
      }
      .cell:nth-child(2) {
        flex-basis: 50%;
      }
      .cell:nth-child(3) {
        flex-basis: 100%;
      }
    }
    

    其实这个问题可以放在栅格系统下完美解决,所以不妨直接参看一个栅格系统是怎样实现的

    2019-07-17 19:35:22
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载