html - 最大宽度不适用于 flexbox+align-items: center
问题描述
我有一个包装器,可以将所有东西放在中心:
const Wrapper = styled.div`
display: flex;
flex-direction: column;
align-items: center;
`;
但是由于align-items: center
某些原因,包装器内部的最大宽度组件会缩小。
我怎样才能在不接触包装纸的情况下解决这个问题?
CodeSandBox: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%;
`;
推荐阅读
- python - 在类中调用对象
- google-earth-engine - 我收到此错误:生成图表时出错:轴 # 0 的数据列不能属于字符串类型
- swiftui - 值更改后条件不触发
- powershell - 从网络文件夹静默安装 msi 和 exe
- python - Python3 无法“az login”
- amazon-web-services - Cloudtrail 数据事件到 SQS
- python - 使用 Python THREADS 加速我的 API 调用
- computer-vision - 是否可以从 Lyft 的 Level5 数据集中获取注释的像素坐标?
- sql - 检索名称 SQL Oracle
- javascript - 通过数组中的键获取对象