how to use start and end in css position reletive or others?-CodePudding

I'm trying to use multiple languages in my nextjs project and MUI library, and I m setting my body element of my project direction using locale.

  const App = (props: MyAppProps) => {
    const {
        Component,
        emotionCache = clientSideEmotionCache,
        pageProps,
    } = props;

    const router = useRouter()
    const { locale } = router;
    

    return (
        <CacheProvider value={emotionCache}>
            <ThemeProvider theme={getTheme(theme)}>
                <CssBaseline />
                <GlobalStyles styles={{
                    body:{
                    backgroundColor:getTheme(theme).palette.Background.background,
                    direction:locale==="fa"?"rtl":"ltr"
                    }
                }}/>
                <Component {...pageProps} />
            </ThemeProvider>
        </CacheProvider>
    );
};

and that works fine with the text-align property but I have a problem with positioning my elements because there are right, left, bottom, top properties in positioning, and there isn't a start and end property. for example:

 width:50px;
 height:50px
 position: relative;
 left:2px

my element with the position above, I want to position 2px from left in RTL directional language like Persian but I want to position it 2px from right in LTR directional language such as the English Language. it is usually done with start and end properties but in css i dont know because there isnt sutch a thing in position property.so my question is how can I position the elements base of start and end?

CodePudding user response：

display Put your element in flex mode and use the justify-content, ... capabilities. go to enter link description here

CodePudding user response：

I am unable to understand your code, But question is related to CSS that's why I am providing you some idea. Let's you have a element <div id="element" >Your contents</div>

Now, put this css in your style page->

#element.rtl {
 left: 2px;
}
#element.ltr {
 right: 2px;
}

Hope this will help you. If not, comment here.

CodePudding user response：

You have to set position relative to div element and lest or right position to nested div element.

Structure your HTML similar to this:

<div id="container">
  <div ></div>
  <div ></div>
</div>

CSS

#container {
  position: relative;
}

#container > * {
  position: absolute;
}

.left {
  left: 2px;
}

.right {
  right: 2px;
}