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>
© 2024 OneMinuteCode. All rights reserved.