HTMLCSS

当前位置:首页 > HTMLCSS

详解弹性子元素属性 - HTMLCSS

  弹性子元素属性      排序      语法      order:      各个值解析:      <integer>:用整数值来定义排列顺序,数...
  弹性子元素属性
  
  排序
  
  语法
  
  order:
  
  各个值解析:
  
  <integer>:用整数值来定义排列顺序,数值小的排在前面。可以为负值。
  
  order 属性设置弹性容器内弹性子元素的属性:
  
  实例
  
  .flex-item {
  
  background-color: cornflowerblue;
  
  width: 100px;
  
  height: 100px;
  
  margin: 10px;
  
  }
  
  .first {
  
  -webkit-order: -1;
  
  order: -1;
  
  }
  
  对齐
  
  设置"margin"值为"auto"值,自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为"auto",可以使弹性子元素在弹性容器的两上轴方向都完全居中。
  
  以下实例在第一个弹性子元素上设置了 margin-right: auto; 。 它将剩余的空间放置在元素的右侧:
  
  实例
  
  .flex-item {
  
  background-color: cornflowerblue;
  
  width: 75px;
  
  height: 75px;
  
  margin: 10px;
  
  }
  
  .flex-item:first-child {
  
  margin-right: auto;
  
  }
  
  完美的居中
  
  以下实例将完美解决我们平时碰到的居中问题。
  
  使用弹性盒子,居中变的很简单,只需要设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中:
  
  实例
  
  .flex-item {
  
  background-color: cornflowerblue;
  
  width: 75px;
  
  height: 75px;
  
  margin: auto;
  
  }

相关内容

文章评论

表情

共 0 条评论,查看全部
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~

评论排行榜

热门标签