flex 布局 使用方式
容器
也称弹性盒子,可以根据屏幕大小自动适应,只有一个;
子项目
容器内的直接子元素,可以有多个
主轴
Flex容器的主要方向,由
flex-direction
属性定义。可以是水平方向(row
或row-reverse
)或垂直方向(column
或column-reverse
)。
交叉轴
与主轴垂直的轴线
响应式布局:
Flexbox可以很好地用于创建响应式布局,因为它可以自动调整项目的大小和位置。
容器上的属性
display:
定义盒子为一个flex 容器
flex | inline-flex
flex-direction
: 定义主轴的方向。
row | row-reverse | column | column-reverse
justify-content
: 定义Flex项目在主轴上的对齐方式。
flex-start | flex-end | center | space-between | space-around
默认主轴情况下,左右的对齐方式
align-items
: 定义Flex项目在交叉轴上的对齐方式。
flex-start | flex-end | center | baseline | stretch
默认主轴情况下,上线的对齐方式
align-self
: 允许Flex项目自己在交叉轴上对齐方式。
auto | flex-start | flex-end | center | baseline | stretch
align-items 定义容器内所有的item,align-self 可以定义单独的一个
flex-wrap
: 控制Flex容器是否在一条轴线上排列,还是换到下一行或列。
nowrap | wrap | wrap-reverse
align-content
: 定义多轴线的对齐方式。
flex-start | flex-end | center | space-between | space-around | stretch
align-content 是描述多行的情况下,每一行的对齐方式;justify-content 每一个item的对齐方式
子项目上的属性
order
: 定义项目的排列顺序。
主要是修改前后顺序 , 原来是 1 - 2 - 3 排列顺序 , 可以将其改为 2 - 1 - 3 排列顺序 ;
div span:nth-child(2) {/* 将其 顺序设置为 -1 , 其它所有的元素的 order 属性都是 默认值 0 该属性会排在最前面 */order: -1;}
flex-grow
: 定义项目的放大比例。
默认是0, 可设置为一个非负数
用于定义在有剩余空间时,flex容器中的flex项应该如何分配这些额外的空间
flex-shrink
: 定义项目的缩小比例。
默认是1, 可设置为一个非负数
用于定义在空间不足时,flex容器中的flex项应该如何缩小
flex-basis
: 定义项目在主轴上的初始大小。
定义项目在主轴上的初始大小,像
width
和heigth
类型,可以设置px 值,也可以安装容器的百分比
Flex布局的简写属性:
默认值: 0 1 auto
flex
: 简写属性,包含flex-grow
,flex-shrink
, 和flex-basis
。
flex flex-basis width的优先级
#container >span {background-color: green;flex: 0 1 300px;flex-basis: 250px;width: 200px; }
flex
优先级最高,其次flex-basis
,最后是width
如果容器大小不够,会自动分配,自适应大小
flex 、 flex-basis 、width
将不生效
Flex容器的横向和纵向居中:
-
横向居中: 使用
justify-content: center;
-
纵向居中: 使用
align-items: center;