About the layout of flex

ask
< div class= "box" > 

<span class="item"></span>
<span class="item"></span>

< / div >

.box {

        display: flex;
        justify-content: space-between;
    }

set up so that both span are on both sides of the box

< div class= "box" > 

<div class="column">
    <span class="item"></span>
    <span class="item"></span>
</div>

< / div >

.column {

        display: flex;
        flex-basis: 100%;
        justify-content: space-between;
    }

also sets the alignment of items in the container, but the second two containers are nested together. Why should the project of the internal container set flex-basis, and span to be on both sides of the container

Front-end
Mar.16,2021

first of all, it is not a question of whether or not to add flex-basis. As for the reason, see my explanation.

I wrote a version without flex-basis as you said. For ease of viewing, I added background color and words

. 
   


 as you said, next to each other, but did you find a problem? I clearly wrote a black background color to column, but why is there no background color in the second line? That's the problem. 


 column is supposed to be a div, that should take up a full line, but because box is set to flex, column is no longer a block element, its width only varies with the content, while the content of column has only two span, so the width of column becomes the sum of the widths of two span. 


 in fact, the two span in the second line are still arranged on both sides of the column, just like the two span in the above line, but because the width of the column is equal to the sum of the width of the two span, it looks as if the two span are arranged from left to right instead of on both sides. 


 the conclusion is that to solve this problem, as long as you find a way to make the width of the column the same as the box of the first row, the arrangement of the two span of the second row will look the same as that of the first row. Your flex-basis:100% has achieved this effect. There are other ways to solve this. You can find out for yourself. Principle is the most important thing.

Previous: How can echarts's markpoint be hidden when switching to saving time across the country?

Next: Location of the mysql error log

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