Weex Flexbox弹性布局使用

一、flexbox的关键字

　　1、在父视图上使用的关键字及对应的内容：

　　　　display: -webkit-box | -ms-flexbox | flex

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

　　　　flex-wrap: nowrap | wrap | wrap-reverse

　　　　flex-flow: <flex-direction> || <flex-wrap>

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

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

　　2、在子视图上使用的关键字及对应的内容：

　　　　order: <integer> // 设置子元素在父视图中的顺序，值可为负数整、0、正整数，按从小到大排序，默认值：0

　　　　flex-grow: <integer> // 设置子元素在父视图中的占比，值为正整数，默认值：0

　　　　flex-shrink: <integer> // 设置子元素是否按照flexbox布局，值为1/0, 默认值： 1 按照flexbox布局

　　　　flex-basis: auto | <width> // 设置子视图的宽度，auto代表自适应，width则为自定义宽度

　　　　flex： auto | none | 1 // flex的组成： flex-grow, flex-shrink, flex-basis; auto (1 1 auto)／none (0 0 auto) / 1 代表占满父视图

二、学习文档链接

　　1、https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

　　2、http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

转载于:https://www.cnblogs.com/PLA-Artillery/p/7605305.html

Weex Flexbox弹性布局使用相关推荐

CSS3 Flexbox 弹性布局
Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何一个容器都可以指定为Flex布局.2009年,W3C提出了一种新的方案----Fle ...
Android 布局开发之百分比布局、弹性布局
1.百分比布局很简单,超级简单.引用之后就可以使用了. compile 'com.android.support:percent:23+' git地址: https://github.com/Jul ...
CSS3支持box-flex弹性布局
<!DOCTYPE HTML> <html> <head><meta charset="utf-8"><title>&l ...
android垂直排列元素_Android弹性布局(FlexboxLayout)
Flexbox简介 flexbox是属于CSS的一种布局方案,可以简单.完整.响应式的实现各种页面布局.谷歌将其引入以提高复杂布局的能力. 源码传送门 Flexbox的布局和相关名称上图模型中包含以 ...
关于FlexBox的布局
关于FlexBox的布局基本要素因为FlexBox是一整个模块并不是一个单独的属性,它涉及到很多东西包括它的所有设置属性.一些属性是需要被设置在容器(父级元素,称为『弹性容器』),而一些其他的属性 ...
html中前台布局特点,HTML5弹性布局有什么优点
HTML5弹性布局是用来为盒状模型提供最大的灵活性,优点在于其容易上手,根据flex规则很容易达到某个布局效果.任何一个容器都可以指定为Flex弹性布局. 本教程操作环境:windows7系统.CSS ...
flex将元素放在最后_前端布局——Flex弹性布局
本篇解释了有关flexbox的知识点内容,重点介绍父元素(flex容器)和子元素(flex元素)的不同及可能的属性. 背景 Flexbox Layout弹性布局模块的目的在于提供一种更有效的方式来布置 ...
React Native - FlexBox弹性盒模型
FlexBox布局 1. 什么是FlexBox布局? 弹性盒模型(The Flexible Box Module),又叫FlexBox,意为"弹性布局",旨在通过弹性的方式来对 ...
“约见”面试官系列之常见面试题第六篇说说弹性布局（建议收藏）
目录一.基本概念二.容器属性 2.1 flex-direction: 2.2 flex-wrap: 2.3 justify-content: 2.4 align-items: 2.5 ...

Weex Flexbox弹性布局使用

Weex Flexbox弹性布局使用相关推荐

最新文章

热门文章