In flex layout, the height of the parent element is auto, which is supported by one child element, and the other child element is adaptive to the height

Time:2020-11-3

Overall style:

In flex layout, the height of the parent element is auto, which is supported by one child element, and the other child element is adaptive to the height

. expressrecord single close {// parent element style
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    Align items: Center; // key stretch
    position: relative;
}

The height of the right child element to expand the parent element:

In flex layout, the height of the parent element is auto, which is supported by one child element, and the other child element is adaptive to the height

.expressRecord-text {
    margin-left: 30rpx;
    padding-bottom: 20rpx;
    flex-shrink: 0;
    flex: 1;
}

The style of left child element adaptive parent element height needs to be implemented:

In flex layout, the height of the parent element is auto, which is supported by one child element, and the other child element is adaptive to the height
You can see that the child element still has a space to fill the parent element.

In this case, simply change the align items: Center; of the parent element toalign-items: stretch;
In flex layout, the height of the parent element is auto, which is supported by one child element, and the other child element is adaptive to the height
At this point, the child element box has already adapted to the height of the parent element.
Align items: stretch; the implementation is to stretch the side axis.

Recommended Today

PHP 12th week function learning record

sha1() effect sha1()Function to evaluate the value of a stringSHA-1Hash. usage sha1(string,raw) case <?php $str = “Hello”; echo sha1($str); ?> result f7ff9e8b7bb2e09b70935a5d785e0cc5d9d0abf0 sha1_file() effect sha1_file()Function calculation fileSHA-1Hash. usage sha1_file(file,raw) case <?php $filename = “test.txt”; $sha1file = sha1_file($filename); echo $sha1file; ?> result aaf4c61ddcc5e8a2dabede0f3b482cd9aea9434d similar_text() effect similar_text()Function to calculate the similarity between two strings. usage similar_text(string1,string2,percent) case […]