Please enable JavaScript.
Coggle requires JavaScript to display documents.
flex 弹性布局 (flex container (基本概念 (main axis:水平的主轴, cross axis:垂直的交叉轴, main…
flex 弹性布局
flex container
定义
简称”容器”
它的所有子元素自动成为容器成员
采用Flex布局的元素
块级元素:display: flex;
行内元素:display: inline-flex;
属性
flex-wrap:换行
wrap:换行,第一行在上方
wrap-reverse:换行,第一行在下方。
nowrap(默认):不换行
flex-flow:复合属性
用法:flex-flow: <flex-direction> || <flex-wrap>;
默认值为row nowrap
flex-direction:主轴方向
row-reverse:主轴为水平方向,起点在右端
column:主轴为垂直方向,起点在上沿
row(默认值):主轴为水平方向,起点在左端
column-reverse:主轴为垂直方向,起点在下沿
对齐方式
align-items:
交叉轴上的对齐方式
flex-start:交叉轴的起点对齐
flex-end:交叉轴的终点对齐
center:交叉轴的中点对齐
baseline:项目的第一行文字的基线对齐
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度
align-content:多根轴线的对齐方式
flex-end:与交叉轴的终点对齐
center:与交叉轴的中点对齐
flex-start:与交叉轴的起点对齐
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布
stretch(默认值):轴线占满整个交叉轴
space-around:每根轴线两侧的间隔都相等
justify-content:
项目在主轴上的对齐方式
center:居中
flex-end:右对齐
flex-start(默认值):左对齐
space-between:两端对齐,项目之间的间隔都相等
space-around:每个项目两侧的间隔相等
基本概念
main axis:水平的主轴
cross axis:垂直的交叉轴
main start:主轴的开始位置
main end:主轴的结束位置
cross start:交叉轴的开始位置
cross end:交叉轴的结束位置
flex item
基本概念
单个项目占据的主轴空间叫做 main size
单个项目占据的交叉轴空间叫做 cross size
项目默认沿主轴排列
属性
orde:排列顺序
数值越小,排列越靠前
默认为0
flex-grow:放大比例
默认为0,即如果存在剩余空间,也不放大
如果所有项目的flex-grow属性都为1,则它们将等分剩余空间
flex-shrink:缩小比例
如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小
负值对该属性无效
默认为1,即如果空间不足,该项目将缩小
flex-basis:占据的主轴空间
默认值为auto,即项目的本来大小
可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间
flex:复合属性
默认值为0 1 auto
后两个属性可选
该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)
align-self:单个项目的对齐方式
stretch:如果项目未设置高度或设
为auto,将占满整个容器的高度
默认值为auto,表示继承父元素的align-items属性,
如果没有父元素,则等同于stretch
flex-end:交叉轴的终点对齐
center:交叉轴的中点对齐
baseline:项目的第一行文字的基线对齐
flex-start:交叉轴的起点对齐
定义
简称”项目”
Flex容器的所有子元素