這個問題在這里已經有了答案： 在 CSS Flexbox 中，為什么沒有“justify-items”和“justify-self”屬性？ (6 個回答) 39 分鐘前關閉。
.nav {
height: 500px;
}
.navphoto {
height: 500px;
display: flex;
justify-content: flex-end;
}<div class="nav">
<img class="navphoto" src="images/navphoto.jpg">
</div>正如標題所說：為什么我不能移動影像，但是當我將彈性代碼放入 .nav 時，它就可以作業了。
uj5u.com熱心網友回復：
有兩個問題：
- 您的外部 div 不是 flex 容器
justify-content是一個彈性容器的屬性
.nav {
height: 500px;
display: flex;
justify-content: flex-end;
}
.navphoto {
height: 500px;
}<div class="nav">
<img class="navphoto" src="images/navphoto.jpg">
</div>基本上，嘗試將影像本身設定為 flex-container 并不能滿足您的要求，因為該影像不是其自身的子物件。這是整個元素。您需要某種 flex 容器在其中進行布局。
uj5u.com熱心網友回復：
來自CSS Tricks - Flexbox 的完整指南
Flexbox布局（Flexible Box）模塊旨在提供一種更有效的方式來布局、對齊和分配容器中專案之間的空間，即使它們的大小未知和/或動態（因此稱為“flex”一詞）。
關鍵詞——容器
它對元素沒有多大邏輯意義，flex因為img它不是容器，而是彈性專案。如果您有一個包含 theimg和 the的不同子集，text那么它對它有意義flex。
請參閱以下 CSS 中的注釋：
/* nav would be the main container to position content with justify-content */
nav {
border: dotted black 3px;
padding: 1em;
display: flex;
/* justify-content justify's content (blue container) on the x-axis */
/*justify-content: center;*/ /* centered */
/*justify-content: flex-start;/* /* start */
justify-content: flex-end; /* end */
}
.nav {
border: dotted blue 3px;
padding: 1em;
/*margin: auto;*/ /* will automatically center blue container despite what `justify-content` is defined as because width: 100%; is not defined and because the parent is flexed*/
/* this is now another container because it has the img and p nested, you would use flex to get the items to align in a row if flex-direction: column; wasn't defined. */
display: flex;
flex-direction: column;
justify-content: center;
/* you'll notice if you uncomment those flex properties justify-content doesn't do anything. why? because you can see by the borders there is no where for the content to justify. The p with the pink border is spanning 100% of the container, so you would have to use text-align: center; if you had width: fit-content; on p then you would use `align-items: center;` or `margin: auto; on p. Both do the same. */
text-align: center;
}
.navphoto {
height: 500px;
border: solid orange 5px;
}
img {
max-width: 100%;
}
p {
border: solid hotpink 2px;
/*width: fit-content;*/
}<nav>
<div class="nav">
<img class="navphoto" src="https://dummyimage.com/200/000/fff">
<p>Dummy text</p>
</div>
</nav>uj5u.com熱心網友回復：
您正在申請display: flex;，.navphoto請申請.nav。看下面的代碼
.nav {
display: flex;
justify-content: flex-end;
height: 500px;
}
.navphoto {
height: 500px;
}<div class="nav">
<img class="navphoto" src="https://images.unsplash.com/photo-1653629154351-3072ee211a9b">
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/481790.html
上一篇：當我添加背景顏色時，按鈕停止作業
下一篇：勾選框時無法觸發自定義復選框