flex布局笔记,适合后端的懒人布局方式

目录

    • flex布局方式
    • 1.使用: 给需要使用布局的容器添加上
    • 2.对齐
        • 1.对容器内所有子元素操作:
        • 2.对容器内某个子元素操作:

flex布局方式

1.使用: 给需要使用布局的容器添加上

	desplay: flex;  

2.对齐

 1. 自动换行
		flex-wrap: wrap 

1.对容器内所有子元素操作:

1.横向
	justify-content:  			
		flex-start(默认值):左对齐
		flex-end:右对齐
		center: 居中
		space-between:两端对齐,项目之间的间隔都相等。
		space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
2.纵向
	align-items:
			flex-start:交叉轴的起点对齐。
			flex-end:交叉轴的终点对齐。
			center:交叉轴的中点对齐。
			baseline: 项目的第一行文字的基线对齐。
			stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。	

2.对容器内某个子元素操作:

	1.纵向:(与align-items属性作用相同)
		align-self:
			flex-start 
			flex-end 
			center 
			baseline 
			stretch;
	2.横向 (1是单位是相对的比例)
		flex-grow:1; 
			 

你可能感兴趣的:(web基础,web,布局,flex布局笔记)