码迷,mamicode.com
首页 > 其他好文 > 详细

flex布局第一行div左对齐,第二行中对齐,第三行右对齐

时间:2018-11-01 16:59:18      阅读:778      评论:0      收藏:0      [点我收藏+]

标签:direct   column   对齐   code   isp   splay   type   class   布局   

.flex{

      display:flex;

      flex-direction:column;

      width:600px;

  }

.flex div{

      width:100px;

      height:100px;

      background:red;

      margin-left:2px;

  }

.flex div:nth-of-type(1){

      align-self:flex-start;

  }

.flex div:nth-of-type(2){

     align-self:center;

  }

.flex div:nth-of-type(3){

     align-self:flex-end;

  }

 

flex布局第一行div左对齐,第二行中对齐,第三行右对齐

标签:direct   column   对齐   code   isp   splay   type   class   布局   

原文地址:https://www.cnblogs.com/chenchenhao/p/9889960.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!