css3弹性盒模型flex的属性

css3弹性盒模型flex的属性

 

- flex-direction    

项目的排列方向，value的取值包括：row，row-reverse，column，column-reverse，其中row是默认值，水平方向（起点在左端），column是垂直方向（起点在顶端），带-reverse的值则表示反方向

- flex-wrap

该属性定义项目是否换行并且如何换行。在默认情况下，项目都排在一条轴线上，如果一条轴线排不下，浏览器就根据这个属性的值对项目排列作出调整。value的取值包括：nowrap，wrap，wrap-reverse，其中，nowrap是默认值，不换行。用法及效果如下：

 

.item-class{

    flex-grow:1;

}

 

 

- flex-flow

该属性是flex-direction和flex-wrap的简写形式，默认值为row nowrap。使用方式如下：

 

.flex-item{

    flex-flow:colunm wrap;

}

- justify-content

该属性定义了项目在主轴上（main axis）的对齐方式。value的取值包括：

 

- flex-start：默认值。轴的起始端（main/cross start）

- flex-end：轴的终点端

- center：居中

- space-between：两端对齐，项目之间的间隔都相等。

- space-around：每个项目两侧的间隔相等。那么项目之间的间隔就是项目与边框之间的间隔的两倍

 

- align-items

该属性定义项目在交叉轴上的对齐方式。value的取值包括：

 

- flex-start：交叉轴的起点对齐

- flex-end：交叉轴的终点对齐

- center：居中

- baseline：以项目的第一行文字的基线对齐

- stretch：默认值，如果项目未设置高度或设为auto，那么项目将占满整个容器的高度

- align-content

该属性定义了多个轴线的对齐方式。value的取值包括：

- flex-start：与交叉轴的起点对齐

- flex-end：与交叉轴的终点对齐

- center：交叉轴上居中

- space-between：交叉轴上两端对齐，轴线之间的间隔两端分布

- space-around：每个轴线两侧的间隔都相等。那么，轴线之间的间隔是轴线与边框之间间隔的两倍

- stretch：默认值，轴线占满整个交叉轴

 

交流
1、QQ群：可添加qq群共同进阶学习： 进军全栈工程师疑难解 群号: 856402057

2、公众号：公众号「进军全栈攻城狮」

对前端技术保持学习爱好者欢迎关注公众号共同学习。在进阶的路上，共勉！