[英]removing the y-axis margins
我一直在嘗試制作磚石類型的布局,所以我給 div 提供了隨機高度和 colors,但 div 似乎有 y 軸邊距。 我希望 div 具有統一的邊距,以便它們看起來更像磚石布局。 這段代碼我哪里出錯了?
import React from "react";
import "./styles.scss";
const colors = ["palevioletred", "red", "green", "blue", "yellow", "orange"];
const getRandomItem = items => {
return items[getUniqueFromRange(0, items.length)];
};
const getUniqueFromRange = (min, max) => {
return Math.floor(min + Math.random() * (max - min + 1));
};
export default class App extends React.Component {
render() {
return (
<div class="wrapper">
{Array.from({ length: 30 }).map((item, index) => (
<div
key={index}
style={{
background: getRandomItem(colors),
height: getUniqueFromRange(100, 200)
}}
/>
))}
</div>
);
}
}
* { box-sizing: border-box; }
body {
margin: 40px;
background-color: #fff;
color: #444;
font: 2em Sansita, sans-serif;
}
.wrapper {
display: flex;
flex-wrap: wrap;
}
.wrapper > * {
flex: 1 1 230px;
border: 5px solid orange;
border-radius: 5px;
margin: 10px;
padding: 10px 20px;
background-color: red;
color: #fff;
}
* {
box-sizing: border-box;
}
body {
margin: 40px;
background-color: #fff;
color: #444;
font: 2em Sansita, sans-serif;
}
.wrapper {
display: flex;
flex-direction: column;
flex-wrap: wrap;
max-height: 100vh;
}
.wrapper > * {
border: 5px solid orange;
border-radius: 5px;
margin: 10px;
padding: 10px 20px;
background-color: red;
color: #fff;
}
試試這個,看看它是否是你要找的。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.