一、弹性盒介绍
flex(弹性盒、伸缩盒)
- 是css中的一种布局手段、它主要来代替浮动来完成页面的布局
- flex可以使得元素具有弹性、让元素可以随着页面的大小的改变而改变
- 我们通过display来设置弹性容器
display:flex 设置为块级弹性容器
display:inline-flex 设置为行内的弹性容器
- 弹性元素
- 弹性容器的直接子元素才是弹性元素
- 一个元素可以同时是弹性容器和弹性元素
1.1 flex-direction 排列方式
flex-direction 指定容器中弹性元素的排列方式
可选值:
row 默认值 水平排列
row-reverse 反向水平排列
column 纵向排列
column-reverse 反向纵向排列
主轴:
弹性元素的排列方向成为主轴
侧轴:
与主轴方向垂直的称为侧轴
1.2 弹性元素的属性
flex-grow 指定弹性元素的伸展系数
- 当父元素有多余空间时,子元素如何伸展。
- 父元素的剩余空间,会按照比例进行分配。
flex-shrink 指定弹性元素的收缩系数
- 当元素中空间不足以容纳所有的子元素时,对子元素进行收缩
- 会按照比例进行分配。
flex 可以设置弹性元素的三个样式
- flex 增长 缩减 基础
- initial "flex: 0 1 auto"
- auto "flex: 1 1 auto"
- none "flex: 0 0 none"
1.3 分配空白空间
justify-content(主轴)\ align-content(辅轴)
- 如何分配主轴上的空白空间
-可选值
flex-start 元素居左
flex-end 元素居右
flex-center 元素居中
space-around 空白分布到元素两侧
space-between 空白均分到元素间
space-evenly 空白分布到元素一侧
二、完整代码
<template>
<!--
flex(弹性盒、伸缩盒)
- 是css中的一种布局手段、它主要来代替浮动来完成页面的布局
- flex可以使得元素具有弹性、让元素可以随着页面的大小的改变而改变
- 我们通过display来设置弹性容器
display:flex 设置为块级弹性容器
display:inline-flex 设置为行内的弹性容器
- 弹性元素
- 弹性容器的直接子元素才是弹性元素
- 一个元素可以同时是弹性容器和弹性元素
-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name:'TestVue',
setup(props,context){
}
})
</script>
<style scoped>
*{
list-style: none;
}
ul{
width: 800px;
border: 10px red solid;
display: flex;
/*
flex-direction 指定容器中弹性元素的排列方式
可选值:
row 默认值 水平排列
row-reverse 反向水平排列
column 纵向排列
column-reverse 反向纵向排列
主轴:
弹性元素的排列方向成为主轴
侧轴:
与主轴方向垂直的称为侧轴
justify-content
- 如何分配主轴上的空白空间
-可选值
flex-start 元素居左
flex-end 元素居右
flex-center 元素居中
space-around 空白分布到元素两侧
space-between 空白均分到元素间
space-evenly 空白分布到元素一侧
*/
flex-direction: row;
justify-content: space-evenly;
}
li{
width: 100px;
height: 80px;
background-color: antiquewhite;
font-size: 50px;
text-align: center;
line-height: 80px;
/*
弹性元素的属性:
flex-grow 指定弹性元素的伸展系数
- 当父元素有多余空间时,子元素如何伸展。
- 父元素的剩余空间,会按照比例进行分配。
flex-shrink 指定弹性元素的收缩系数
- 当元素中空间不足以容纳所有的子元素时,对子元素进行收缩
- 会按照比例进行分配。
flex 可以设置弹性元素的三个样式
flex 增长 缩减 基础
initial "flex: 0 1 auto"
auto "flex: 1 1 auto"
none "flex: 0 0 none"
*/
/* flex-grow: 1; */
/* 调整元素顺序 */
order: 3;
flex: auto;
}
li:nth-child(2){
background-color: aqua;
/* flex-grow: 2; */
order: 2;
}
li:nth-child(3){
background-color: yellow;
/* flex-grow: 3; */
order: 1;
}
</style>