學習完上面的justify-content水平對齊方式後,我們可以來和align-items來區別使用。
和justify-content不同的是,align-items主要是垂直方向的對齊方式,
屬性介紹:flex-start、flex-end、center、initial、inherit
.first
.first div
<
/style>
<
/head>
="first"
>
="one" style=
"background-color: khaki;"
>
aa<
/div>
="two" style=
"background-color: lawngreen;"
>
bb<
/div>
="three" style=
"background-color: lightcoral;"
>
cc<
/div>
<
/div>
<
/body>
初始執行方式:
(1)flex-start屬性測試結果:
.first
.first div
<
/style>
執行結果:
(2)center屬性測試:
(3)flex-end屬性測試:
.first
.first div
<
/style>
執行結果:
(4)baseline屬性測試:
解釋:元素位於容器的基線上。
如彈性盒子元素的行內軸與側軸為同一條,則該值與』flex-start』等效。其它情況下,該值將參與基線對齊。
.first
其他屬性大家可以自己測試一下。一般是使用上面三個就夠了。 HTML與CSS的CSS的基本使用
css 英文全稱 cascading style sheets 層疊樣式表,是一種用來表現html 標準通用標記語言的乙個應用 或xml 標準通用標記語言的乙個子集 等檔案樣式的計算機語言。css目前最新版本為css3,是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對於傳統html的表現而言...
CSS參考(一 基本語法)
css參考 一 基本語法 一.基本語法 1.css的語法 css的定義是由三個部分構成 選擇符 selector 屬性 properties 和屬性的取值 value 語法 selector 選擇符 說明 選擇符是可以是多種形式,一般是你要定義樣式的html標記,例如body p table 你可以...
條件CSS基本使用方法
毫無疑問,任何乙個試圖使用 css 的網頁設計師和開發人員都會發現不同的瀏覽器要求不同的樣式宣告。這些煩惱歸咎於各瀏覽器及其各版本不同程度的 css 執行的完整性。條件 css 是這個問題的乙個解決方案,採用的是 internet explorer 的條件注釋語法的思想,並把它內聯到 css 宣告之...