我有一個包含三個專案的彈性容器，彈性方向設定為行。我為三個盒子中的每一個放置了不同的尺寸，以便它們按升序排列。item 1 應該是 100px，item 2 應該是 400px，item 3 應該是 800px。當我運行它時，它是相反的。為什么這是反向的，我如何使它不反向？
https://codepen.io/sgtsnoots/pen/XWgPZbE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="flex-container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
<h1>hello</h1>
</body>
</html>
CSS
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body{
font-family: Arial, Helvetica, sans-serif
}
.flex-container {
display: flex;
flex-direction: row;
background-color: #aaa;
/*always on the main access X axis */
/* justify-content: start; */
/*always on the cross access Y axis*/
/* align-items: flex-start; */
/* flex-wrap: wrap; */
}
.item {
background: #254de4;
color: #fff;
/* flex-basis: 100px; */
height: 100px;
/* margin: 10px; */
/*same thing for above, but for div contents*/
border: 2px solid magenta;
display: flex;
justify-content: center;
align-items: center;
margin: 10px;
}
.item:nth-last-of-type(1){
flex-basis: 100px;
}
.item:nth-last-of-type(2){
flex-basis: 400px;
}
.item:nth-last-of-type(3){
flex-basis: 800px;
}
uj5u.com熱心網友回復：
如果您使用 :nth-child() 您的問題將得到解決。
:nth-child() CSS 偽類根據元素在一組兄弟元素中的位置匹配元素。
:nth-last-of-type() CSS 偽類根據元素在相同型別（標簽名稱）的兄弟中的位置匹配元素，從末尾開始計數。
uj5u.com熱心網友回復：
不要使代碼復雜。就這樣做
.flex-container {
display: flex;
flex-direction: row;
}
.flex-container .item{
color:white; \\ to see the items
background:black;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/466343.html