小程序flex

最新推荐文章于 2024-09-16 16:19:08 发布

qq_41737172

最新推荐文章于 2024-09-16 16:19:08 发布

阅读量81

点赞数

文章标签：小程序 css css3

本文链接：https://blog.csdn.net/qq_41737172/article/details/129526619

版权

该段代码展示了一个使用Flex布局的HTML结构，其中包含四个内联视图元素，用于显示如‘24小时热水供应’等信息。外层容器设置了flex-wrap属性以允许换行，align-content属性设置为flex-start以使内容在行首对齐。内层元素具有灰色背景和边框，显示了如何通过CSS调整网页元素的样式和排列。

摘要由CSDN通过智能技术生成

在这里插入图片描述

  <view class="flex-row" style="display: flex;">
    <view class='outter'>
      <view class='inner'>24小时热水供应</view>
      <view class='inner'> 2dsadsads </view>
      <view class='inner'> 43寸43寸全高清LED液晶电视全高清LED液晶电视 	       </view>
      <view class='inner'>1但是   </view>
    </view>
</view>


.outter{
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 300px;
  height: 300px;
  background: pink;
  }

  .outter .inner{
    background : gray;
    /* width : 100px ; */
    /* height: 100px; */
    border : 1px solid #ccc ;
    }