First and foremost, I want to express my gratitude in advance for any assistance you can provide. My goal was to neatly align three pieces of content within each row, similar to the image displayed here: https://i.sstatic.net/vtsRj.png
To achieve this layout, I attempted to utilize flexbox properties such as display: flex, flex-direction: column;, and experimented with align-items and justify-contents. Unfortunately, the result did not meet my expectations. Instead of the clear arrangement shown in the reference picture, my content appeared as depicted here: https://i.sstatic.net/QaQeY.png
If you could offer insight or guidance on how to address this issue, I would greatly appreciate it. Below is the code snippet I've been working with:
.contentsWrapper {
display: flex;
width: 100%;
height: 1000px;
// background-color: blue;
padding: 5px;
.contentsSide {
width: 280px;
padding-left: 48px;
padding-right: 48px;
.HorizontalLine {
width: 160px;
margin-bottom: 20px;
border-top: 1px solid rgba(0, 0, 0, 0.3);
}
.colors {
display: flex;
flex-direction: column;
span {
margin-bottom: 20px;
}
.colorLists {
margin-left: 10px;
float: left;
.colorLayout {
float: left;
// flex-wrap: wrap;
display: flex;
flex-direction: column;
// justify-content: space-between;
// align-content: space-around;
position: relative;
// display: grid;
// grid-template-columns: repeat(3, 20%);
margin-right: 15px;
margin-left: 3px;
label {
background-color: beige;
border: 1px solid #ccc;
border-radius: 50%;
cursor: pointer;
height: 28px;
left: 0;
position: absolute;
top: 40;
width: 28px;
&:after {
border: 2px solid #fff;
border-top: none;
border-right: none;
content: '';
height: 6px;
left: 7px;
opacity: 0;
position: absolute;
top: 8px;
transform: rotate(-45deg);
width: 12px;
}
}
input[type='checkbox'] {
visibility: hidden;
}
input[type='checkbox']:checked {
& + label {
background-color: beige;
border-color: beige;
&:after {
opacity: 1;
}
}
}
.productColor {
margin-top: 15px;
font-size: 13px;
width: 61.25;
height: 25px;
}
}
}
}
.sizes {
.HorizontalLine {
}
.span {
}
.sizeLists {
margin-top: 20px;
margin-bottom: 20px;
button {
margin: 5px;
}
}
Here is the corresponding JavaScript file section:
<ul className="colorLists">
{COLOR_LISTS.map(color => {
return (
<li className="colorLayout" title="베이지">
<input type="checkbox" id="checkbox"></input>
<label
for="checkbox"
style={{ backgroundColor: color.colorProps }}
></label>
<span className="productColor">{color.color_name}</span>
</li>
);
})}
</ul>