<div id="band"> <div style="background-color: red">John</div> <div style="background-color: green">Paul</div> <div style="background-color: blue">George</div> <div style="background-color: yellow">Ringo</div> </div> <style> body { background-color: slategray; display: flex; justify-content: center; align-items: center; } #band { background-color: white; margin: 0 auto; border-style: solid; border-width: 2px; max-width: 740px; width: 100%; display: flex; /* justify-content: flex-start; */ /* flex-start is the default justify-content */ flex-wrap: wrap; } #band > div { width: 200px; height: 200px; /* center all the names inside each box */ display: flex; justify-content: center; align-items: center; } </style>
Its output is:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKIIFCPRFL1y06_YcqQ8gaU5X7rVYMWG10FLVbLybLsObQpAxHgk47bRorEHKkagVRWF_IlYPsHRpTbM1OmMX9lWKr8UMnlIs9CZfyUF5GkRxlP_YBYmDUBJfAVQJ-Ve-HDzkkfW8I3YGc/s640/flex-as-grid-left.png)
If we change the justify-content to center:
display: flex; justify-content: center; flex-wrap: wrap;
Not only the first row's items are centered, the last item will be centered as well, which is not we want:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDPLU9iZ-WNBFYZvXjNJquhMhWrhRwikHZszEAjtf-8tj-hXpKq9yHOunodj56iT31BzdMPu_lJYx6D-p0Ho8VTNsW29WPc7HfFZPwkv2mHm6BQ-OwL3MBP_sY9dbP5hBh5idUOF5-VEV9/s640/flex-as-grid.png)
If we want to wrap extra items at leftmost and keep the whole grid of items at the center, we need to use grid instead of flex, and replace flex-wrap: wrap to repeat autofit and minmax. To wit:
display: grid; justify-content: center; grid-template-columns: repeat(auto-fit, minmax(200px, max-content));
The output is correct:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsCHeLWyGthBe_1Zm6kjEfA2VKBLxN0a8QdgWIeKEfqw98A2VICTZCvm5W1-zBUscshfdXPht5fY4J5xel4uz9ZJK7cVzubfjz6Gcw1lVLR7YG2nukklYfqMWFfsZy0dIJlcL8ofgzXydz/s640/grid-centered.png)
On the above display grid and grid-template-columns settings, if we change the justify-content to end:
display: grid; justify-content: end; /* flex-end works as well, but we will just be confusing ourselves with that, we are using grid not flex */ grid-template-columns: repeat(auto-fit, minmax(200px, max-content));
The output is:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinhj9pJiweVuwODcibkplHh4m17aCDuBBBmKFw0JSPb1wdooLKtV6xnC3bIeWaJCcvtPH5IU1JpX7uZ8dRiuT3T1T79Tg2m_Z4rQiniSG0VkCb6rOU5BmtJ3rwmwzmtZacWO1KdOSdxZcS/s640/grid-end.png)
To contrast with flex-end of display: flex:
display: flex; justify-content: flex-end; flex-wrap: wrap;
The output is:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2dcdzvivbhvEHj3HITizMBVdFIpLaQ1_D92rXjH8Kexa2KhR5VF2R2tmsXZcsuF7R3hZ-M-NNr9u9tOKI6bw61JuKntZQnDoywX2CW-p0NILo3X8UH6fwK9u2BS-Xto_6IGUPL5S-MM93/s640/flex-end.png)
Same settings above, but with five items:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEuF5ShcGpgtTxVRvywRY0czdEimVKzfW9Ph2O5Y-8UxOiv_h5RcqIGsIwk8dJaN2JVQgw7BTH5wqMelwZunfEZGyvZSHuNgl9HK6WO5_BEsKYBiNqE0nsKrLmvfkY_uIGPAlUlBdcgxpB/s640/flex-end-brian.png)
Let's use grid again with justify-content of end:
display: grid; justify-content: end; grid-template-columns: repeat(auto-fit, minmax(200px, max-content));
Its output:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvEdKbvgu5lVv27Gn0iWGFF2UxIJ2Q7UhfSwiKVXrbXtcE7oMW7BKUtOCXEVFbXT4spnO-UTT3rKR7HVrSg1LxDuu1q00Y3XLBbHN5-q4Qtd5wFR0r7oXIVKg9h1LJcDnsO2tNgtDK8yAh/s640/grid-end-brian.png)
This flex's flex-start:
display: flex; justify-content: flex-start; flex-wrap: wrap;
And grid's start:
display: grid; justify-content: start; grid-template-columns: repeat(auto-fit, minmax(200px, max-content));
Have same output:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl3vUmzl55EMn0FXIWT-dT47jiYLd7acNoYttWhCE9Iv0vp8R3u5HZOkmRkwy3RSNt2GJyy2CSPOtl7CfQrP-YDjSECJVebEunej50_VbZuveATVhHKm270MBD9udt0YCKzcoJiHC3hVcH/s640/flex-grid-same-output.png)
No comments:
Post a Comment