评论

width:100%在小程序中的表现

记录一下width:100%在小程序中的表现

在使用flex布局的时候,有时得到的结果和预期不相符,于是记录了一下在小程序中width:100%的表现。

正常布局

  1. width属性在w3c中是这样定义的:width定义元素内容区的宽度,在内容区外面可以增加内边距、边框和外边距。但是行内非替换元素会忽略这个属性。
  2. width的默认值是auto,表示宽度是可变动的,使用了auto属性的view的content+margin+padding+border相加为父元素的width大小,宽度与其内容无关。在不设置width的时候默认是auto,对某个元素使用position的时候会显示出不同的效果,可以选择清除浮动或者设置width为x%,来调整样式。
  3. width:100%定义基于包含块(父元素)宽度的百分比宽度,子元素的width将会充满父元素的content,此时给子元素附加margin的时候并不是改变子元素的大小而是直接使得子元素溢出父元素。

实例

正常布局下width:auto的表现

代码展示:

<!-- wxml -->
<view class="width-demo-father">
  <view class='width-demo-son'>1111</view>
</view>
<!-- wxss -->
.width-demo-father {
  border: 1rpx solid red;
  margin-bottom: 30rpx;
}
.width-demo-son {
  width: auto;
  border: 1rpx solid yellow;
  padding-left: 10rpx;
  padding-right: 10rpx;
  margin-left: 10rpx;
  margin-right: 10rpx;
  height: 200rpx;
  background: pink;
}

解析:此时子view块的content+margin+padding+border的宽度为父元素的width大小,不会溢出父元素。
正常布局下width:100%的表现

<!-- wxml -->
<view class="width-demo-father">
  <view class='width-demo-son-100' style='width:100%'>2222</view>
</view>
<!-- wxss -->
.width-demo-son-100 {
  border: 1rpx solid black;
  margin-left: 20rpx;
  height: 200rpx;
}

解析:子元素设置为width:100%且设置margin:left 20rpx的情况下溢出父元素。

修正

评论中指出了flex一节中的错误,重新对文章flex相关内容进行了补充。
flex是Flexible Box的缩写,意思是灵活的布局,,使用flex布局可以快速的完成页面布局。flex布局使用相当简单:指定一个元素为flex容器,指定后容器内部的元素就可以使用flex来进行布局。
flex容器相关属性有flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content属性。
flex容器子元素又可称为项目有order、flex-basis、flex-grow、flex-shrink、flex、align-self属性,其中flex-basis,flex-grow,flex-shrink三个属性会影响子元素的大小。
flex-basis:定义了在分配多余空间之前,项目占据的主轴空间。默认值是auto即项目本来的大小。

<view class='main5'>
  <view>1017</view>
  <view>1018</view>
  <view>1019</view>
</view>

.main5 {
  background-color: #0f0;
  margin-top: 20rpx;
  display: flex;

}

.main5>view {
  background: red;
  width: 200rpx;  
  flex-basis: auto;
}

当flex的主轴方向为水平轴的时候,设置flex-basis:0%后项目的宽度会失效,即使声明了项目宽度也不起作用。

.main5 {
  background-color: #0f0;
  margin-top: 20rpx;
  display: flex; /*父div设置该属性*/
}

.main5>view {
  background: red;
  width: 200rpx;
  /* flex-basis: auto; */
  flex-basis: 0%;
}

当flex指定主轴方向为竖直轴的时候,flex-basis会影响高度。
flex-grow定义项目的放大比例,默认值为0,即使存在剩余空间也不会放大。 flex-shrink: 定义了项目的缩小比例。默认值为1,即如果空间不足,该项目将缩小。在同一时间,flex-shrink 和 flex-grow 只有一个能起作用。
当容器未设置flex-wrap:wrap的情况,且子元素宽度不充满整个容器此时flex-grow会起作用,如果子项目flex-grow均设置为1,则子项目会平分剩余空间。

.main5 {
  background-color: #0f0;
  margin-top: 20rpx;
  display: flex; 
}

.main5>view {
  background: red;
  width: 200rpx;
  /* flex-shrink: 1; */
  flex-grow: 1;
  flex-basis :auto;
}

当容器未设置flex-wrap:wrap的情况,且子元素宽度充满整个容器此时flex-shrink会起作用,如果子项目flex-shrink均设置为1,则子项目会等比例缩小。

.main6 {
  background-color: #0f0;
  margin-top: 20rpx;
  display: flex; 
}

.main6>view {
  background: pink;
  width: 400rpx;
  flex-shrink: 1;
  flex-basis :auto;
  border: 1rpx solid black;
}

flex是flex-grow, flex-shrink 和 flex-basis的简写,默认值是 0 1 auto,推荐使用flex属性来控制子项目。

最后一次编辑于  06-06  (未经腾讯允许,不得转载)
点赞 4
收藏
评论

4 个评论

  • 子非鱼
    子非鱼
    05-28

    解析:flex布局下,设置子元素高度为200rpx且width:50%的情况下,会自动充满父元素的width,当给子元素赋值margin-left:100rpx的时候,子元素将会自动变动宽度,不会溢出父级元素。

    ——————————————

    此处,flex的默认值是 0 1 auto,如果是none,子元素内容就会溢出了,如此下结论太草率了,会不会溢出主要取决于flex怎么设置的,百分比不是主要原因。另外,题目是“width:100%在小程序中的表现”,请问,是小程序端表现有什么特殊的吗


    05-28
    赞同 2
    回复
  • deRek
    deRek
    05-29

    点进来了的, 看评论就好, 很尴尬...


    左转 https://www.w3.org/TR/css-flexbox-1/ 比较好.

    总结其实就是, 取决怎么设置flex, 和width 100%什么的一分钱关系没有..

    05-29
    赞同 1
    回复
  • 永恒
    永恒
    05-28

    设置了flex:1;要加上width:0;不然设置padding和margin会溢出

    05-28
    赞同
    回复
  • Maverick
    Maverick
    05-28

    flex-grow默认是0,子元素宽度是不会超过flex-basis(默认auto,参照width)设置的50%的,怎么可能自动填满父元素?


    写那么多,结果得出错误的结论也是非常尴尬了

    05-28
    赞同
    回复 1
    • 仙森ღ₅₂₀¹³¹⁴
      仙森ღ₅₂₀¹³¹⁴
      05-30

      不要在意这些细节 。😂

      05-30
      回复