我有一个包装器,可以让一切都居中:
const Wrapper = styled.div`
display: flex;
flex-direction: column;
align-items: center;
`;
但由于 align-items: center
包装器内具有最大宽度的组件由于某种原因被缩小了。
如何在不接触包装器的情况下解决这个问题?
代码沙盒:https://codesandbox.io/embed/styled-components-qqkos
完整代码:
import React from "react";
import { render } from "react-dom";
import styled from "styled-components";
const Wrapper = styled.div`
display: flex;
flex-direction: column;
align-items: center;
`;
const Component = styled.div`
display: flex;
flex-direction: row;
`;
const Input = styled.input`
max-width: 1000px;
width: 100%;
`;
const Button = styled.button``;
const App = () => (
<Wrapper>
<Component>
<Input type="text" />
<Button>ClickMe</Button>
</Component>
</Wrapper>
);
render(<App />, document.getElementById("root"));
最佳答案
好的,问题可以这样解决:
const Component = styled.div`
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
`;
关于html - 最大宽度不适用于 flexbox+align-items : center,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56532913/