Vue | 40.黑马补充 - Flex布局常见子项目属性

1.flex - 子项占用剩余空间的比例

1.1.基本使用

flex属性用以分配子项占剩余空间的比例，其值就代表占用的份数

以下图为例，父容器定义justify-content: space-between - 首尾贴边，剩余均分

虽然是平分了剩余的空间，但其中有间隔。若希望让子元素占满间隔，则可以为他们添加flex属性：

1. 分别设置三个元素的flex值为1、2、3：

   • 父容器的justify-content: space-between让元素1和元素5贴边
   • 三个flex值的设置，让剩余空间按照1:2:3进行分配

   

2. 设置元素3和元素4的flex值为4、5：

   • 父容器的justify-content: space-between让元素1和元素5贴边
   • 元素2没有设置flex(flex: 0)，占用默认空间
   • 两个flex值的设置，让剩余的空间按照4:5进行分配

   

1.2.“圣杯布局”

基于此，用三个元素来定义圣杯布局：

• 父容器的justify-content: space-between让元素1和元素3贴边
• 元素2的flex设置为1，占用剩余的全部空间
• 如果希望实现自适应，父容器不要设置宽度

1.3.进阶布局

flex 布局时，如何固定一栏宽度？

其实flex一共可以定义三个参数，详见上方文章。

而最常见的用法是如下设置：

//固定宽度(横轴是主轴时)为200px
fled: 0 0 200px

2.align-self - 子项在侧轴的排列方式

align-self允许单个子项目与其他的子项目在侧轴方向有着不一样的排列方式，可覆盖父容器中定义的align-items属性

默认值auto表示继承父容器的align-items属性，没有父容器时等同于stretch

属性值	说明
auto(默认)	继承父容器的align-items属性
flex-start	从侧轴首部开始排列
flex-end	从侧轴尾部开始排列
center	沿着侧轴居中
stretch	无高度时拉伸，有高度时从侧轴首部开始排列

3.order - 子项在主轴的排列顺序

order数值小的优先进行排列，可以是负数，默认值是0

在父容器主轴采用默认设置的情况下，将子元素的各order值进行修改：

数值相等时，则按HTML中的排列顺序进行排序