Flexbox布局之对齐方式

display

display: flex | inline-flex;
是否使用flexbox方式布局

该属性是定义在弹性容器上的;根据其值决定是内联还是块布局。这时它的直属下级将会变成flex文档流。

flexDirection

flexDirection: row | row-reverse | column | column-reverse;
用来声明主轴的方向和在主轴上排列的方向

  • row(默认):在ltr排版方式下从左向右排列;在rtl排版方式下从右向左排列。
  • row-reverse:与row排列方向相反,在ltr排版方式下从右向左排列;在rtl排版方式下从左向右排列。
  • column:类似于row但是是顶部到底部
  • column-reverse:类似于row-reverse但是是底部到顶部

justifyContent

justifyContent: flex-start | flex-end | center | space-between | space-around;
主轴方向上的对齐方式

  • flex-start(默认):子项会从一行的起始处开始放置
  • flex-end:子项会从一行的结尾处开始放置
  • center:子项会集中在一行的中央
  • space-between:子项会被均匀的分布在行内;首项放置在一行的开始,尾项放置在一行的结束
  • space-around:子项会均匀的按照同等距离分布在一行。需要注意的是,在视觉上会觉得并不等距,因为所有子项在两侧都需要加上同等的空间。首项会与容器开始边缘有一个单位空间的距离,但是与下一项会有两个单位空间的距离。

alignItems

alignItems: flex-start | flex-end | center | baseline | stretch;
侧轴方向的对齐方式

  • flex-start:弹性项在侧轴起点边的外边距紧靠住该行在侧轴起始的边。
  • flex-end:弹性项在侧轴起点边的外边距紧靠改行在侧轴结尾的边。
  • center:弹性项会被放置在侧轴的中央。
  • baseline:弹性项会根据他们的基线对齐。
  • stretch(默认):在侧轴方向上拉伸弹性项以致填充满弹性容器。(任遵从min-width/max-width)

flexWrap

flexWrap: nowrap | wrap | wrap-reverse;
默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

  • nowrap(默认):单行显示。在ltr排版下,项目自左向右;在rtl下,自右向左
  • wrap:多行显示。在ltr排版下,项目自左向右;在rtl下,自右向左
  • wrap-reverse:多行显示。方向与wrap相反

alignContent

alignContent: flex-start | flex-end | center | space-between | space-around | stretch;
根据在侧轴上的额外空间来排列容器的行
对于只有单行的弹性项来说是没有效果的。

  • flex-start:行会紧靠容器的起始位
  • flex-end:行紧靠容器的结束位
  • center:行紧靠容器的中间位
  • space-between:每行会均匀分布;首行在容器起始处而最后行在容器结束处
  • space-around:每行根据相同的距离均匀的分布
  • stretch(默认):每行将会伸展以占用剩余的空间。

flexFlow

flexFlow: ‘flex-direction’ ‘flex-wrap’

相当于同时设置两个属性:

1
2
flex-direction: row;
flex-wrap: wrap;

flex

flex-growflex-shrinkflex-basis三个属性的缩写,其中第二个和第三个参数(flex-shrink、flex-basis)是可选参数。默认值为“0 1 auto”。

宽度 = 弹性宽度 * ( flexGrow / sum( flexGorw ) )

alignSelf

alignSelf: ‘auto | flex-start | flex-end | center | baseline | stretch’;

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

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :