css中的align-content属性的作用

介绍

这篇文章主要讲解了“css中的align-content属性的作用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css中的align-content属性的作用”吧!

<强>

<强>作用:

会设置自由盒内部各个项目在垂直方向排列方式。

<强>条件:
必须对父元素设置自由盒属性显示:flex;,并且设置排列方式为横向排列flex-direction:行,并且设置换行,flex-wrap:包装,这样这个属性的设置才会起作用。
<强>设置对象:

这个属性是对她容器内部的项目起作用,对父元素进行设置。


<>强取值:
伸展:默认设置,会拉伸容器内每个项目占用的空间,填充方式为给每个项目下方增加空白。第一个项目默认从容器顶端开始排列。

 css中的align-content属性的作用“> </p> <p> </p> <ol类=癲p-xml list-paddingleft-2”> <李> <p> & lt; !=,, </p> </李> <李> <p>,=,, </p> </李> <李>,<p>, </p> </李> <李> <p>,=,, </p> </李> <李>,<p>, </p> </李> <李> <p> align-content,, </p> </李> <李>,<p>, </p> </李> <李>,<p>, </p> </李> <李>,<p>, </p> </李> <李> <p> #父亲{,,</p> </李> <李> <p>,,,,,,</p> </李> <李> <p>,,,,宽度:200 px;,,</p> </李> <李> <p>,,,,显示:flex;,,</p> </李> <李> <p>,,,, flex-direction:行;,,</p> </李> <李> <p>,,,, flex-wrap:包装;,,</p> </李> <李> <p>,,,, align-content:拉长;,,</p> </李> <李> <p>,,,,身高:200 px;,,</p> </李> <李> <p>,,,,背景颜色:灰色;,,</p> </李> <李> <p>},, </p> </李> <李> <p>。救赎{,,</p> </李> <李> <p>,,,,,,</p> </李> <李> <p>,,,,,,身高:30 px;,,</p> </李> <李> <p>,,,,宽度:100 px;,,</p> </李> <李> <p>,,,,背景颜色:橙色;,,</p> </李> <李> <p>},, </p> </李> <李>,<p>, </p> </李> <李> <p>。son2 {,, </p> </李> <李> <p>,,,,,,</p> </李> <李> <p>,,,,身高:30 px;,,</p> </李> <李> <p>,,,,宽度:100 px;,,</p> </李> <李> <p>,,,,背景颜色:红色;,,</p> </李> <李> <p>},, </p> </李> <李>,<p>, </p> </李> <李> <p>。son3 {,, </p> </李> <李> <p>,,,,,,</p> </李> <李> <p>,,,,,,身高:30 px;,,</p> </李> <李> <p>,,,,宽度:100 px;,,</p> </李> <李> <p>,,,,背景颜色:# 08 a9b5;,,</p> </李> <李> <p>},, </p> </李> <李>,<p>, </p> </李> <李>,<p>, </p> </李> <李>,<p>, </p> </李> <李>,<p>, </p> </李> <李>,<p>, </p> </李> <李>,<p>, </p> </李> <李> <p>,=,, </p> </李> <李>,<p>, </p> </李> <李> <p>,=,, </p> </李> <李> <p>,, </p> </李> <李>,<p>, </p> </李> <李>,<p>, </p> </李> <李> <p>,=,, </p> </李> <李> <p> w,, </p> </李> <李>,<p>, </p> </李> <李>,<p>, </p> </李> <李> <p>,=,, </p> </李> <李> <p> e,, </p> </李> <李>,<p>, </p> </李> <李> <p>,=,, </p> </李> <李> <p> e,, </p> </李> <李>,<p>, </p> </李> <李> <p>,=,, </p> </李> <李> <p> e,, </p> </李> <李>,<p>, </p> </李> <李>,<p>, </p> </李> <李>,<p>, </p> </李> <李>,<p>, </p> </李> <李>,<p>, </p> </李> <李>,<p>, </p> </李> <李>,<p>, </p> </李> <李>,<p>, </p> </李> </ol> <p>中心:这个会取消项目之间的空白并把所有项目垂直居中。</p> <p> </p> <ol类=癲p-xml list-paddingleft-2”> <李> <p> & lt; !=,, </p> </李> <李> <p>,=,, </p> </李> <李>,<p>, </p> </李> <李> <p>,=,, </p> </李> <李>,<p>, </p> </李> <李> <p>关于文档元素测试,,</p> </李> <李>,<p>, </p> </李> <李>,<p>, </p> </李> <李>,<p>, </p> </李> <李> <p> #父亲{,,</p> </李> <李> <p>,,,,,,</p> </李> <李> <p>,,,,宽度:200 px;,,</p> </李> <李> <p>,,,,显示:flex;,,</p> </李> <李> <p>,,,, flex-direction:行;,,</p> </李> <李> <p>,,,, flex-wrap:包装;,,</p> </李> <李> <p>,,,, align-content:中心;,,</p> </李> <李> <p>,,,,身高:200 px;,,</p> </李> <李> <p>,,,,背景颜色:灰色;,,</p> </李> <李> <p>},, </p> </李> <李> <p>。救赎{,,</p> </李> <李> <p>,,,,,,</p> </李> <李> <p>,,,,,,身高:30 px;,,</p> </李> <李> <p>,,,,宽度:100 px;,,</p> </李> <李> <p>,,,,背景颜色:橙色;,,</p> </李> <李> <p>},, </p> </李> <李>,<p>, </p> </李> <李> <p>。son2 {,, </p> </李> <李> <p>,,,,null<h2 class=css中的align-content属性的作用