一、flex布局
Flex是Flexible Box的缩写,顾名思义为“弹性布局”,用来为盒装模型提供最大的灵活性。
任何一个容器都可以指定为Flex 布局。
下面是一段html代码
<div class="root">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
为.root指定display:flex,则.root就成为了flex容器,里面的div为flex容器的元素
css代码
//flex布局容器
.root
display flex
//flex容器的子元素
div
width 50px
height 50px
border 1px solid black
二、flex布局方向
默认水平方向为x轴,左边为x轴的起点,右边为x轴的终点,垂直方向为y轴,上面为y轴的起点,下面为y轴的终点
三、flex容器的六大属性
(一)flex-direction
作用:为容器内的元素排列指定方向,row为左到右,row-reverse为右到左,column为上到下,column-reverse为上到下,即row和row-reverse控制x轴方向,column和column-reverse控制y轴方向
flex-direction:row(默认)
flex-direction:row-reverse
flex-direction:column
flex-direction:column-reverse
(二)flex-wrap
作用:父容器间距不够时候控制是否换行,wrap为换行,nowrap为不换行
当flex-direction设置为row-reverse时候
设置flex-wrap:nowrap(默认),使用控制台缩小页面的宽度,发现父容器被压缩了,每个div宽度小于50px
当flex-direction设置为row-reverse时候
flex-wrap:wrap使用控制台缩小页面的宽度,发现父容器中div进行了换行,每个div宽度仍为50px
** (三)flex-flow**
作用:是flex-direction和flex-wrap的结合,
flex-flow: row wrap相当于分别设置flex-direction:row flex-wrap:wrap
(四)justify-content
根据flex-direction指定的方向进行起点、终点、居中的对齐
比如flex-flow为row wrap,row控制元素的左右方向排列
设置justify-content为 flex-start(默认),
可以发现 ,容器的元素向左对齐了
设置justify-content为 flex-center,
可以发现 ,容器的元素居中对齐了
设置justify-content为 flex-end,
可以发现 ,容器的元素向右对齐了
(五)align-items
作用方向为交叉轴
若当前flex-direction为column
设置align-items为flex-start,则该元素左对齐,因为当前元素的排列为上下排列,而align-items作用在交叉轴,即x轴,flex-start就向左对齐
设置align-items为center,则该元素左右居中,因为当前元素的排列为上下排列,而align-items作用在交叉轴,即x轴,center就左右居中对齐
设置align-items为flex-start,则该元素右对齐,因为当前元素的排列为上下排列,而align-items作用在交叉轴,即x轴,flex-end就向右对齐
(六)align-content
align-content和align-items都是作用于交叉轴,不同于align-items的是align-content是作用于多行的,即在单行的条件下,align-content不生效,比如
flex-flow为row-reverse nowrap下,设置align-content为center,不会居中,因为此时是单行
而flex-flow为row-reverse wrap下,设置align-content为center,会居中,因为此时为多行
四、flex子容器的属性
(一)order
作用:order从小到大为元素显示的顺序,
例子:
有一个flex容器,里面的div为按照row排列的,有三个div,分别有三个class,child1,child2,child3,设置2的order为0,3的order为1,1的order为2
<template>
<div class="root">
<div class="child1">1</div>
<div class="child2">2</div>
<div class="child3">3</div>
</div>
</template>
<script>
export default {
name: 'testFlex'
}
</script>
<style scoped lang="stylus">
//flex布局容器
.root
display flex
flex-direction row
flex-wrap wrap
/*justify-content center*/
/*align-items flex-end*/
/*background-color cadetblue*/
height 500px
div
width 50px
height 20px
border 1px solid black
&.child1
order 2
&.child2
order 0
&.child3
order 1
</style>
(二)flex-grow
作用:对剩余空间进行分配,如果没有剩余空间就不分配
flex-grow默认为0,即不分配
比如设置.child1的flex-grow设置为1,即剩余空间.child1占一份
在设置.child2的flex-grow设置为2,即剩余空间.child1占一份,.child2占两份
(三)flex-shrink
作用:缩小比例,如果空间不足,该项将缩小
(四)flex-basic
作用:分配多余空间前占据的空间,优先级比width/height高,
比如当前flex-direction为row,设置.child1的flex-basic为25px,.child2的flex-basic为24px,则flex-basic生效,flex-basic默认为auto
(五)flex
flex为flex-grow flex-shrink flex-basic三个的综合
(六)align-self
作用:对父容器的align-items进行覆盖,比如
父容器flex-direction为row align-items为flex-end,则子元素方向为从下到上排列
此时设置一个子元素1的align-self为flex-start,如图