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?

Css css3 flex WeChat-Mini-Programs
Apr.05,2021

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
  2. 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.
    3. The
  3. 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.
    4. The
  4. 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

Previous: About the use of scrollTop

Next: A component dynamically loads a video address, which takes a long time to load every time the video is played, but it can be loaded quickly by entering the address in the browser

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu