2018-03-29

Flexbox布局

1.布局模型

五湖四海flexbox由Flex容器和Flex项目组成,容器即父元素,项目即子元素 任何一个元素可以指定flexbox布局,设为display:flex或display:inline-flex。

更好理解伸缩流,看下图

主轴既可以是水平轴,也可以是垂直轴,项目默认沿主轴排列,还是看图比较明了。

2.伸缩容器属性

浏览器支持属性有

display

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

2.1 display

指定元素是否为伸缩容器

display:flex |inline-flex

注意设为flex布局后,子元素的float、clear和vertical-align属性失效(vertical-align设置元素的垂直对齐方式)

2.2 flex-direction

指定主轴的方向

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

row(默认值):伸缩容器若为水平方向轴,伸缩项目的排版方式为从左到右排列。

五湖四海row-reverse:伸缩容器若为水平方向轴,伸缩项目排版方式为从右到左排列。

column:伸缩容器若为垂直方向轴,伸缩项目的排版方式为从上到下排列。

五湖四海column-reverse:伸缩容器若为垂直方向轴,伸缩项目的排版方式为从下到上排列。

2.3 flex-wrap

指定主轴方向空间不足时,是否换行及该如何换行

五湖四海flex-wrap:nowrap |wrap|wrap-reverse

nowrap:即使空间不足,伸缩容器也不允许换行。

wrap:空间不足时,允许换行,若主轴为水平轴,则换行方向为从上到下。

wrap-reverse:空间不足时,允许换行,若主轴为水平轴,则换行方向为从下到上(与wrap时候相反)。

2.4 flex-flow

五湖四海flex-flow:flex-directionflex-wrap

此属性是flex-direction和flex-wrap的缩写版本

2.5 justify-content

指定沿主轴线的对齐方式

justify-content:flex-start | flex-end| center |space-between|space-around

flex-start:向主轴线的其实位置靠齐(默认值)

五湖四海flex-end:向主轴线的结束位置靠齐

center:向主轴线的中心位置靠齐

space-between:平均分布在主轴线里,第一个伸缩项目在主轴线的开始位置,最后一个伸缩项目在主轴线的结束位置

space-around:伸缩项目平均分布在主轴线里,两端保留一半的空间

2.6 align-items

指定伸缩项目在侧轴方向上的对齐方式

align-items:flex-start |flex-end|center|baseline|stretch

flex-start:向侧轴的起始位置靠齐

五湖四海flex-end:向侧轴的结束位置靠齐

五湖四海center:向侧轴的中心位置靠齐

baseline:如伸缩项目的行内轴与侧轴为同一条,则该值与"flex-start"等效,其他情况,该值参与基线对齐

stretch:向侧轴方向拉伸填充整个容器

2.7 align-content

伸缩项目出现换行后在侧轴方向上的对齐方式,要换行必须要有flex-wrap:wrap,其实意思就是换行后每行之间的对齐方式

align-content:flex-start |flex-end|center|space-between |space-around |stretch

flex-start:向侧轴的起始位置靠齐

flex-end:向侧轴的结束位置靠齐

center:向侧轴的中心位置靠齐

space-between:在侧轴中平均分布

space-around:在侧轴中平均分布,且在两边各有一半的空间

stretch:在侧轴上伸展以占用剩余的空间

3.伸缩项目属性

伸缩项目支持属性有

order

flex-grow

flex-shrink

flex-basis

flex

align-self 3e

4.1 order

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

order:integer

3.2 flex-grow

定义伸缩项目的放大比例,默认值为0,即若存在剩余空间,也不放大。比如所有伸缩项目的flex-grow为1,那么每个伸缩项目将设置为一个大小相等的剩余空间;如果你将其中一个伸缩项目的flex-grow设置为2,那么这个伸缩项目所占的剩余空间是其他伸缩项目所占剩余空间的2倍。

flex-grow:number

3.3 flex-shrink

定义伸缩项目的收缩能力,即如果空间不足,该项目将缩小

flex-shrink:number//默认值为1

如果所有项目的flex-shrink的值都为1,当空间不足时,都将等比例缩小,如果一个项目的flex-shrink的值为0,其他项目为1,当空间不足时,前者不缩小。

3.4 flex-basis

五湖四海设置伸缩项目的基准值,剩余的空间按比率进行伸缩

flex-basis:length| auto

3.5 flex

flex是flex-grow、flex-shrink和flex-basis这三个的缩写

flex:none | flex-grow flex-shrink flex-basis/*

    flex-shrink和flex-basis是可选参数

*/

此处如果flex值为1,相当于flex-grow值为1,该元素把伸缩容器的剩余空间占满。

3.6 align-self

设置单个的伸缩项目在侧轴上的对齐方式,可以覆盖align-items属性,默认值为auto

align-self:auto|flex-start |flex-end|center|baseline|stretch

auto是继承父元素的align-items属性,如果没有父元素,则按照stretch来计算其值,其他的同align-items。

接下来总结一下下react-native中flexbox的使用,在react-native中flexDirection、alignItems和justifyContent可以满足大多数布局需求。

react-native目前主要支持flexbox的属性

alignItems

alignSelf

flex

flexDirection

flexWrap

justifyContent

1.alignItems

用法同前面说的align-items,区别在与react-native中需要使用驼峰写法

alignItems:flex-start |flex-end|center|stretch

2.alignSelf

用法同前面说的align-self,区别在与react-native中需要使用驼峰写法

alignSelf:auto|flex-start |flex-end|center|stretch

3.flex

用法同前面说的flex

flex:number

4.flexDirection

用法同前面说的flex-direciton,但react-native中默认是column

五湖四海flexDirection:row|column

5.flexWrap

用法同前面说的flex-wrap,区别在与react-native中需要使用驼峰写法

flexWrap:wrap| nowrap

6.justifyContent

用法同前面说的justifyContent,区别在与react-native中需要使用驼峰写法

justifyContent: flex-start | flex-end| center |space-between|space-around

哈哈哈😆!!!

推荐阅读更多精彩内容

  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 2,906评论 0 26
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 2,520评论 0 6
  • 前言 FlexBox是css3的一种新的布局方式,天生为解决布局问题而存在的它,比起传统的布局方式,我们使用Fle...
    zevei阅读 969评论 23 3
  • 阅读目录移动开发基本知识点 calc基本用法box-sizing的理解及使用理解display:box的布局理解f...
    张宪宇阅读 1,072评论 0 1
  • flex布局基础知识 main axis(主轴): Flex容器的主轴主要用来配置Flex项目。它不一定是水平,这...
    前端小兵阅读 270评论 0 1