无涯教程-Flexbox - align-content属性

无涯教程
76 阅读4分钟

如果flex集合有多行(当执行flex-wrap:wrap)，则align-content属性定义集合中每行的对齐方式。

用法-

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

此属性接受以下值-

  • stretch                -  内容中的行将拉伸以填充剩余的空间。

  • flex-start            -  内容中的所有行都在集合的开头。

  • flex-end              -   内容中的所有行都包装在集合的末尾。

  • center                  -   内容中的所有行都在集合的中间。

  • space-between   -  多余的空间均匀填充。

  • space-around     -  多余的空间均匀分布在两行之间填充

Center示例

将此值传递给属性align-content时，所有行都打包在集合的中心。

Flex Align Content - Center
<!doctype html>
<html lang="en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}

  </span><span class="pun">.</span><span class="pln">box</span><span class="pun">{</span><span class="pln">
     font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="lit">25px</span><span class="pun">;</span><span class="pln">
     padding</span><span class="pun">:</span><span class="lit">15px</span><span class="pun">;</span><span class="pln">
     width</span><span class="pun">:</span><span class="lit">43</span><span class="pun">%;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
  </span><span class="pun">.</span><span class="pln">container</span><span class="pun">{</span><span class="pln">
     display</span><span class="pun">:</span><span class="pln">flex</span><span class="pun">;</span><span class="pln">
     height</span><span class="pun">:</span><span class="lit">100vh</span><span class="pun">;</span><span class="pln">
     flex</span><span class="pun">-</span><span class="pln">wrap</span><span class="pun">:</span><span class="pln">wrap</span><span class="pun">;</span><span class="pln">
     align</span><span class="pun">-</span><span class="pln">content</span><span class="pun">:</span><span class="pln">center</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">



</style>


<body>
<div class="container">
<div class="box box1">One</div>
<div class="box box2">two</div>
<div class="box box3">three</div>
<div class="box box4">four</div>
<div class="box box5">five</div>
<div class="box box6">six</div>
</div>
</body>
</html>

它将产生以下输出-

Flex-start示例

将此值传递给属性 align-content 时，所有行都在集合的开头。

Flex Align Content - Start
<!doctype html>
<html lang="en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}

  </span><span class="pun">.</span><span class="pln">box</span><span class="pun">{</span><span class="pln">
     font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="lit">25px</span><span class="pun">;</span><span class="pln">
     padding</span><span class="pun">:</span><span class="lit">15px</span><span class="pun">;</span><span class="pln">
     width</span><span class="pun">:</span><span class="lit">40</span><span class="pun">%;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
  </span><span class="pun">.</span><span class="pln">container</span><span class="pun">{</span><span class="pln">
     display</span><span class="pun">:</span><span class="pln">flex</span><span class="pun">;</span><span class="pln">
     height</span><span class="pun">:</span><span class="lit">100vh</span><span class="pun">;</span><span class="pln">
     flex</span><span class="pun">-</span><span class="pln">wrap</span><span class="pun">:</span><span class="pln">wrap</span><span class="pun">;</span><span class="pln">
     align</span><span class="pun">-</span><span class="pln">content</span><span class="pun">:</span><span class="pln">flex</span><span class="pun">-</span><span class="pln">start</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">



</style>


<body>
<div class="container">
<div class="box box1">One</div>
<div class="box box2">two</div>
<div class="box box3">three</div>
<div class="box box4">four</div>
<div class="box box5">five</div>
<div class="box box6">six</div>
</div>
</body>
</html>

它将产生以下输出-

Flex-end示例

将此值传递给属性 align-content 时，所有行都打包在集合的末尾。

Flex Align Content - End
<!doctype html>
<html lang="en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}

  </span><span class="pun">.</span><span class="pln">box</span><span class="pun">{</span><span class="pln">
     font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="lit">25px</span><span class="pun">;</span><span class="pln">
     padding</span><span class="pun">:</span><span class="lit">15px</span><span class="pun">;</span><span class="pln">
     width</span><span class="pun">:</span><span class="lit">40</span><span class="pun">%;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
  </span><span class="pun">.</span><span class="pln">container</span><span class="pun">{</span><span class="pln">
     display</span><span class="pun">:</span><span class="pln">flex</span><span class="pun">;</span><span class="pln">
     height</span><span class="pun">:</span><span class="lit">100vh</span><span class="pun">;</span><span class="pln">
     flex</span><span class="pun">-</span><span class="pln">wrap</span><span class="pun">:</span><span class="pln">wrap</span><span class="pun">;</span><span class="pln">
     align</span><span class="pun">-</span><span class="pln">content</span><span class="pun">:</span><span class="pln">flex</span><span class="pun">-</span><span class="kwd">end</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">



</style>


<body>
<div class="container">
<div class="box box1">One</div>
<div class="box box2">two</div>
<div class="box box3">three</div>
<div class="box box4">four</div>
<div class="box box5">five</div>
<div class="box box6">six</div>
</div>
</body>
</html>

它将产生以下输出-

Stretch示例

在将此值传递给align-content属性时，这些行将逐渐缩小以填充剩余的空间。

Flex Align Content - Stretch
<!doctype html>
<html lang="en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}

  </span><span class="pun">.</span><span class="pln">box</span><span class="pun">{</span><span class="pln">
     font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="lit">25px</span><span class="pun">;</span><span class="pln">
     padding</span><span class="pun">:</span><span class="lit">15px</span><span class="pun">;</span><span class="pln">
     width</span><span class="pun">:</span><span class="lit">40</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
  </span><span class="pun">.</span><span class="pln">container</span><span class="pun">{</span><span class="pln">
     display</span><span class="pun">:</span><span class="pln">flex</span><span class="pun">;</span><span class="pln">
     height</span><span class="pun">:</span><span class="lit">100vh</span><span class="pun">;</span><span class="pln">
     flex</span><span class="pun">-</span><span class="pln">wrap</span><span class="pun">:</span><span class="pln">wrap</span><span class="pun">;</span><span class="pln">
     align</span><span class="pun">-</span><span class="pln">content</span><span class="pun">:</span><span class="pln">stretch</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">



</style>


<body>
<div class="container">
<div class="box box1">One</div>
<div class="box box2">two</div>
<div class="box box3">three</div>
<div class="box box4">four</div>
<div class="box box5">five</div>
<div class="box box6">six</div>
</div>
</body>
</html>

它将产生以下输出-

Space-around示例

将此值传递给属性 align-content 时，多余的空间将均匀分布在两行之间，每行(包括第一行和最后一行)周围的空间相等。

Flex Align Content - Space Around
<!doctype html>
<html lang="en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}

  </span><span class="pun">.</span><span class="pln">box</span><span class="pun">{</span><span class="pln">
     font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="lit">25px</span><span class="pun">;</span><span class="pln">
     padding</span><span class="pun">:</span><span class="lit">15px</span><span class="pun">;</span><span class="pln">
     width</span><span class="pun">:</span><span class="lit">40</span><span class="pun">%;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
  </span><span class="pun">.</span><span class="pln">container</span><span class="pun">{</span><span class="pln">
     display</span><span class="pun">:</span><span class="pln">flex</span><span class="pun">;</span><span class="pln">
     height</span><span class="pun">:</span><span class="lit">100vh</span><span class="pun">;</span><span class="pln">
     flex</span><span class="pun">-</span><span class="pln">wrap</span><span class="pun">:</span><span class="pln">wrap</span><span class="pun">;</span><span class="pln">
     align</span><span class="pun">-</span><span class="pln">content</span><span class="pun">:</span><span class="pln">space</span><span class="pun">-</span><span class="pln">around</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">



</style>


<body>
<div class="container">
<div class="box box1">One</div>
<div class="box box2">two</div>
<div class="box box3">three</div>
<div class="box box4">four</div>
<div class="box box5">five</div>
<div class="box box6">six</div>
</div>
</body>
</html>

它将产生以下输出-

Space-between示例

将此值传递给属性 align-content 时，多余的空间将均匀地分布在两行之间，其中第一行将在集合的顶部，而最后一行将在集合的底部。

Flex Align Content - Space Between
<!doctype html>
<html lang="en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}

  </span><span class="pun">.</span><span class="pln">box</span><span class="pun">{</span><span class="pln">
     font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="lit">25px</span><span class="pun">;</span><span class="pln">
     padding</span><span class="pun">:</span><span class="lit">15px</span><span class="pun">;</span><span class="pln">
     width</span><span class="pun">:</span><span class="lit">40</span><span class="pun">%;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
  </span><span class="pun">.</span><span class="pln">container</span><span class="pun">{</span><span class="pln">
     display</span><span class="pun">:</span><span class="pln">flex</span><span class="pun">;</span><span class="pln">
     height</span><span class="pun">:</span><span class="lit">100vh</span><span class="pun">;</span><span class="pln">
     flex</span><span class="pun">-</span><span class="pln">wrap</span><span class="pun">:</span><span class="pln">wrap</span><span class="pun">;</span><span class="pln">
     align</span><span class="pun">-</span><span class="pln">content</span><span class="pun">:</span><span class="pln">space</span><span class="pun">-</span><span class="pln">between</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">



</style>


<body>
<div class="container">
<div class="box box1">One</div>
<div class="box box2">two</div>
<div class="box box3">three</div>
<div class="box box4">four</div>
<div class="box box5">five</div>
<div class="box box6">six</div>
</div>
</body>
</html>

它将产生以下输出-

参考链接

www.learnfk.com/css/flexbox…

avatar
文章
阅读
粉丝