flexible box layout 弹性盒子布局模型
flexible box layout 弹性盒子布局的基本原理
用来提供一个更有效的方式指定，调整和分布一个容器里的项目布局，即使他们的大小都是未知或者动态的。
flexbox布局常用于设计比较复杂的页面，可以轻松地实现屏幕和浏览器窗口大小的变化时保持元素的相对位置和大小不变,同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。
1,flexbox布局的使用,先创建一个flex容器
任何一个flexbox布局的第一步是创建一个flex容器,为此给元素设置display属性的值为flex,在Safari浏览器中，你依然需要添加webkit前缀
.flexcontainer{
display:-webkit-flex;
display:flex;
}
flex项目的显示
flex项目是flex容器的子元素，他们沿着主要轴和横轴定位,默认的是沿着水平轴排列一行,你可以通过flex-direction来改变主轴方向修改为column默认为row
flex项目列显示
.flexcontainer{
display:-webkit-flex;
display:flex;
-webkit-flex-direction:column;
flex-direction:column;
}
flex项目移动到顶部
如何将flex项目移动到顶部,取决于主轴的方向,若是垂直的方向通过align-items设置
若是他是水平的方向通过justify-content设置
.flexcontainer{
display:-webkit-flex;
display:flex;
-webkit-flex-direction:column;
flex-direction:column;
-webkit-justify-content:flex-start||flex-end;
justify-content:flex-start||flex-end;
}
或者
.flexcontainer {
display:-webkit-flex;
display:flex;
-webkit-flex-direction:row;
flex-direction:row;
-webkit-align-items:flex-start||flex-end;
align-items:flex-start||flex-end;
}
水平垂直居中
根据主轴的方向设置flex-direction为row或者column，再设置justify-content或者align-items为center
.flexcontainer{
display:-webkit-flex;
display:flex;
-webkit-flex-direction:row;
flex-direction:row;
-webkit-align-items:center;
align-items:center;
-webkit-justify-content:center;
justify-content:center;
}
或者
.flexcontainer{
display:-webkit-flex;
display:flex;
-webkit-flex-direction:column;
flex-direction:column;
-webkit-align-items:center;
align-items:center;
-webkit-justify-content:center;
justify-content:center;
}
