I have engineers look at my designs with auto layout and I realised the align-items with auto layout in the code seems wrong. Here is the example. I have a container with 2 columns, the right side column has ‘right alignment’ in design. When an engineer inspects this they see align-items:center which is wrong. it should be align right. Any idea whats causing this? SO when my engineers look at this they don’t know what way I aligned things inside the column.
Set to right in auto lyout
Align shows as center in inspect for that second column
See no issues. Align items is for vertical alignment, horizontal is made with justify content. Seems like your engineering team needs some basic css courses lol
Your team probably needs to review their flexbox knowledge. As the previous poster said, the behavior of align-items affects how the items are positioned on the cross axis, so in your example it correctly describes the items as being vertically centered.
Here’s a good flexbox guide that I used to reference a lot back when I was very confused by all this: A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks
Edit: It also might be worth mentioning that based on the UI in your screenshots, your developers might approach it in a couple different ways if they’re using flexbox. So usually in similar situations I like to have my own opinion about it in Figma, but I would describe how you want that “Players available” text to behave in responsive or longer-string situations (should it break to two lines? truncate?), so the developers can get to the result you’re looking for.