英文:
CSS flexbox not working when switching to mobile view
问题
在桌面视图上，Flexbox正常工作并将所有内容居中对齐。但是，在移动视图中，前两个项目（appName和appDescription）没有居中对齐，而其他两个（instructions和potd）居中对齐。这是因为在移动视图中，您对appName和appDescription的CSS样式做了以下更改：
appName: {
fontSize: '1.5rem',
margin: '2rem 0 2rem 0',
},
这些更改会影响它们的居中对齐。要解决此问题，您可以尝试将appName和appDescription的CSS样式更改回如下：
appName: {
margin: '3rem 0 3rem 0',
fontSize: '3rem',
},
这应该会在移动视图中使它们居中对齐，与桌面视图一致。希望这能帮助您解决问题。
英文:
I'm learning to use css with mobile responsiveness and got to a sticking point. I have some content that I am using flexbox on and everything seems to be working correctly on the desktop view, but isn't working the way I want it to in the mobile view.
Here is a screenshot of the desktop view:
And the css for it:
const useStyles = makeStyles((theme) => {
return ({
home: {
display: 'flex',
alignItems: 'center',
flexDirection: 'column',
},
appName: {
margin: '3rem 0 3rem 0',
fontSize: '3rem',
},
appDescription: {
fontSize: '1.5rem',
},
instructions: {
margin: '1rem',
},
potd: {
marginTop: '3rem',
textDecoration: 'underline'
},
Here is a screenshot of the mobile view:
and the css for that:
[theme.breakpoints.down('sm')]: {
home: {
display: 'flex',
alignItems: 'center',
flexDirection: 'column',
},
appName: {
fontSize: '1.5rem',
margin: '2rem 0 2rem 0',
},
appDescription: {
fontSize: '1.5rem',
},
instructions: {
margin: '1rem',
},
potd: {
marginTop: '3rem',
textDecoration: 'underline'
},
Here is also the html layout:
<div className={classes.home} >
<h1 className={classes.appName} >International Space Station Tracker</h1>
<p className={classes.appDescription} >Follow the ISS on its journey around the globe.
Get real time data on it's current location and the astronauts on board.
</p>
<p className={classes.instructions} >- Open the menu and select ISS Map -</p>
<h2 className={classes.potd} >NASA Photo of the Day</h2>
</div>
So the flexbox works in the desktop view and centers all the content, but when I switch to mobile the first two items (appName and appDescription) are not centered. The other two (instructiond and potd) are centered though? Can someone explain why this is and how I can fix it?
答案1
得分: 0
你的对齐仅适用于Flex容器中的项目。这意味着你对齐项目而不是内容。你的桌面版本看起来不错，因为文本不太长，不会溢出到外面。
你可以使用属性 text-align:center，或者如果你想继续使用Flex，可以使用 justify-content:center。
英文:
Your align is only for the Items in the Flex Container. It means that you align the Items not the Content. Your Desktop Version looks good because the text is not so long to break on the outside.
You can use the property text-align:center or if you want to stay in Flex you can use justify-content:center
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论