Flex is used to align divs like menus, but they don't line up well
The error message is not specific.
<div class="fluid-wrap">
<div class="el"></div>
<div class="el"></div>
</div>
body{
margin:0;display:flex;justify-content:center;
}
.fluid-wrap{
width —80%;
background:brown;
height:100vh;display:flex;
flex-wrap:wrap;
}
div>div{
flex: 100%;
}
.el{
height —20px;
background: #ffa;
}
I thought the align-items might be related, so I modified the align to start, but I couldn't see any special changes
pass —4.11.0
windows:10
In this case, handling the margins between flex items is a problem, not the placement of flex items.In other words, you must consider the value of the align-content property instead of the align-items property.
According to the CSS Flexible Box Layout Module Level 1, the initial value of the align-content property is stretch.This value inserts the margins evenly so that the sum of each item on the cross axis is the dimensions of the flex container.
Therefore, in order to do what the questioner wants to do, the CSS needs to be modified as follows:
body{
margin:0;
display:flex;
justify-content:center;
}
.fluid-wrap{
width —80%;
background:brown;
height —100vh;
display:flex;
flex-wrap:wrap;
align-content:flex-start; /*addition */
}
div>div{
flex: 100%;
}
.el{
height —20px;
background: #ffa;
}<div class="fluid-wrap">
<div class="el"></div>
<div class="el"></div>
</div>
582 PHP ssh2_scp_send fails to send files as intended
917 When building Fast API+Uvicorn environment with PyInstaller, console=False results in an error
613 GDB gets version error when attempting to debug with the Presense SDK (IDE)
578 Understanding How to Configure Google API Key
573 rails db:create error: Could not find mysql2-0.5.4 in any of the sources
© 2024 OneMinuteCode. All rights reserved.