Flexbox - align-content属性

Flexbox - align-content属性 首页 / CSS入门教程 / Flexbox - align-content属性

如果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;}
      
      .box{
         font-size:25px;
         padding:15px;
         width:43%;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:center;
      }
   </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>

它将产生以下输出-

无涯教程网

链接：https://www.learnfk.comhttps://www.learnfk.com/css/flexbox-align-content.html

来源：LearnFk无涯教程网

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;}
      
      .box{
         font-size:25px;
         padding:15px;
         width:40%;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:flex-start;
      }
   </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>

它将产生以下输出-

无涯教程网

链接：https://www.learnfk.comhttps://www.learnfk.com/css/flexbox-align-content.html

来源：LearnFk无涯教程网

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;}
      
      .box{
         font-size:25px;
         padding:15px;
         width:40%;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:flex-end;
      }
   </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>

它将产生以下输出-

无涯教程网

链接：https://www.learnfk.comhttps://www.learnfk.com/css/flexbox-align-content.html

来源：LearnFk无涯教程网

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;}
      
      .box{
         font-size:25px;
         padding:15px;
         width:40;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:stretch;
      }
   </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>

它将产生以下输出-

无涯教程网

链接：https://www.learnfk.comhttps://www.learnfk.com/css/flexbox-align-content.html

来源：LearnFk无涯教程网

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;}
      
      .box{
         font-size:25px;
         padding:15px;
         width:40%;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:space-around;
      }
   </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>

它将产生以下输出-

无涯教程网

链接：https://www.learnfk.comhttps://www.learnfk.com/css/flexbox-align-content.html

来源：LearnFk无涯教程网

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;}
      
      .box{
         font-size:25px;
         padding:15px;
         width:40%;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:space-between;
      }
   </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>

它将产生以下输出-

无涯教程网

链接：https://www.learnfk.comhttps://www.learnfk.com/css/flexbox-align-content.html

来源：LearnFk无涯教程网

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

Elasticsearch核心技术与实战 -〔阮一鸣〕

设计模式之美 -〔王争〕

Service Mesh实战 -〔马若飞〕

分布式系统案例课 -〔杨波〕

容量保障核心技术与实战 -〔吴骏龙〕

深入浅出分布式技术原理 -〔陈现麟〕

快速上手C++数据结构与算法 -〔王健伟〕

给程序员的写作课 -〔高磊〕

徐昊 · AI 时代的软件工程 -〔徐昊〕

好记忆不如烂笔头。留下您的足迹吧 :)
休闲君评测 |  TOOLFK工具网 |  chrome插件网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  豪评测 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630