display用於規定元素生產的框架型別,設定元素如何顯示.
display的值可以為
：none：
隱藏物件。與visibility屬性的hidden值不同，其不為被隱藏的物件保留其物理空間
inline：
指定物件為內聯元素。
block：
指定物件為塊元素。
list-item：
指定物件為列表專案。
inline-block：
指定物件為內聯塊元素。（css2）
table：
指定物件作為塊元素級的**。類同於html標籤（css2）
inline-table：
指定物件作為內聯元素級的**。類同於html標籤（css2）
table-caption：
指定物件作為**標題。類同於html標籤（css2）
table-cell：
指定物件作為**單元格。類同於html標籤（css2）
table-row：
指定物件作為**行。類同於html標籤（css2）
table-row-group：
指定物件作為**行組。類同於html標籤（css2）
table-column：
指定物件作為**列。類同於html標籤（css2）
table-column-group：
指定物件作為**列組顯示。類同於html標籤（css2）
table-header-group：
指定物件作為**標題組。類同於html標籤（css2）
table-footer-group：
指定物件作為**腳注組。類同於html標籤（css2）
run-in：
根據上下文決定物件是內聯物件還是塊級物件。（css3）
box：
將物件作為彈性伸縮盒顯示。（伸縮盒最老版本）（css3）
inline-box：
將物件作為內聯塊級彈性伸縮盒顯示。（伸縮盒最老版本）（css3）
flexbox：
將物件作為彈性伸縮盒顯示。（伸縮盒過渡版本）（css3）
inline-flexbox：
將物件作為內聯塊級彈性伸縮盒顯示。（伸縮盒過渡版本）（css3）
flex：
將物件作為彈性伸縮盒顯示。（伸縮盒最新版本）（css3）
inline-flex：flex是一種可以伸縮的盒顯示,可以方便的適應不同大小的頁面.相較於運用float來布局,flex的使用使得布局更加便捷可靠,且不用擔心float所引起的意料之外的序列問題.
1.flex的相關屬性
在使用flex時,首先定義父元素的display值為flex.然後可以通過一些相關的值對子元素的位置和布局方式進行控制,具體如下;
值描述測試
stretch
預設值。專案被拉伸以適應容器。
測試 »
center
專案位於容器的中心。
測試 »
flex-start
專案位於容器的開頭。
測試 »
flex-end
專案位於容器的結尾。
測試 »
space-between
專案位於各行之間留有空白的容器內。
測試 »
space-around
專案位於各行之前、之間、之後都留有空白的容器內。
值描述測試stretch
預設值。專案被拉伸以適應容器。
測試 »
center
專案位於容器的中心。
測試 »
flex-start
專案位於容器的開頭。
測試 »
flex-end
專案位於容器的結尾。
測試 »
baseline
專案位於容器的基線上。
align-self
屬性定義flex子項單獨在側軸（縱軸）方向上的對齊方式。align-self 屬性可重寫靈活容器的 align-items 屬性。
該屬性的設定方式與align-item一直,用來給容器中需要單獨定位的元素定義排列位置.
justify-content
用於設定或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。值描述
測試flex-start
預設值。專案位於容器的開頭。
測試 »
flex-end
專案位於容器的結尾。
測試 »
center
專案位於容器的中心。
測試 »
space-between
專案位於各行之間留有空白的容器內。
測試 »
space-around
專案位於各行之前、之間、之後都留有空白的容器內。
自適應的彈框
html:
<less:divclass="dialog">
<
divclass="dialog_main">
<
divclass="dialog_head"><
span>標題
span>
<
divclass="close">x
div>
div>
<
divclass="dialog_body">內容
div>
<
divclass="dialog_foot">
<
divclass="confirm">確定
div>
<
divclass="close">取消
div>
div>
div>
div>
.dialog}.dialog_body
.dialog_foot
.close}}}
css布局之flex布局
網頁布局 layout 是css的乙個重點應用。布局的傳統解決方案，基於盒狀模型，依賴 display屬性 position屬性 float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。2009年，w3c提出了一種新的方案 flex布局，可以簡便 完整 響應式地實現各種頁面布局。目...
css彈性布局（flex）
1 概念解讀 傳統的布局解決方案，基於盒狀模型，依賴 display 屬性 position屬性 float屬性。但對於一些特殊的布局方式 如垂直居中 傳統盒模型顯得有點力不從心，而對彈性布局 flex 來說卻很容易實現。2009年，w3c 提出了一種新的方案 flex 布局 flex是flexib...
CSS關於flex布局
注意 flexbox布局最適合應用程式的元件和小規模布局，而grid布局則適用於更大規模的布局 談flex布局前先了解下flex的基本屬性 flex的基本屬性有flex basis flex direction flex wrap flex flow flex grow flex shrink六個 ...