DevOps:Doc/FlexForm/2.1/instance/adjust styling

Below is an image explaining where the CSS classes are used.

An instance ( like in the image above, an instance is one row ) is rendered using the following HTML:

• BEGIN Div element with Main wrapper class
  • BEGIN Div element with Wrapper list class
    • BEGIN Instance wrapper ( wrapper-main-extra )
      • Move Handle as a span element ( button-move-extra )
      • Delete button as a span element ( button-remove-extra )
      • Add instance button as a span element ( button-add-extra)
      • The HTML that is used in the form inside the instance tag. ( In the image above it's the two input fields )
    • END Instance wrapper ( wrapper-main-extra )
  • END Div element with Wrapper list class
  • Button to add new row at the bottom or create the first row if the instances are empty ( button-on-button-class )
• END Div element with Main wrapper class

We give the wrapper main a display of Flex. Then we use flex to order the element inside an instance.