CSS样式flex的用法

flex弹性盒子的使用:

  HTML部分:

<view class="chunk-box">
  <view class="chunk color1"></view>
  <view class="chunk color2"></view>
  <view class="chunk color3"></view>
</view>

  CSS部分:

.chunk-box{
  display: flex;
}
  .chunk{
    width: 100px;
    height: 100px;
  }
  .color1{
    background: #ffff00;
  }
  .color2{
    background: #00ff00;
  }
  .color3{
    background: #ff0000;
  }

  界面效果:

CSS样式flex的用法

 

 

 拓展    flex-direction的作用:

CSS样式flex的用法CSS样式flex的用法CSS样式flex的用法CSS样式flex的用法CSS样式flex的用法

 

 

CSS样式flex的用法

 

上一篇:本笔记为阿里云天池龙珠计划SQL训练营的学习内容,链接为:https://tianchi.aliyun.com/specials/promotion/aicampsql;


下一篇:2021-04-24 程序调试-Debug