在使用flex布局之前，我們需要先定義一個父元素，然后將其下的子元素設(shè)置為flex項。父元素的display屬性需要設(shè)置為flex，這樣才能將其內(nèi)部的子元素排成一行或一列。
<pre> <div style="display: flex;"> <div>子元素1</div> <div>子元素2</div> <div>子元素3</div> </div>
上述代碼中，我們創(chuàng)建了一個包含三個子元素的容器。由于父元素的display屬性設(shè)置為flex，默認的排列方向是水平的。每個子元素都會自動填充父元素的剩余寬度。
除了默認的水平排列方式，我們還可以設(shè)置父元素的flex-direction屬性來改變子元素的排列方向。flex-direction屬性可以設(shè)置為row（水平排列，默認值）、column（垂直排列）、row-reverse（反向水平排列）和column-reverse（反向垂直排列）。
<pre> <div style="display: flex; flex-direction: column;"> <div>子元素1</div> <div>子元素2</div> <div>子元素3</div> </div>
在上述代碼中，我們將flex-direction屬性設(shè)置為column，這樣子元素將垂直排列。同樣，子元素也會自動填充父元素的剩余高度。
除了排列方式，我們還可以使用justify-content屬性來調(diào)整元素在主軸上的對齊方式。justify-content屬性可以設(shè)置為flex-start（默認，從主軸開始對齊）、flex-end（從主軸末端對齊）、center（居中對齊）、space-between（兩端對齊，剩余空間平均分配），以及space-around（元素周圍平均分配剩余空間）。
<pre> <div style="display: flex; justify-content: space-between;"> <div>子元素1</div> <div>子元素2</div> <div>子元素3</div> </div>
在上述代碼中，我們將justify-content屬性設(shè)置為space-between，這樣子元素1和子元素3會分別對齊到父元素的兩端，而子元素2會自動在它們之間對齊。
另外，我們還可以使用align-items屬性來調(diào)整元素在側(cè)軸上的對齊方式。align-items屬性可以設(shè)置為flex-start（從側(cè)軸開始對齊）、flex-end（從側(cè)軸末端對齊）、center（居中對齊）和baseline（基線對齊）。
<pre> <div style="display: flex; align-items: flex-end;"> <div>子元素1</div> <div>子元素2</div> <div>子元素3</div> </div>
在上述代碼中，我們將align-items屬性設(shè)置為flex-end，這樣子元素將會從側(cè)軸末端對齊。注意，如果元素的高度不一致，子元素的底部將會對齊，而不是頂部。
起來，flex布局是一種非常靈活的布局方式，能夠輕松地調(diào)整元素的排列順序、對齊方式和空間分配。通過合理地使用flex布局，可以更好地構(gòu)建和優(yōu)化網(wǎng)頁布局。希望本文對于你理解和應(yīng)用flex布局有所幫助。