Flex布局

Flex布局

在这里插入图片描述

应用在flex-container的css属性

(1)flex-flow:是flex-direction || flex-wrap的简写

flex-flow:row wrap;

(2)flex-direction:主轴方向

flex-item 默认是沿着main axis(主轴)从main start 开始往 main end方向排布

flex-direction:row;//从左到右
flex-direction:row-reverse;//从右到左
flex-direction:column;//从上到下
flex-direction:column-reverse;//从下到上

在这里插入图片描述

(3)flex-wrap:决定flex-item是否全部在同一行显示,默认是在一行显示

flex-wrap:nowrap;//不换行,默认
flex-wrap:warp;//换行

(4)justify-content:决定了flex-item在主轴的对齐方式

justify-content:flex-start;//在main start 对齐
justify-content:flex-end;//在main end对齐
justify-content:center;//居中对齐
justify-content:space-between;//flex-itme之间的距离相等,与main start和main end 两端对齐
justify-content:space-evenly;//flex-item之间的距离相等,flex-item与main start 和main end之间的距离等于flex-item之间的距离
jsutify-content:space-around;//flex-item之间的距离相等,flex-item与main start和main end之间的距离是flex-item之间距离的一半

flex-start
在这里插入图片描述

flex-end在这里插入图片描述
center
在这里插入图片描述
space-between
在这里插入图片描述
space-evenly在这里插入图片描述
space-around
在这里插入图片描述

(5)align-items:决定了flex-item在交叉轴上的对齐方式

//这两种情况是在flex-item在交叉轴上面没有设置高度或者大小的时候出现的
align-items:normal;//在弹性布局中效果和stretch一样
align-items:stretch;//当flex-item在交叉轴上面的大小为auto的时候,会拉伸至填充flex-container

normal和stretch在交叉轴上面没有设置大小
在这里插入图片描述

//当flex-item在交叉轴上面的高度或大小不一样的时候
align-items:flex-start;//在交叉轴的cross start对齐
align-items;flex-end;//在交叉轴的 cross end对齐
align-items:center;//在交叉轴的中心点对齐
align-items:baseline;//基线对齐

flex-start在这里插入图片描述
flex-end
在这里插入图片描述
center
在这里插入图片描述
baseline
在这里插入图片描述

(6)align-content:决定了多行flex items在cross axios上的对齐方式,用法和justify-content类似

align-content:flex-start;
align-content:flex-end;
align-content:center;
align-content:space-around;
align-content:space-evenly;
align-content:space-between;

flex-start在这里插入图片描述
flex-end在这里插入图片描述
center在这里插入图片描述
space-betweens
space-evenly
在这里插入图片描述
space-around
在这里插入图片描述

应用在flex-item的css属性

(1)flex:是flex-grow||flex-shrink||flex-basis的简写,flex属性可以指定1个,2个或三个值

(1)单个语法值:值必须为一下其中之一:
Number:是flex-grow的值
width:flex-basis的值
关键字none,aoto,initial
(2)双值语法:
第一个无单位数值:flex-grow的值
第二个:
一个无单位数值:flex-shrink的值
一个有效的宽度值:flex-basis的值
(3)三值语法
无单位数:flex-grow的值
无单位数:flex-shrink的值
有效宽度值:flex-basis的值

(2)flex-grow:决定了flex items如何扩展

(1)可以设置任意的整数,值越小就越排在前面,默认值是0
     当flex container在main axis方向上剩余size时,flex-grow属性才会有效
(2)如果所有的flex items的flex-grow总和sum超过1,每个flex item扩展为:
     flex container的剩余size*flex-grow/sum(main axis剩余的size*[每一个item的flex-grow的值/全部item的flex-grow的总和])
(3)如果所有的flex items的flex-grow总和不超过1,每一个flex item扩展size为
	 flex container的剩余size*flex-grow
 (4)flex items扩展后的最终size不能超过max-width/max-height

(3)flex-basis:用来设置flex items在main axis方向上的base size

(1)auto默认值,具体的宽度数值(100px)
(2)决定flex items最终base size的因素,从优先级高到底
		max-width\max-height\min-width\min-height
		flex-basis
		wdth\height
		内容本身的size

(4)flex-shrink:决定了flex items如何收缩

(1)可以设置任意的非负数字,默认值是1;
(2)当flex items在main axis方向上超过了flex container的size ,flex-shrink属性才会有效
(3)如果所有的flex items的flex-shrink的总和超过1每个flex item收缩的size为
	flex item超出flex container的size*收缩比例/所有flex items的收缩比例之和
(4)如果所有的flex items的flex-shrink总和sum不超过一,每个flex item收缩的比例为
	flex items超出flex container的size*sum*收缩比例/所有flex items的收缩比例之和
	收缩比例=flex-shrink * flex item的base size
(5)base size就是flex item放入flex container之前的size
(6)flex items收缩后的最终size不能小于min-width/min-height

(5)order:决定了flex items的排布顺序

可以设置任意的整数,值越小就越排在前面,默认值是0
.item1{
	order:10
}
.item2{
	order:9
}

(6)align-self:可以通过align-self:覆盖flex container设置的align-items

©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页