标签：特定 margin 居中 css contain isp enter nbsp lin
flex布局提供一种对容器中条目更方便地进行布局，控件分配，和对齐的方式。flex布局的容器能够根据窗口大小变化而改变条目的大小和位置，以呈现最佳的显示效果，它的优势在于开发者可只需要申明容器或其子条目的布局的方式，和窗口或容器大小变化时元素的行为，而不需要去实现具体的适应。
body {
direction:rtl;//定义body下的元素渲染的方向
}
.flex-container {
display:flex;
//申明display方式为：flex
flex-direction:row-reverse;
//在一行上，该容器的子条目将基于父级元素的direction，从右到左进行渲染
//flex-direction:row 默认为body.style.direction
//flex-direction:column 主轴为纵向，元素依次在纵向从上至下布局，在行方向则按照body.style.direction布局
//flex-direction:column-reverse 主轴为纵向，元素依次在纵向从下至上布局，在行方向则按照body.style.direction布局
flex-wrap:wrap-reverse;
//如果水平方向子条目的总宽度超过了容器宽度，则换行再根据flex-direction和body.style.direction进行布局，在主轴方向的行/列反向排列
//flex-wrap:unset 则默认不换行
//flex-wrap:wrap-reverse 换行并将垂直方向各行从底至顶（主轴为row）布局
justify-content:space-around;
//justify-content:flex-start 在主轴上，从文档的方向开始布局
//justify-content:flex-end 在主轴上，从文档的方向的反方向开始布局
//justify-content:space-around 条目之间等间距布局，在主轴上，首尾元素和容器之间增加间隔
//justify-content:space-between 条目之间等间距布局，在主轴上，首尾元素分别靠紧对应的容器边框
//justify-content:center 同行/列所欲条目居中
align-content:center;
//相对与主轴的垂直方向上，所有条目居中布局
align-items:flex-start;
//align-items:flex-end 若文档的方向为从左到右，则主轴方向元素右对齐
//在主轴方向上，在文档的布局方向上依次渲染flex-item
//align-items:baseline 条目的开始侧基于基准线对齐，align-items:stretch 若条目在相对于主轴的垂直方向的宽度为auto，则元素将被拉伸以填满交叉轴方向
}
.flex-item {
flex-shrink:1;
flex:1 0 auto;
//第一个值flex-grow，元素的放大比例，1表示放大，元素在特定方向平分容器剩余空间， 0表示不放大
//flex style:第二个值flex-shrink，1表示空间不足时，该元素将缩小以适应容器，0表示不自适应；第二个值
margin:auto;
margin-top:10px;
width:100px;
height:100px;
border-style:dotted solid;
border-color:orchid;
align-self:auto;
//默认继承容器的align-items，具体值则不适用容器的align-items,元素未设置高度且没有父元素时，则align-self为stretch.
font-size:30px;
font-weight:bolder;
}
相关链接：http://www.ibm.com/developerworks/cn/web/1409_chengfu_css3flexbox/
标签：特定 margin 居中 css contain isp enter nbsp lin
原文地址：http://www.cnblogs.com/wzcblogs/p/6121428.html
