CSS基础 – 弹性盒子模型 – flex布局详解编程语言

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/