弹性布局

flex布局

flex容器属性：

• flex-direction 决定元素的排列方向（指定哪个方向是主轴）
• flex-wrap 决定元素如何换行（排列不下时）
• flex-flow flex-direction和flex-wrap的简写
• justify-content 元素在主轴上的对齐方式
• align-items 元素在交叉轴上的对齐方式

flex元素属性：

• flex-grow 当有多余空间时，元素的放大比例
• flex-shrink 当空间不足时，元素的缩小比例
• flex-basis 元素在主轴上占据的空间（若空间不足时不会被压缩）
• flex时grow、shrink、basis的简写
• order定义元素的排列顺序
• align-self定义元素自身的对齐方式 会复写flex容器对此元素的align-items属性

css:

.box{

width: 100%;

/*vh

*vh就是当前屏幕可见高度的1%，也就是说

*height:100vh == height:100%;

*但是有个好处是当元素没有内容时候，设置height:100%该元素不会被撑开，

*但是设置height:100vh，该元素会被撑开屏幕高度一致 */

height: 100vh;

background-color: #cccccc;

display: flex;

flex-direction: row;

flex-wrap: wrap; /*wrap 当一行排列不下时换行 nowrap当排列不下时不换行 wrap-reverse反转*/

justify-content: center; /*

*指定主轴的排列方式

*center 居中

*flex-start 居于主轴方向起点依次排列

*flex-end 居于主轴方向终点依次排列

*space-between 主轴起点、终点分别为第一个、最后一个元素，其余元素分割剩余空间

*space-around 主轴上每个元素两边占据的空间相等 */

}

.item{

width: 300 rpx;

height: 300 rpx;

background-color: #b3d4db;

border: 1px solid #ffffff;

}

结果：