css3布局样式相关

伸缩布局（一）;

1.创建一个flexbox容器。

.flexconfainer{
    display:-webkit-flex;display:flex;
}

2.flex项目显示；

flex项目是flex容器的子元素，他们沿着主要轴和横轴定位，默认的是沿着水平轴排列一行，可以通过flex-direction来改变主轴

方向修改为column,其默认值是row。

3.项目列显示;

.flexcontainer{
    display:-webkit-flex;
    display:flex;
    -webkit-flex-direction:colmn;
    flex-direction:column;
}

4.还有两个属性值:如果是垂直方向的有align-items,如果是水平方向的justify-content;属性值有以下两个：flex-start和flex-end;设置为center就是水平居中;

5.您可以定义一个flex项目，如何相对于flex容器实现自动的伸缩。需要给每个flex项目设置flex属性设置需要伸缩的值。