美文网首页
React之Flex

React之Flex

作者: 心淡然如水 | 来源:发表于2016-08-03 13:45 被阅读86次

react native 的flex布局,是web的阉割版本,目前还不支持flex-shrink、flex-basis、order几种flex属性,同时现有支持的flex属性值也不全。

alignItems

调整伸缩项目在侧轴上的定位方式

可选值:flex-start,flex-end,center,stretch

alignSelf

alignSelf属性会覆盖容器的alignItems属性,取值和用法alignItems一样。

可选值:auto,flex-start,flex-end,center,stretch

justifyContent

与alignItems相呼应,表示元素在主轴(横轴)方向上的对齐方式

可选值:flex-start,flex-end,center,space-between,space-around

flexDirection

子元素在父容器中的排列位置,相比于web,少了row-reverse和column-reverse两个值

可选值:row,column

flexWrap

子元素超出父容器时是否换行

可选值:wrap,nowrap

本文参考至:

justify-content

flex-direction

flex-flow

flex-wrap

align-content

align-items

Posted inWEB前端技术.Taggedreact,react-native.

相关文章

  • React之Flex

    react native 的flex布局,是web的阉割版本,目前还不支持flex-shrink、flex-bas...

  • ReactNaive之CSS和Flex布局

    ReactNaive之CSS和Flex布局 ReactNaive相关文章1. React Native 中文网2....

  • Flex布局

    flex布局前提条件--display: flex(react native 不用设置) 与flex布局相关的属性...

  • 03-Flexible Box

    概念 React-Native 中所有的布局均采用 Flex 布局。采用 Flex 布局的元素,称为 Flex 容...

  • 移动端添加适配方案

    Flex 布局 + rem + flexible+sass React 暴露webpack配置,即 react-s...

  • react native 的flex布局

    flex=1和flex=0(默认)有什么区别? react native是基于flex容器进行设计的,当对comp...

  • React Native学习资料

    React 入门实例教程React-Native入门指南Flex 布局教程:语法篇React Native探索(二...

  • 绿侠快充App技术整理

    React Native 原理 ES6 Flex 布局 React Navigation MobX 视频教程 网...

  • RN(react native)入坑指南-04,布局容器

    react native 支持采用flex方式布局。默认情况下如果不设置flex容器的宽度,那么flex容器会10...

  • Flex布局

    Flex Flex:弹性布局 React Native 的默认布局是flex布局 如果将父元素设置成弹性盒模型模式...

网友评论

      本文标题:React之Flex

      本文链接:https://www.haomeiwen.com/subject/hevqsttx.html