flex多行布局（Vue 中 Flex布局）

本文目录

• Vue 中 Flex布局
• ReactNative之Flex布局

Vue 中 Flex布局

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

display: flex;
display: inline-flex;

注意，设为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。

以下6个属性设置在容器上。

flex-direction属性决定主轴的方向（即项目的排列方向）。

它可能有4个值。

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

它可能取三个值。

（1）nowrap（默认）：不换行。

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

justify-content属性定义了项目在主轴上的对齐方式。

它有5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

align-items属性定义项目在交叉轴上如何对齐。

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

该属性可能取6个值。

小结：
justify 是对主轴对齐方式。
align开头的都是对交叉轴进行排列的项目。

以下6个属性设置在项目上。

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

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

负值对该属性无效。

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

接下来需要添加一些Css弹性盒子：桃园三兄弟之：flex-grow、flex-shrink、flex-basis详解

参考文章：
***隐藏网址***
***隐藏网址***

ReactNative之Flex布局

一般使用ReactNative开发App,一般都采用Flex布局，使用这套布局就非常快。
Flex简介
Flex又叫弹性布局，会把当前组件看做一个容器，他的所有子组件都是他容器中的成员，通过Flex，就能迅速的布局容器中的成员。
使用场景：当想快速布局一个组件中所有子组件的时候，可以使用Flex布局

Flex主轴和侧轴
Flex中有两个主要的概念：主轴和侧轴
主轴与侧轴的关系：相互垂直的。
主轴：决定容器中子组件默认的布局方向：水平，垂直
侧轴：决定容器中子组件与主轴垂直的布局方向比如主轴水平，那么子组件默认就是水平布局排布，侧轴就是控制子组件在垂直方向的布局

flexDirection属性
flexDirection:决定主轴的方向，水平或者垂直，这样子组件就会水平排布或者垂直排布
flexDirection共有四个值，在RN中默认为column。

row（默认值）：主轴为水平方向，从左向右。依次排列row-reverse：主轴为水平方向，从右向左依次排列column：主轴为垂直方向，默认的排列方式，从上向下排列column-reverse：主轴为垂直方向，从下向上排列

使用 :

效果 ：
row

row.png

row-reverse

row-reverse.png

column

column.png

column-reverse

column-reverse .png

flexWrap属性
flexWrap:决定子控件在父视图内是否允许多行排列。
flexWrap共有两个值，默认为nowrap。

nowrap 组件只排列在一行上，可能导致溢出。wrap 组件在一行排列不下时，就进行多行排列

使用

效果
nowrap

nowrap.png

wrap

wrap.png

justifyContent
justifyContent:决定子组件在主轴中具体布局，是靠左，还是居中等
justifyContent共有五个值，默认为flex-start

flex-start: 子组件向主轴起点对齐，如果主轴水平，从左开始，主轴垂直，从上开始。flex-end 子组件向主轴终点对齐，如果主轴水平，从右开始，主轴垂直，从下开始。center 居中显示，注意：并不是让某一个子组件居中，而是整体有居中效果space-between 均匀分配,相邻元素间距离相同。每行第一个组件与行首对齐，每行最后一个组件与行尾对齐。space-around 均匀分配,相邻元素间距离相同。每行第一个组件到行首的距离和每行最后一个组件到行尾的距离将会是相邻元素之间距离的一半

使用

效果
flex-start

flex-start.png

flex-end

flex-end.png

center

center.png

space-between

space-between .png

space-around

space-around.png

alignItems
alignItems:决定子组件在测轴中具体布局一直都没有管过侧轴，如果侧轴垂直，决定子组件在上，还是下，或者居中

alignItems共有四个值，默认为stretch。

flex-start 子组件向侧轴起点对齐。flex-end 子组件向侧轴终点对齐。center 子组件在侧轴居中。stretch 子组件在侧轴方向被拉伸到与容器相同的高度或宽度。

使用

效果
flex-start

flex-start .png

flex-end

flex-end .png

center

center .png

stretch

stretch .png

alignSelf
alignSelf:自定义自己的侧轴布局，用于一个子组件设置。注意：当某个子组件不想参照默认的alignItems时，可以设置alignSelf，自定义自己的侧轴布局。

alignSelf共有五个值，默认为auto。

auto 继承它的父容器的alignItems属性。如果没有父容器则为 "stretch"flex-start 子组件向侧轴起点对齐。flex-end 子组件向侧轴终点对齐。center 子组件在侧轴居中。stretch 子组件在侧轴方向被拉伸到与容器相同的高度或宽度。

使用

效果

alignSelf.png

flex
flex: 决定子控件在主轴中占据几等分。
flex: 任意数字，所有子控件flex相加，自己flex占总共多少，就有多少宽度.

使用

export default class ReactDemo extends Component { render() { return ( 《View style={styles.rootView}》 《Text style={}》4《/Text》 《/View》 ); }}const styles = StyleSheet.create({ rootView:{ backgroundColor:’darkorange’, flex:1, flexDirection:’row’, justifyContent:’space-around’, alignItems:’center’ }, baseTextStyle:{ // width:50, // height:50, fontSize:15, textAlign:’center’, marginTop:20, }, text1Style:{ flex:1, backgroundColor:’red’, }, text2Style:{ flex:1, backgroundColor:’deepskyblue’, }, text3Style:{ flex:3, backgroundColor:’green’ }, text4Style:{ flex:1, backgroundColor:’blue’, }});

效果

flex.png