CSS之Flexbox布局

Flexbox布局

Flex布局是什么?

Flex 布局是FlexBox布局的简写,意为“弹性布局”。ReactNative中的Flexbox布局工作原理和Web上的CSS中基本一致,只有少许差异。例如:flexDirection默认的是column而不是row

容器的属性

FlexDirection

flex-direction属性决定主轴方向。取值:row, row-reverse, column, column-reverse
在ReactNative默认:column。CSS中默认为:row
flex-direction

  • column(ReactNative默认值):主轴为垂直方向,起点在上端。
  • column-reverse: 与column相反。
  • row: 主轴水平方向,起点在左端。
  • row-reverse: 与row相反。

justify-content属性

justify-content定义子项目在主轴上的对齐方式。取值:flex-start, flex-end, center, space-between,space-around
justify-content

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

align-items

align-items属性定义项目在交叉轴上如何对齐。取值:flex-start, center, flex-endstretch

注意:使用stretch时,子元素在次轴上不能够固定高度。

align-items

  • flex-start:交叉轴的起点对齐。
  • flex-end:交叉轴的终点对齐。
  • center:交叉轴的中点对齐。
  • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

flex-warp

flex-warp默认情况下,元素是排列在一条线上的,当排不开则自动换行。取值:nowrap, wrapwrap-reverse

  • nowrap : (默认)不换行
  • wrap: 换行,第一行在上面。
  • wrap-reverse: 换行,第一行在下面。

小结

本文介绍了Flexbox几个常用的属性。查看ReactNative相关的布局请查看这篇文档