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

rn0zuynd 于 2023-01-30 发布在 React

关注(0)|答案(2)|浏览(83)

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

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

reactjs

来源：https://stackoverflow.com/questions/75272818/am-i-using-flexbox-and-breakpoints-in-a-wrong-way

2条答案

按热度按时间

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>

赞(0）回复(0）举报 2023-01-30

az31mfrm2#

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

赞(0）回复(0）举报 2023-01-30