flex (弹性布局)

设置布局方式为弹性布局

如果是Webkit 内核的浏览器,必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

flex设置在容器上的属性有以下6个:

flex-direction

flex-direction属性决定主轴的方向(即项目的排列方向)

flex-direction: row | row-reverse | column | column-reverse;

row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。
flex-wrap

flex-wrap:当一行排列不下时的换行方式。

nowrap(默认):不换行。
wrap:换行,第一行在上方。
wrap-reverse:换行,第一行在下方。
flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

justify-content
flex-start(默认值):左对齐
flex-end:右对齐
center: 居中
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
align-items

align-items属性定义项目在交叉轴上如何对齐。

flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。

设置在容器里面的子元素(子元素简称项目)的属性有以下6个:

order

order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

flex-grow

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

flex-shrink

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

flex-basis

flex-basis属性自定义在分配多余空间之前,项目占据的主轴空间(main size)。

.item {
flex-basis: <length> | auto; /* default auto */
}
它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。

flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 导读:房子,对于国人来说,不仅是一个家的港湾,更多的是一个沉重的负担。在国内,房子被赋予了太多太多的意义,远远超过...
    扒了个热点阅读 1,798评论 1 0
  • 《出售时间之前你要牢记的三条铁律》 财富自由根本不是终点站,那只是一个里程碑,那之后还有很长的路(名字叫做成长)要...
    夏目目阅读 113评论 0 0
  • 将一颗种子埋在土里 给它浇水 以为它会萌芽 以为它会开花结果 殊不知 被水淹死了 给自己一个希望 以为听到花开花落...
    辰渔阅读 217评论 1 5
  • 十载春秋磨一剑,人生百态书中现。 曹公字字皆血泪,半世潦倒心不改。 浮生一梦古今同,且看《红楼》似花开。
    浮生小姿阅读 477评论 15 17
  • 在开发过程中,需要知道设备信息。 我们直接获取到的都是设备编码如"iphone7,2",需要做一个转换,才能被大众...
    wfg西游阅读 1,554评论 1 0