CODEWITHSUNDEEP
cssflexbox
Geoff
Geoff

Reputation: 13

Left-aligning rows of flex content

Ok, I have been looking and not seeing any questions close enough to extrapolate an answer..

I have a large list (UL / LI) of color options displayed in a flex container, and need to have the columns align to the left. Currently the first row is offset, and I am not seeing how to get it to display like the remaining rows.

I have experimented with the CSS - padding, margins, justify options, alignments, changing from row to columns, etc. I accept that the CSS may be sloppy, and any assistance is greatly appreciated.

Here is the CSS applied to the page (URL: https://winepaperscissors.com/custom-item-request/):

.colors .control-label{
  display: none;
}
.colors {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: center;
}
.colors img {
  width: 10vmin;
  border-radius: 50%;
  margin-top: 6px;
  display: block;
}
.colors input[type="radio"]{
    visibility:hidden;
}
.colors input[type="radio"]:checked + img {
    border: #444444 5px solid;
}

The entire color selection is in the .colors class, and is an inline unordered list.

Upvotes: 1

Views: 33

Answers (1)

Taki
Taki

Reputation: 17654

it's because all the labels have a margin-left:10px except the first one

this part .caldera-grid .radio-inline + .radio-inline means that the margin-left:10px is applied to the labes .radio-inline that comes after .radio-inline

replace this

.caldera-grid .checkbox-inline + .checkbox-inline, .caldera-grid .radio-inline + .radio-inline

with

.caldera-grid .checkbox-inline + .checkbox-inline, .caldera-grid .radio-inline + .radio-inline, .radio-inline:first-of-type

to add the margin-left:10px to the first .radio-inline

or simply replace it with :

.caldera-grid .checkbox-inline + .checkbox-inline, .caldera-grid .radio-inline

removing the + .rdio-inline

Upvotes: 1

Related Questions