CSS Flex環(huán)繞圖片

CSS Flexbox是一種可以輕松布局和對(duì)齊元素的布局模型。在這里，我們將學(xué)習(xí)如何使用Flexbox環(huán)繞圖片。

首先，我們需要有一個(gè)包含圖片和文本的容器，然后將其設(shè)置為Flexbox。在這個(gè)容器中，我們需要為圖片和文本分別創(chuàng)建一個(gè)子元素。

.container {
display: flex;
}
.container img {
flex: 0 0 auto;
width: 200px;
height: 200px;
margin-right: 1rem;
}
.container p {
flex: 1;
}

現(xiàn)在我們來(lái)逐個(gè)解釋這些代碼：

• 對(duì)于容器，我們將其設(shè)置為Flexbox，這樣子元素就可以使用Flexbox屬性。
• 對(duì)于圖片，我們使用了flex: 0 0 auto;來(lái)禁止其在高度和寬度上進(jìn)行縮放。我們用margin-right屬性來(lái)對(duì)圖片和文本之間添加空白。
• 對(duì)于文本，我們使用了flex: 1;來(lái)占據(jù)剩余空間。這樣可以讓文本能夠自動(dòng)擴(kuò)展，當(dāng)圖片調(diào)整大小時(shí)文本也會(huì)自動(dòng)布局。

現(xiàn)在，我們可以在HTML中創(chuàng)建一個(gè)包含圖片和文本的元素，并將其設(shè)置為我們剛才定義的樣式。

<div class="container">
<img src="image.jpg" alt="image">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec velit nec velit malesuada dapibus.</p>
</div>

現(xiàn)在，圖片和文本都可以像下面這樣進(jìn)行布局：

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec velit nec velit malesuada dapibus.