FlexBox布局整理
Flex基本概念
在flex容器中默认存在两条轴，水平主轴（main axis）和垂直的交叉轴（cross axis），这是默认的设置，你可以自主改变主轴和交叉轴。
在容器中的每个单元块被称为flex item，每个项目占据的主轴空间为（main size），占据的交叉轴的空间称为（cross size）。
flex容器.png
Flex容器属性
flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content
flex-direction: 决定主轴的方向
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
默认值：row，主轴为水平方向，起点在左端。
flex-row.png
row-reverse:主轴为水平方向，起点在右端
flex-row-reverse.png
column:主轴为垂直方向，起点在上沿
flex-column.png
column-reverse: 主轴为垂直方向，起点在下沿
flex-wrap:决定容器内项目是否换行
默认情况下，项目都排在主轴线上，使用flex-wrap可实现项目的换行
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
默认值： nowrap不换行，即当主轴尺寸固定时，当空间不足时，项目尺寸会随之调整而不会挤到下一行
flex-nowrap.png
wrap: 项目主轴总尺寸超出容器时换行，第一行在上方
flex-wrap.png
wrap-reverse:换行，第一行在下方
flex-wrap-reverse.png
- flex-flow: flex-direction 和 flex-wrap的简写形式
.container {
flex-flow: <flex-direction> || <flex-wrap>;
}
- justify-content: 定义了项目在主轴的对齐方式。
.container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
建立在主轴为水平方向时测试，即flex-direction: row
默认值：flex-start 左对齐
flex-start.png
flex-end:右对齐
flex-end.png
center：居中
flex-center.png
space-between:两端对齐，项目之间的间隔相等，即剩余空间等分成间隙
flex-space-between.png
space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边缘的间隔大一倍。
flex-space-around.png
- align-items：定义了项目在交叉轴上的对齐方式
.container {
align-item: flex-start | flex-end | center | baseline | stretch;
}
建立在主轴为水平方向时测试，即flex-direction: row
默认值为stretch即如果项目未设置高度或者设为auto，将占满整个容器的高度。
align-items-stretch.jpg
假设容器高度设置为100px，而项目都没有设置高度的情况下，则项目的高度也为100px。
flex-start：交叉轴的起点对齐
align-items-flex-start.jpg
假设容器高度设置为100px，而项目分别为20px，40px，60px，80px，100px，则如上图显示。
flex-end：交叉轴的终点对齐
align-items-flex-end.jpg
center:交叉轴的中心对齐
align-items-center.jpg
baseline：项目的第一行文字的基线对齐
align-items-baseline.jpg
以文字的底部为主，仔细看图可以理解。
- align-content:定义了多轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用
.container {
align-content: flex-start | flex-end | center | space-between | space-around
}
这个可以这样理解：
当你flex-wrap设置为nowrap的时候，容器仅存在一根轴线，因为项目不会换行，就不会产生多条轴线。
当你flex-wrap设置为wrap的时候，容器可能会出现多条轴线，这时候你就需要去设置多条轴线之间的对齐方式了。
建立在主轴为水平方向时测试，即flex-direction:row,flex-wrap: wrap
默认值为stretch，看下图的图就很好理解了
align-content-stretch.jpg
从图可以看出又三条轴线（因为容器宽度有限），当值为stretch时会三条轴线平分容器的垂直方向上的空间。
值得注意的是，虽然在每条轴线上项目的默认值也为stretch，但是由于我每个项目我都设置了高度，所以它3并没有撑开整个容器。如果项目不设置高度的话就会变成下面这样：
align-content-stretch1.jpg
这个我在前面也有提到（align-items），这里重点还是理解三条轴线会评分垂直轴上的空间。
flex-start：轴线全部在交叉轴上的起点对齐
align-content-flex-start.jpg
flex-end:轴线全部在交叉轴上的终点对齐
align-content-flex-end.jpg
center：轴线全部在交叉轴上的中间对齐
align-content-center.jpg
space-between: 轴线两端对齐，之间的间隔相等，即剩余空间等分成间隙。
align-content-space-between.jpg
space-around：每个轴线两侧的间隔相等，所以轴线之间的间隔比轴线与边缘的间隔大一倍。
align-content-space-around.jpg
到这里关于容器上的所有属性都讲完了
alignItems
- flex-start
- flex-end
- center
- stretch
alignSelf
- auto
- flex-start
- flex-end
- center
- stretch
borderBottomWidth
- number
borderLeftWidth
- number
borderRightWidth
- number
borderTopWidth
- number
borderWidth
- number
bottom
- number
flex
flex在RN中只能为整数值
flexBasis
- number
flexDirection
- row
- row-reverse
- column
- column-reverse
flexGrow
- number
flexShrink
- number
flexWrap
- wrap
- nowrap
height
- number
justifyContent
- flex-start
- felx-end
- center
- space-between
- space-around
left
- number
margin
- number
marginBottom
- number
marginHorizontal
- number
marginTop
- number
marginVertical
- number
maxHeight
- number
maxWidth
- number
minHeight
- number
minWidth
- number
overflow
- visible
- hidden
- scroll
padding
- number
paddingBottom
- number
paddingHorizontal
- number
paddingLeft
- number
paddingTop
- number
paddingVertical
- number
position
- absolute
- relative
right
- number
top
- number
width
- number
zIndex
- number
引用：
网友评论