what i want is place the child item with "k","m","n" to the red area.
If i use align-items:flex-start these box does not located at correct position,
need to change to align-items:flex-content.
Source:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Flex layout</title><style>#flex-container {width:600px;height:300px;border:1px solid #aaa;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;}#flex-container .item {width:50px;height:50px;background:#eee;margin:5px;}</style></head><body><h2>flow-grow</h2><div id="flex-container"><div class="item" style="flex-grow:1">a</div><div class="item">b</div><div class="item">c</div><div class="item">d</div><div class="item">e</div><div class="item">f</div><div class="item">g</div><div class="item">h</div><div class="item">i</div><div class="item">j</div><div class="item">k</div><div class="item">m</div><div class="item">n</div></div></body></html>
for multi row with wrapped child items, should use
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flex layout</title>
<style>
#flex-container {
width:600px;
height:300px;
border:1px solid #aaa;
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:flex-start;
align-content:flex-start;
}
#flex-container .item {
width:50px;
height:50px;
background:#eee;
margin:5px;
}
</style>
</head>
<body>
<h2>flow-grow</h2>
<div id="flex-container">
<div class="item" style="flex-grow:1">a</div>
<div class="item">b</div>
<div class="item">c</div>
<div class="item">d</div>
<div class="item">e</div>
<div class="item">f</div>
<div class="item">g</div>
<div class="item">h</div>
<div class="item">i</div>
<div class="item">j</div>
<div class="item">k</div>
<div class="item">m</div>
<div class="item">n</div>
</div>
</body>
</html>
result:
No comments :
Post a Comment