align-content
作用:
会设置自由盒内部各个项目在垂直方向排列方式。
条件:
必须对父元素设置自由盒属性display:flex;，并且设置排列方式为横向排列flex-direction:row;并且设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用。
设置对象:
这个属性是对她容器内部的项目起作用，对父元素进行设置。
取值:
stretch:默认设置，会拉伸容器内每个项目占用的空间，填充方式为给每个项目下方增加空白。第一个项目默认从容器顶端开始排列。
<span style="color: #800000;">html>
<meta charset="UTF-8">
<title>
Align-content
</title>
<style>
#father</style></span>{<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;">200px</span>;<span style="color: #ff0000;">
display</span>:<span style="color: #0000ff;">flex</span>;<span style="color: #ff0000;">
flex-direction</span>:<span style="color: #0000ff;">row</span>;<span style="color: #ff0000;">
flex-wrap</span>:<span style="color: #0000ff;">wrap</span>;<span style="color: #ff0000;">
align-content</span>:<span style="color: #0000ff;">strech</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;">200px</span>;<span style="color: #ff0000;">
background-color</span>:<span style="color: #0000ff;">grey</span>;
}<span style="color: #800000;">
.son1</span>{<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;">30px</span>;<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
background-color</span>:<span style="color: #0000ff;">orange</span>;
}<span style="color: #800000;">
.son2</span>{<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;">30px</span>;<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
background-color</span>:<span style="color: #0000ff;">red</span>;
}<span style="color: #800000;">
.son3</span>{<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;">30px</span>;<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
background-color</span>:<span style="color: #0000ff;">#08a9b5</span>;
}<span style="color: #800000;">
<div id="father">
<div class="son1">
q
</div>
<div class="son2">
w
</div>
<div class="son3">
e
</div>
<div class="son3">
e
</div>
<div class="son3">
e
</div>
</div>
</span>
Center:这个会取消项目之间的空白并把所有项目垂直居中。
<span style="color: #800000;">html>
<meta charset="UTF-8">
<title>
关于文档元素测试
</title>
<style>
#father</style></span>{<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;">200px</span>;<span style="color: #ff0000;">
display</span>:<span style="color: #0000ff;">flex</span>;<span style="color: #ff0000;">
flex-direction</span>:<span style="color: #0000ff;">row</span>;<span style="color: #ff0000;">
flex-wrap</span>:<span style="color: #0000ff;">wrap</span>;<span style="color: #ff0000;">
align-content</span>:<span style="color: #0000ff;">center</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;">200px</span>;<span style="color: #ff0000;">
background-color</span>:<span style="color: #0000ff;">grey</span>;
}<span style="color: #800000;">
.son1</span>{<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;">30px</span>;<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
background-color</span>:<span style="color: #0000ff;">orange</span>;
}<span style="color: #800000;">
.son2</span>{<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;">30px</span>;<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
background-color</span>:<span style="color: #0000ff;">red</span>;
}<span style="color: #800000;">
.son3</span>{<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;">30px</span>;<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
background-color</span>:<span style="color: #0000ff;">#08a9b5</span>;
}<span style="color: #800000;">
.son4</span>{<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;">30px</span>;<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
background-color</span>:<span style="color: #0000ff;">#9ad1c3</span>;
}<span style="color: #800000;">
.son5</span>{<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;">30px</span>;<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
background-color</span>:<span style="color: #0000ff;">rgb(21,123,126)</span>;
}<span style="color: #800000;">
<div id="father">
<div class="son1">
q
</div>
<div class="son2">
w
</div>
<div class="son3">
e
</div>
<div class="son4">
e
</div>
<div class="son5">
e
</div>
</div>
</span>
Flex-start:这个会取消项目之间的空白，并把项目放在容器顶部。
<span style="color: #800000;">html>
<meta charset="UTF-8">
<title>
关于文档元素测试
</title>
<style>
#father</style></span>{<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;">200px</span>;<span style="color: #ff0000;">
display</span>:<span style="color: #0000ff;">flex</span>;<span style="color: #ff0000;">
flex-direction</span>:<span style="color: #0000ff;">row</span>;<span style="color: #ff0000;">
flex-wrap</span>:<span style="color: #0000ff;">wrap</span>;<span style="color: #ff0000;">
align-content</span>:<span style="color: #0000ff;">flex-start</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;">200px</span>;<span style="color: #ff0000;">
background-color</span>:<span style="color: #0000ff;">grey</span>;
}<span style="color: #800000;">
.son1</span>{<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;">30px</span>;<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
background-color</span>:<span style="color: #0000ff;">orange</span>;
}<span style="color: #800000;">
.son2</span>{<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;">30px</span>;<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
background-color</span>:<span style="color: #0000ff;">red</span>;
}<span style="color: #800000;">
.son3</span>{<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;">30px</span>;<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
background-color</span>:<span style="color: #0000ff;">#08a9b5</span>;
}<span style="color: #800000;">
.son4</span>{<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;">30px</span>;<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
background-color</span>:<span style="color: #0000ff;">#9ad1c3</span>;
}<span style="color: #800000;">
.son5</span>{<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;">30px</span>;<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
background-color</span>:<span style="color: #0000ff;">rgb(21,123,126)</span>;
}<span style="color: #800000;">
<div id="father">
<div class="son1">
q
</div>
<div class="son2">
w
</div>
<div class="son3">
e
</div>
<div class="son4">
e
</div>
<div class="son5">
e
</div>
</div>
</span>
flex-end:这个会取消项目之间的空白并把项目放在容器底部。
align-content:flex-end;
space-between这个会使项目在垂直方向两端对齐。即上面的项目对齐容器顶部，最下面一个项目对齐容器底部。留相同间隔在每个项目之间。
align-content:space-between;
Space-around:这个会使每个项目上下位置保留相同长度空白，使得项目之间的空白为两倍的单个项目空白。
align-content:space-around;
Inherit:使得元素的这个属性继承自它的父元素。
innitial:使元素这个属性为默认初始值。
陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
＆gt; gt;的目的是什麼 元素？Mar 21, 2025 pm 12:34 PM本文討論了HTML＆lt; Progress＆gt;元素，其目的，樣式和與＆lt; meter＆gt;元素。主要重點是使用＆lt; progress＆gt;為了完成任務和LT;儀表＆gt;對於stati
＆lt; datalist＆gt;的目的是什麼。 元素？Mar 21, 2025 pm 12:33 PM本文討論了html＆lt; datalist＆gt;元素，通過提供自動完整建議，改善用戶體驗並減少錯誤來增強表格。Character計數：159
＆lt; meter＆gt;的目的是什麼。 元素？Mar 21, 2025 pm 12:35 PM本文討論了HTML＆lt; meter＆gt;元素，用於在一個範圍內顯示標量或分數值及其在Web開發中的常見應用。它區分了＆lt; meter＆gt;從＆lt; progress＆gt;和前
視口元標籤是什麼？為什麼對響應式設計很重要？Mar 20, 2025 pm 05:56 PM本文討論了視口元標籤，這對於移動設備上的響應式Web設計至關重要。它解釋瞭如何正確使用確保最佳的內容縮放和用戶交互，而濫用可能會導致設計和可訪問性問題。
我如何使用html5＆lt; time＆gt; 元素以語義表示日期和時間？Mar 12, 2025 pm 04:05 PM本文解釋了HTML5＆lt; time＆gt;語義日期/時間表示的元素。 它強調了DateTime屬性對機器可讀性（ISO 8601格式）的重要性，並在人類可讀文本旁邊，增強Accessibilit
如何使用HTML5表單驗證屬性來驗證用戶輸入？Mar 17, 2025 pm 12:27 PM本文討論了使用HTML5表單驗證屬性，例如必需的，圖案，最小，最大和長度限制，以直接在瀏覽器中驗證用戶輸入。
＆lt; iframe＆gt;的目的是什麼。 標籤？使用時的安全考慮是什麼？Mar 20, 2025 pm 06:05 PM本文討論了＆lt; iframe＆gt;將外部內容嵌入網頁，其常見用途，安全風險以及諸如對象標籤和API等替代方案的目的。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影：貝殼謎語解決方案
1 週前ByDDD
R.E.P.O.如果您聽不到任何人，如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
在哪裡可以找到原子中的起重機控制鑰匙卡
1 週前ByDDD
熱工具
ZendStudio 13.5.1 Mac
強大的PHP整合開發環境
Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。
SAP NetWeaver Server Adapter for Eclipse
將Eclipse與SAP NetWeaver應用伺服器整合。
WebStorm Mac版
好用的JavaScript開發工具
Atom編輯器mac版下載
最受歡迎的的開源編輯器
