flex布局独占一行实现方法

目录

一、问题

二、实现方法

 三、总结

---

如嫌繁琐，可直接移步  三、总结

一、问题

1.希望flex布局中某些项  独占一行。比如下面这段代码：希望第一个div独占一行

    <div class="flex-box">
      <div class="oneline">独占一行div>
      <div>box1div>
      <div>box2div>
    div>

二、实现方法

1.设置 父亲盒子 flex-box ： flex-wrap:wrap;

   同时 设置希望独占一行的 盒子 oneline: width:100%;

   1）scss样式如下：

  .flex-box{
    display: flex;
    flex-wrap: wrap;
    .oneline{
      width:100%;
    }
  }

  2) 具体实现效果： 如图2-1所示

 

 

2.不设置 flex-wrap:wrap；则无法实现独占一行，如图2-2所示

 三、总结

   1.自己写的时候忘记 设置 flex-wrap: wrap；所以一直有问题。

    2.flex布局某一个item独占一行：父盒子flex-wrap:wrap;同时需独占一行的盒子：width:100%;

/*

希望对你有帮助！

如有错误,欢迎指正！非常感谢！

*/