I'm new in SLDS. I start working a project with my client. I looking the design part of that project. I seen SLDS using CSS3 Flexbox property. It's good but some Flexbox property is missing. Like Flex Direction css is missing. They are set .slds-grid{ display: flex;} but they are not describe how flex items are placed in the flex container defining the main axis and the direction (normal or reversed) (note: display: flex; default flex-direction: row). Also If I set to .slds-wrap they are add extra css align-items: flex-start.

Question 1: I don't understand what is the benefit to add align-items: flex-start; with flex-wrap: wrap; by default in .slds-wrap class?

Question 2: How I describe my flex container defining the main axis and the direction normal or reversed? If I need flex-direction: row; more than or equal to 1024px @media and flex-direction: column less than or equal to 1023px @media?

I'm looking for Lightning Design System utility class not custom CSS solution.


You are gonna have to provide bit more specific with screenshots or HTML mark-ups. However, you can find all the required SLDS here.

At a high level, I would say get rid of the custom CSS and make use of grid related SLDS classes (inline CSS in the HTML). For example, this could help you specify the order in which HTML content should be displayed or this could help you with responsive designing.

slds-small-* class corresponds to mobile devices ( >= 468px & < 768px), slds-large-* class corresponds to desktops or larger devices ( >= 1024px ) etc. You can use these classes on a single HTML element and Salesforce will render it accordingly based on the user device.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.