as shown in the following figure, display:flex;justify-content: space-arround;flex-wrap: wrap; is set, but the extra two div are not displayed to the left
as shown in the following figure, display:flex;justify-content: space-arround;flex-wrap: wrap; is set, but the extra two div are not displayed to the left
you set justify-content: space-around; this is based on the width average distribution interval
if you want to align to the left, use justify-content: flex-start; , but then you have to manually set the interval
this layout I usually use justify-content: flex-start , then each 25% width of the child elements of the first layer, and then set a padding, so that the interval of each is the same
justify-content: flex-start;you set justify-content: space-arround;, if you want to keep to the left, you should justify-content: flex-start
you can generate two more empty nodes and keep it four times as many as
this layout can also be arranged with grid
.list-item {
width: 22%;
margin-right: 4%;
&:nth-child(4n) {
margin-right: 0;
}
}parent settings
flex: 1;
display: flex;
flex-wrap: wrap;
align-content: flex-start; solved:
parent node. Game-wrap:
.game-wrap{
display: flex;
flex-flow: row wrap;
}Child node: .game-box {}
.game-box{
flex: 0 1 250px;
} 
Previous: Idea always prints the reconnection log of redis, how to turn it off?
Next: How do you compare the following mobile layout practices?
want to explain how to make table different colors? is not different. is . <table> <tr> <td width="100">a< td> <td><a>< td> < tr> <tr> ...
<template> <div style="height: 100%;"> <mt-header title=""> <mt-button icon="back" slot="left" v-tap="{methods: switchView, view: Post }">< mt-button> &l...
$(document).ready(function(){ $(".pageloading").show(); $(window).on("load", function() { $(".pageloading").fadeOut(); }); }); google chrome can, will $( ".pageloading "). FadeOut (); but the safari networ...
regarding the problem of css style, the parent div sets the property of overflow-y:auto, in which the box-shadow attribute of div cannot be displayed on the left and right sides. code is as follows: <div id="box"> <div class=&qu...
is flex compatible with ie9 when using postcss? ...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title< title> <style type="text css"> html, body { height: 100%; wid...
as shown in the figure above, use css to make a magnification effect when a mouse passes over a square, but as soon as you enlarge a square, the square next to it will be squeezed out or squeezed into the next row. Is there any way to fix the enlarge...
I have two elements, a parent element and a child element. the parent element rotates N degrees. then I want to move the positioning of the child element, which moves relative to the parent element. how do I calculate the offset value. Let it move re...
does the use of font-family in the pc page css cause font infringement ...
< H1 > problem description < H1 > while writing transition animation, I inadvertently found that sometimes the page would jam, and the Chrome memory of the viewing task manager suddenly soared. After various exclusions, I found that transform:skew (9...
<view style= display:flex > <view style= display:flex;flex:1;flex-direction:column;align-items:stretch; > <view class= >:<text style= color:-sharpff0000 >{{ sum - promTotal }}< text>< view> <view ...
works well in other browsers, but three 1s appear under Firefox ...
Note: 1. Background gray 2. The coupon has a shadow, but the shadow of the gap also needs a gap. I hope shadows and rounded corners can be controlled by css. 3. It is hoped that the position of the center line can be controlled by css. seek opt...
our previous code is adapted to Google and Firefox, but now it is required that the code is compatible with IE11 browsers. It is impossible for me to rewrite the code, is it? Is there any quick way to solve it as soon as possible? The error is as follow...
@ media only screen and (min-width:320px) {html {font-size:12px;}} @ media only screen and (min-width:375px) {html {font-size:13px;}} @ media only screen and (min-width:412px) {html {font-size:14px;}} htmlrem1rembodypagepage1rem1rem16px1rem ...
for example, can there be a gray between payment and order price , but if this gray line is not all , then it is about 80% and then put it in the middle . Can this be done ? Update every line is only 80% . ...
use vue to do a nine-grid lucky draw, which is fast at the beginning, slow down after a few laps, and can control where to stop. There is a big lucky draw button in the middle of the prize. How to write the style, ask for advice ...
ios11 system, Wechat and browser are not good, animation cannot be paused at the beginning, and no problems are found in computer or qq <div className="c-Random-started" onClick={this.randomVisible} style={this.state.clickonthe...
AnimationPlayState: paused fails on ios, so I m going to abandon it. I see a divine solution https: codepen.io HaoyCn pen., but I don t know how to write it on react, ask for advice! <div style={this.props.clickonthe ? { AnimationPlayS...
https: fonts.google.com spec.:400,500,500i,700 https: fonts.google.com specimen Ubuntu?selection.family=Ubuntu:400,500,500i,700 I choose Ubuntu and then I check regular 400 and I introduce it to the web site and write it like this . font-family: ...