Should I replace all margin-left with logical properties?

For new projects, yes. Logical properties future-proof RTL. Keep physical properties only when you truly mean screen-left.

Does direction: rtl flip flexbox?

Flex main-start follows inline direction. Test both LTR and RTL; use logical properties on gaps and margins.

All modern browsers support them. Provide physical fallbacks only if you must support very old browsers.

Spacing follows text direction automatically.

LTR chips

OneTwo

margin-inline adds space along the inline axis.

RTL chips

واحداثنان

Same CSS flips spacing in RTL.

.chip { margin-inline-end: 0.5rem; padding-inline: 0.5rem 0.75rem; }
.card { padding-inline: 1.25rem; padding-block: 1rem; }

Borders and radii can be logical too.

Accent bar

Logical start border follows reading direction.

border-inline-start highlights the leading edge.

.quote {
  border-inline-start: 4px solid #6366f1;
  padding-inline-start: 1rem;
}

Block and inline axes rotate for vertical layouts.

Vertical label

Vertical

writing-mode: vertical-rl stacks characters top-to-bottom.

.label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

Should I replace all margin-left with logical properties?: For new projects, yes. Logical properties future-proof RTL. Keep physical properties only when you truly mean screen-left.
Does direction: rtl flip flexbox?: Flex main-start follows inline direction. Test both LTR and RTL; use logical properties on gaps and margins.
Are logical properties well supported?: All modern browsers support them. Provide physical fallbacks only if you must support very old browsers.