Why is it invalid to set flex-basis directly in flex layout? it should be written as follows: flex:0 0156rpx;

recently, when I was working on the WeChat Mini Programs project, I used the flex layout. The code is as follows:

<view class="parent">
    <view class="child1"></view>
    <view class="child2"></view>
    <view class="child3"></view>
</view>
.parent { display: flex; }
.child1 { flex-basis: 100rpx; }
.child1 { flex-basis: 200rpx; }
.child3 { flex-grow: 1; }

this doesn"t work. You have to change it to this:

.child1 { flex: 0 0 100rpx; }
.child2 { flex: 0 0 200rpx; }
Excuse me, what is the principle of this?


flex layout

flex attribute

    The
  1. flex attribute is short for flex-grow, flex-shrink and flex-basis, and the default value for is 0 1 auto. the last two properties are optional.
    it is recommended that you use this property first, rather than writing three separate properties separately, because the browser will calculate the related value
  2. The
  3. flex-grow attribute defines the magnification of the project, and the defaults to 0 , that is, it is not zoomed in if there is any remaining space.
  4. The
  5. flex-shrink attribute defines the reduction of the project. defaults to 1, which means that if there is not enough space, the project will shrink.
  6. The
  7. flex-basis attribute defines the (main size) of the spindle space occupied by the project before the extra space is allocated. Based on this property, the browser calculates whether the spindle has extra space. its default value is auto, , which is the original size of the project.

the first is invalid because there is no width defined for the parent container, and you can see the effect by adding the width and height attribute.

the second is effective because the first two values of the flex attribute 0 0 indicate that the element does not change anyway and will be displayed, but at least the parent container must be high

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b321ed-2bdf3.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b321ed-2bdf3.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?