flex布局

最新推荐文章于 2023-10-19 22:58:29 发布

星_奕

最新推荐文章于 2023-10-19 22:58:29 发布

阅读量165

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/xuan_kong/article/details/130466642

版权

flex是当前较为主流的布局方式 --> 它布局起来更加方便.取代float的作用 --> 浮动布局有缺陷,会脱离文档流.可能会导致布局崩塌.

用flex布局的元素称为flex容器. 它里面的子元素称为容器项目/flex项目

flex布局原理: 就是通过两种轴.把网页分割成一行行/一列列
	flex主轴是从左往右.  副轴从上往下

flex的使用:
	display:flex;	

flex样式说明:		
	设置主轴的方向:  flex-direction
		row; # 行.默认属性,从左到右
		column; # 列.从上往下
		row-reverse; # 行反转,从右往左
		column-reverse; # 列反转,从下往上

	设置主轴的对齐方向： justify-content	
		flex-start； # 默认值。按照起点对齐。左、上
		flex-end；   # 终点对齐。右、下  
		space-between;    # 两端对齐
		space-around;     # 均分布局
		
	设置副轴的对齐方式:  align-items
		center;       # 居中
		flex-start;   # 靠起点
		flex-end;     # 靠终点

	设置换行(如果主轴装不下内容):  flex-wrap
		no-wrap;   # 缩放不换行
		wrap;      # 换行	

flex项目属性:
	order: 项目的顺序.数值越小.排列越靠前.默认为0