box-align

转载 2015年11月19日 21:41:17


http://caibaojian.com/demo/flexbox/align-items.html


align-items (适用于父类容器上)

设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式。

语法

align-items: flex-start | flex-end | center | baseline | stretch
  • flex-start:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。
  • flex-end:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。
  • center:弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。
  • baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。
  • stretch:如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制。

.box{
	display:-webkit-flex;
	display:flex;
	width:200px;height:100px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
.box li{margin:5px;border-radius:5px;background:#aaa;text-align:center;}
.box li:nth-child(1){padding:10px;}
.box li:nth-child(2){padding:15px 10px;}
.box li:nth-child(3){padding:20px 10px;}
#box{
	-webkit-align-items:flex-start;
	align-items:flex-start;
}
#box2{
	-webkit-align-items:flex-end;
	align-items:flex-end;
}
#box3{
	-webkit-align-items:center;
	align-items:center;
}
#box4{
	-webkit-align-items:baseline;
	align-items:baseline;
}
#box5{
	-webkit-align-items:strecth;
	align-items:strecth;
}

align-items示例:

align-items:flex-start

  • a
  • b
  • c

align-items:flex-end

  • a
  • b
  • c

align-items:center

  • a
  • b
  • c

align-items:baseline

  • a
  • b
  • c

align-items:strecth

  • a
  • b
  • c

返回CSS3弹性盒模型的完整教程


相关文章推荐

flex 布局 justify-content:center; align:items; mobile 解决老版box 兼容性问题

最近在做项目开发时用到 , flex 布局 ,在华为手机的uc 浏览器中出现兼容性问题 ,解决方案如下,并提供一种垂直水平居中的方式,希望能给各位在移动端开发时带来便利,应用导航,左图右文 父容器啊设...

3D空间中的AABB(轴向平行包围盒, Aixe align bounding box)的求法

引言             在前面的一篇文章中讲述了如何通过模型的顶点来求的模型的包围球,并且还讲述了基本包围体除了包围球之外,还有AABB包围盒。在这一章,将讲述如何根据模型的坐标求得它的AAB...

css3盒子布局--管理盒子的空间(box-pack和box-align)

css3定位布局-管理盒子的空间(box-pack和box-align) body,html{    width:100%; height:100%; } body{ margin:0; paddi...
  • xyy_933
  • xyy_933
  • 2016年05月04日 15:48
  • 442

我对CSS vertical-align的一些理解与认识(一)

我对CSS vertical-align的一些理解与认识(一) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.z...

css之vertical-align的理解与认识

一. 简介 1. vertical-align 数值,比如 -2, 相比于基线向下便宜2px,一般用来修复单选框/复选框和12像素文字大小不对齐的问题. 2. 百分比 此标签继承的line-hei...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:box-align
举报原因:
原因补充:

(最多只允许输入30个字)