⼩程序CSSFlexbox（弹性盒⼦）布局模块
容器中使⽤flexbox
flexbox的模型
当元素表现为 flex 框时，它们沿着两个轴来布局：
名词说明
主轴（main axis）是沿着 flex 元素放置的⽅向延伸的轴（⽐如页⾯上的横向的⾏、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
交叉轴（cross axis）是垂直于 flex 元素放置⽅向的轴。该轴的开始和结束被称为 cross start 和 cross end。
设置了 display: flex 的⽗元素被称之为 flex 容器（flex container）。
在 flex 容器中表现为柔性的盒⼦的元素被称之为 flex 项（flex item）
实例
<div class="flex-container">
<div>1</div>
flex布局对齐方式<div>2</div>
<div>3</div>
</div>
含有三个项⽬的flex容器，其实就是⼀个普通的容器标签，在样式表中通过将他的display属性值设置为flex，就可以作为伸缩容器⽤了。
.flex-container {
display: flex;
}
flex容器的属性
flex-direction
定义容器在哪个⽅向上来排列⼦项⽬
可选值含义⽰例
column 垂直⽅向上排列，从上到下
column-reverse
也是垂直⽅向上，不过是从下到上的
row
⽔平⽅向上排列，从左到右
row-reverse
⽔平⽅向上排列，从右到左
可选值含义⽰例
flex-wrap
规定是否对flex的⼦项⽬进⾏换⾏操作，当⼦项⽬⽔平排列的时候，⼀⾏的项⽬过多是否对其进⾏换⾏的操作。
可选值含义⽰例
wrap
在必要的时候换⾏
nowrap
不进⾏换⾏，此值为默认值
wrap-reverse 必要的时候换⾏，不过要以相反的顺序换⾏，相当于
从下到上换⾏
可选值含义⽰例
flex-flow
这个参数是对flex-wrap和flex-direction的组合参数，通过这⼀个属性可以设置两个属性的值
.flex-container {
display: flex;
flex-flow: row wrap;
}
通过设置flex-flow把flex-direction设置为row(⽔平布局)，flex-wrap设置为wrap(必要时换⾏)。justify-content
控制flex⼦项⽬在主轴上的位置。
可选值含义⽰例
center
将flex的⼦项⽬向主轴上中⼼位置对齐
flex-start 将⼦项⽬向主轴开始位置对齐，即main start
位置，本例中最左侧
flex-end 将⼦项⽬向主轴结束位置对齐，即main end
位置，本例中最右侧
space-around
主轴⽅向上，在每个⼦项⽬的前后都加上空格
space-between 主轴⽅向上在两个⼦项⽬之间加上空格(头尾没
有空格)
align-items
控制flex⼦项⽬在交叉轴上的位置。
可选值含义⽰例
center ⼦项⽬向交叉轴中⼼位置对齐
flex-
start ⼦项⽬向交叉轴起始位置对齐，即cross start位置，本例中最上⽅
flex-end ⼦项⽬向交叉轴结束位置对齐，即cross end位置，本例中最下⽅
stretch 交叉轴⽅向拉伸⼦项⽬填充容器，此值为默认值
baseline ⼦项⽬与基线（容器中⼼⽔平线）对齐
align-self
与align-item相同也是定义了交叉轴⽅向上的对齐⽅式，可选值也是相同的，但是这个属性⽤于⼦项⽬⾃⾝，它会覆盖掉⽗容器的align-item属性值。下⾯的例⼦中设置⽗容器的align-item=flex-start，单独设置⼦项⽬“2”align-self属性为center，效果图如下：
align-content
定义了⼦项⽬的填充⽅式，即flex容器内部⼦项⽬从哪个位置开始填充。该属性对单⾏弹性盒⼦模型⽆效。（即：带有 flex-wrap:nowrap）。
可选值含义⽰例
center 所有⾏朝向容器的中⼼填充。每⾏互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第⼀⾏的距离相等于容器的交叉轴终点边和最后⼀⾏的距离
flex-
start 所有⾏从交叉轴起点开始填充。第⼀⾏的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每⼀⾏紧跟前⼀⾏

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。