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弹性盒模型的完整教程


box-align和box-pack的使用

通过使用 box-align(垂直) and box-pack(水平) 属性,居中 div 框的子元素:(1)这样可以很简单的模拟对话框水平居中效果一: 1、目前没有浏览器支持box-align属性...
  • Seety_ST
  • Seety_ST
  • 2016年01月20日 16:15
  • 852

css3 box-pack box-align 居中

原来水平垂直居中写法为:height=line-height 实现垂直居中    text-align 实现水平居中 现在 使用   box-align 实现垂直居中  box-pack 实现水平居...
  • ISaiSai
  • ISaiSai
  • 2014年03月04日 11:20
  • 2543

css3设置box-pack和box-align让div里面的元素垂直居中

Document #container{ display: box; display: -webkit-box; display: -...
  • wstpa
  • wstpa
  • 2015年10月10日 11:02
  • 1309

CSS3 box-align 属性

通过使用 box-align and box-pack 属性,居中 div 框的子元素 http://www.w3school.com.cn/cssref/pr_box-align.asp ...
  • csdn_huangyumin
  • csdn_huangyumin
  • 2015年11月19日 11:34
  • 226

css3 box-orient box-pack box-align

box-pack 属性规定当框大于子元素的尺寸,在何处放置子元素。 box-pack: start|end|center|justify; box-orient 属性规定框的子元素应该被水平或垂直...
  • NARUTO_LUOLUO
  • NARUTO_LUOLUO
  • 2016年04月29日 14:36
  • 602

css box-align box-pack等相关属性

http://www.w3school.com.cn/cssref/pr_box-align.asp
  • Vivianluolita
  • Vivianluolita
  • 2017年02月22日 11:30
  • 164

CSS3 box-orient box-direction box-align box-flex box-pack

实例 水平排列 div 元素的子元素: div { width:350px; height:100px; border:1px solid black; /* Firefox */ disp...
  • judyge
  • judyge
  • 2016年07月08日 21:31
  • 594

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
  • 527

css使用box-align和box-pack使div的子元素垂直居中

box-align和box-pack是内容垂直居中 .centent{ width:300px; height:200px; border:1px solid #ebebeb; displ...
  • qq_29252021
  • qq_29252021
  • 2017年11月01日 16:08
  • 28

CSS3中不熟悉的属性1:box-pack和box-align

box-pack 定义和用法: box-pack 属性规定当框大于子元素的尺寸,在何处放置子元素。 该属性规定水平框中的水平位置,以及垂直框中的垂直位置。 语法: box-pack: star...
  • juzipchy
  • juzipchy
  • 2017年06月05日 18:44
  • 181
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:box-align
举报原因:
原因补充:

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