CSS彈性盒子模型是一種用于布局元素的方法。它提供了一種靈活的方式來定義容器中子元素的寬度、高度和順序。
設置一個彈性盒子模型只需要給父元素定義一個樣式display: flex;。這告訴瀏覽器,這個元素是一個容器,并且子元素應該使用彈性盒子模型進行布局。
.parent { display: flex; }
彈性盒子模型提供了一些屬性來定義子元素的布局。其中最基本的兩個屬性是justify-content和align-items。
justify-content用于定義子元素在水平方向上的位置。它有五個值可選:flex-start、flex-end、center、space-between和space-around。
.parent { display: flex; justify-content: center; }
align-items用于定義子元素在垂直方向上的位置。它也有五個值可選:flex-start、flex-end、center、baseline和stretch。
.parent { display: flex; align-items: center; }
通過指定這兩個屬性,我們可以在容器中定義子元素的位置。但這只是彈性盒子模型提供的一小部分功能。它還提供了更多屬性,如flex-direction、flex-wrap、align-content和flex等屬性。
總的來說,彈性盒子模型為我們提供了一種簡單且靈活的方式來定義和布局我們的網頁。通過使用它,我們能夠更輕松地控制元素的布局,并且響應式布局也變得更容易。
上一篇css彈性盒模型容器
下一篇css 3 中漸變色