flex布局

　　任何一个容器都可以指定为 Flex 布局。行内元素也可以使用flex布局（display:inline-flex;）。 　　注意，设为 Flex 布局以后，子元素的 float 、 clear 和 vertical-align 属性将失效。 　　采用 Flex 布局的元素，称为 Flex 容器，它的所有子元素自动成为容器成员，称为 Flex 项目（flex item） 　　容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start ，结束位置叫做 main end ；交叉轴的开始位置叫做 cross start ，结束位置叫做 cross end 。项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size ，占据的交叉轴空间叫做 cross size。 一、容器的属性。 1、flex-direction：绝对主轴的排列方向。 　　4个属性值：水平左右/右左，垂直上下/下上 2、flex-wrap：如果一条轴线排不下，如何换行。 　　3个属性值：不换行，换行（第一行在上），换行（第一行在下） 3、flex-flow：是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap 。 4、justify-content

flex是我们很常用的一种布局方式，它可以很简便的现实我们想要的一些效果。 以前我都是在网上查看阮一峰老师的博客，现在自己简单的整理整理。 一、什么是flex Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 .box{ display: flex; } .box-span{/*行内元素也可以flex布局*/ display: inline-flex; } webkit内核的浏览器，必须添加 -webkit 前缀。 注意，设为Flex布局以后，子元素的 float 、 clear 和 vertical-align 属性将失效。 二、基本概念 采用了flex布局的元素，称之为“容器”，而其所有子元素为“项目” 三、容器的属性 flex-direction flex-wrap flex-flow justify-content align-items align-content 3.1 felx-direction 用来决定主轴方法（即项目的排列方向）。 .box { flex-direction: row | row-reverse | column | column-reverse; } row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column

一、Flex 布局是什么？ Flex是Flexible box的缩写，意为“弹性盒布局”，用来为盒状模型提供最大的灵活性，在父容器中自动扩展多列和多行。 任何一个容器都可以指定为flex布局 .mybox{ display: flex; } 行内元素也可以设置flex布局 .mybox{ display: inline-flex; } Webkit内核的浏览器，必须加上-webkit前缀。 .mybox{ display: flex; display: -webkit-flex; /*Safari*/ } 注意⚠️，设为 Flex 布局以后，子元素的 float 、 clear 和 vertical-align 属性将失效。 二、基本概念 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 容器存两根轴：水平的主轴（main axis）跟垂直的交叉轴（cross axis）。主轴的开始位置叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size 三、容器的属性

flex布局为弹性布局，在布局方便提供很大的便利。 flex布局的定义 　　Flex是Flexible Box的缩写，意为"弹性布局"，任何一个容器都可以指定为Flex布局。　 .box{ display:flex | inline-flex; display: -webkit-flex | -webkit-inline-flex; } ps：设置为flex后，子元素的float，vertical-align,clear属性会失效。 flex父元素属性 　 1.　flex-direction：指定项目排列方式。 .box{ flex-direction: row | row-reverse | column | column-reverse; } -row:默认值，水平排列，起点在左端。 -row-reverse:水平排列，起点在右端。 -column:垂直排列，起点在上端。 -column-reverse:垂直排列，起点在下端。 2.　flex-wrap:如果一行排不下，指定换行方式。 .box{ flex-wrap: nowrap | wrap | wrap-reverse; } -nowrap:默认值，不换行。 -wrap:换行，第一行在上方。 -wrap-reverse:换行，第一行在下方。 3.　flex-flow:是flex-direction和flex

容器属性 flex-direction 属性 决定主轴的方向。 有 4 个可选值 : row （默认值）：主轴为水平方向，起点在左端。 row-reverse ：主轴为水平方向，起点在右端。 column ：主轴为垂直方向，起点在上沿。 column-reverse ：主轴为垂直方向，起点在下沿。 flex-wrap 属性 决定一条轴线排不下，如何换行。 有 3 个可选值 : nowrap （默认）：不换行。 wrap ：换行，第一行在上方。 wrap-reverse ：换行，第一行在下方。 justify-content 属性 决定项目在主轴上的对齐方式 有 5 个可选值 : flex-start （默认值）：左对齐 flex-end ：右对齐 center ： 居中 space-between ：两端对齐，项目之间的间隔都相等。 space-around ：每个项目两侧的间隔相等。 align-items 属性 决定项目在交叉轴上如何对齐 有 5 个可选值 : flex-start ：交叉轴的起点对齐。 flex-end ：交叉轴的终点对齐。 center ：交叉轴的中点对齐。 baseline: 项目的第一行文字的基线对齐。 stretch （默认值）：如果项目未设置高度或设为 auto ，将占满整个容器的高度。 align-content 属性 决定多根轴线的对齐方式 有

Flex是什么 Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 display: inline-flex; Webkit内核的浏览器，必须加上-webkit前缀。 .box{ display: -webkit-flex; /* Safari */ display: flex; } 设为Flex布局，子元素的float、clear和vertical-align属性将失效。 基本概念 采用Flex布局的元素，称为Flex容器，简称“容器”，它的所有子元素自动成为容器成员，称为Flex项目 man axis水平主轴； cross axis垂直交叉轴； main end主轴的结束位置； cross start交叉轴的开始位置；main size单个项目占据的主轴空间；cross size占据的交叉轴空间； main start主轴开始的位置；cross end交叉轴结束的位置； 容器属性： 1、flex-direction 决定主轴的方向（即项目的排列方向）； 默认4个值： row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。 2、flex-wrap

Flex 弹性盒子 任何容器都可以制定flex布局，包括行内元素。 设为Flex布局后，float，clear，vertical-align属性失效。 采用Flex布局的元素称为 ”Flex容器”,简称”容器” 当一个元素设为容器后,它包裹的所有子元素都会自动成为容器 的成员.成为Flex的项目(Flex Item) 简称”项目” 容器默认有两个方向的轴线,水平的轴线称为”主轴(main axis)”, 垂直的轴线称为”交叉轴(cross axis)”也可以称为”从轴”或”副轴” 设置在容器上的6个属性: flex-direction [定义项目(子元素)的主轴方向] flex-wrap [定义项目(子元素)的排列是否超出换行] flex-flow [定义项目的排列方式] justify-content[定义项目横轴方向的对齐方式] align-items [定义项目纵轴方向的对齐方式] align-content [定义项目纵轴方向的排列方式] 语法：flex-direction : row | row-reverse | column | column-reverse 属性: 1.row（默认值）： 主轴为水平方向，起点在左端。 2.row-reverse： 主轴为水平方向，起点在右端。 3.column： 主轴为垂直方向，起点在上沿。 4.column-reverse：

一.宽度单位和像素密度 　　react的宽度不支持百分比,设置宽度时不需要带单位,那么默认的单位是什么呢? 　　　 1 /** 2 * Sample React Native App 3 * https://github.com/facebook/react-native 4 */ 5 'use strict'; 6 import React, { 7 AppRegistry, 8 Component, 9 StyleSheet, 10 Text, 11 View, 12 Dimensions, 13 PixelRatio 14 } from 'react-native'; 15 16 class MyProject2 extends Component { 17 render (){ 18 let {height,width}=Dimensions.get('window'); 19 let pixelRatio=PixelRatio.get(); 20 let {pheight,pwidth}={ 21 pheight:PixelRatio.getPixelSizeForLayoutSize(200), 22 pwidth:PixelRatio.getPixelSizeForLayoutSize(100) 23 } 24 return( 25 <View> 26 <Text

如果需要使用伸缩布局首先得把display:flex;对于兼容还得加前缀display:-webkit-display:flex;等其他浏览器前缀，但我本机Chrome测试已经不需要加前缀了，其实这些还好，关键移动端竟然不支持这个属性，移动端支持的还是老版本的display:-webki-box;不过对于学习来说，也不管它支持不支持了，学了再说吧，更何况Chrome已经把flex的前缀去了，说明flex多少还是有些稳定的。 下面列出了关于CSS与flex一起使用的一些属性 display 显示方式 flex-direction 设置flex模型的方向 justify-content 设置水平方向的对齐 align-items 设置垂直方向的对齐 flex-wrap 是否换行 align-content 设置换行后的对齐方式 flex-flow 简写flex-direction和flex-wrap order 指定顺序 align-self 覆盖容器的对齐项目属性 flex 指定长度 注意如果设置了宽度盒子是固定的。 弹性盒模型可以设置成· flex 或 inline-flex display:flex 注意这个被固定住了，默认情况下，沿水平轴，从左至右 inline-flex和flex的效果是一样的，也没弄个所以然出来。 Flex的方向 　　 flex-direction:

一、flexbox弹性盒模型属性 flex布局是一种 一维布局 模型，一次只能处理一个维度（一行或者一列）上的元素布局 1.每个弹性容器都有两根轴： 主轴和交叉轴 ，两轴垂直。PS： 主轴不一定水平。 2.弹性容器中的所有子元素称为<弹性元素>，弹性元素沿 主轴 排列。 3.每根轴都有 起点和终点 ，这对于元素的对齐非常重要。 4.弹性元素也可以通过 display:flex 设置为另一个弹性容器，形成嵌套关系。因此 一个元素既可以是弹性容器也可以是弹性元素 。 二、flex布局 1.元素分布方向 (flex-direction) ： 弹性元素沿只沿着 主轴 排列 　→ flex-direction:row 　　　 ↓ flex-direction:column 　　　← flex-direction:row-reverse 　　　 ↑ flex-direction:column-reverse 2.元素折行方式 (flex-wrap) flex-wrap: nowrap | wrap | wrap-reverse 可使得主轴上的元素不折行、折行、反向折行。 1和2合并写法flex-flow = flex-drection + flex-wrap eg. flex-flow: row nowrap; 三、flex元素大小 1.元素弹性收缩 (flex-shrink)