reactjs 我是否以错误的方式使用Flexbox和断点?

rn0zuynd  于 2023-01-30  发布在  React
关注(0)|答案(2)|浏览(88)

我正在reactjs中练习材质UI中的flexbox和breakpopint,我尝试做一些类似的事情:

我所要做的是设置我的产品图片和类型作为列和产品的价格,名称,数量等作为行
下面是我代码:
https://codesandbox.io/s/quizzical-bassi-5844oo?file=/src/App.tsx

eyh26e7m

eyh26e7m1#

*选项01:

<Box sx={{display: "flex",flexDirection:"row",width:"100%"}}>
                <Box sx={{display: "flex",flexDirection:"column",width:"50%"}}>
                  <span>{product.name}</span>
                  <span>{product.quatity}</span>
                   <span>
                    {product.content?.map((item) => (
                      <li>{item}</li>
                    ))}
                  </span>
                    <span>Remove</span>
                </Box>
                <Box sx={{display: "flex",flexDirection:"column",width:"50%",alignItems:"end"}}>
                    <span>item.price</span>
                    <span>total price</span>
                </Box>
                </Box>
              </Box>

*选项02:

<Box
                  sx={{ display: "flex", flexDirection: "row", width: "100%" }}
                >
                  <Box
                    sx={{
                      display: "flex",
                      flexDirection: "row",
                      width: "100%"
                    }}
                  >
                    <Box
                      sx={{
                        display: "flex",
                        flexDirection: "column",
                        width: "50%",
                        alignItems: "start"
                      }}
                    >
                      <span>{product.name}</span>
                      <span>{product.quatity}</span>
                      <span>
                        {product.content?.map((item) => (
                          <li>{item}</li>
                        ))}
                      </span>
                      <span>Remove</span>
                    </Box>
                    <Box
                      sx={{
                        display: "flex",
                        flexDirection: "column",
                        width: "50%",
                        alignItems: "end"
                      }}
                    >
                      <span>item.price</span>
                      <span>total price</span>
                    </Box>
                  </Box>
                </Box>
              </Box>
az31mfrm

az31mfrm2#

不完全确定你要找什么。我假设你想在最后的定价信息的弹性盒。
您可以参考this site获取Flexbox信息
我会说看看对齐-内容-间隔,与灵活的行方向。

相关问题