now has the following html structure, the number of li tags is unknown and variable, you need to use the ul tag display: flex to layout, the page effect is shown in the figure.
effect description:
figure 1. What to do when there are not enough li tags?
figure 2. What should I do when the distance of the li tag is greater than the width of the li tag?
<ul>
<li></li>
...
<li></li>
<ul> 
flex reference https://codeshelper.com/a/11...
use space-between
When li is not enough, the li added
hides the opacity:0 or visibility:hidden with a special class
this you can refer to teacher Ruan Yifeng's flex layout
actually, I don't know what you're trying to say here:
ul {
display: flex;
flex-wrap: wrap; //
}2. I think what you mean is that the spacing is too big to look good. You can set all these by yourself, such as setting the first margin-left and the third margin-right. Adjust the layout yourself. Then through the energy: nth:child () to set 1, 4, 4, 7. Margin-left, and margin-right
of 3Jet 6 and 9.using flexible layout, I originally intended to make the following page. The width of the right box div2 is the rest of the screen width, and the ul has a lot of li , which can be scrolled horizontally. html css The width of div2 has be...
the three red ones are adjacent. structure: div.flex div.box div.box div.box ...
the style of the above figure is as follows: <view style= display:flex;justify-content:space-between;align-items:center; > <view style= display:flex;align-items:center; > viewflex <image>< image> &...
I have learned flex layout these days, and there are some simple demo, on the Internet. I want to combine some real projects to learn. Do any great gods know which domestic websites are laid out with flex? I want to learn through F12. ...
want to achieve this effect Note: the left and right sides are fixed v-for 4: 25% if you set the margin, there is also one end that cannot be aligned. the style of my elastic box. <div class="box"> <div v-for="i...