【弹性布局】_弹性布局的代码主要作用于容器和-CSDN博客

本文链接：https://blog.csdn.net/m0_62063061/article/details/125169400

弹性布局-前言

flex是Flexible Box的缩写，意为“弹性布局”用来为盒状模型提供最大的灵活性,旨在提供一个更有效地布局、对齐方式，并且能够使容器中的子元素大小未知或动态变化情况下仍然能够分配好子元素之间的空间。

Flex 布局的主要思想是使父容器能够调节子元素的宽度/高度（和排列顺序），从而能够最好地填充可用空间（主要是为了适应所有类型的显示设备和屏幕尺寸）。flex布容器能够放大子元素使之尽可能填充可用空间，也可以收缩子元素使之不溢出。

最重要的是，flexbox布局与方向无关，不同于常规布局（基于垂直的块（block）和基于水平的内联（inline））。虽然传统布局适用于页面，但它们对于大型或复杂的应用程序布局来说缺乏灵活性（特别是在改变方向，调整大小，拉伸，收缩等方面）。

设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

一、弹性布局的基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

二、容器属性

		弹性容器
			display: flex;
		主轴的排列方向
		flex-direction: row 
		row-reverse 
		column 
		column-reverse;
		
			flex-direction:row;
		水平对齐方式，一根轴线
		justify-content:flex-start
		flex-end 
		centez
		space-between
		space-around; 
		
		space-between:每两个项目之间的间距一样
		space-around:每个项目的左右margin一样
		    
			justify-content:space-around;
		垂直对齐方式 
		align-items: flex-start
		flex-end
		center
		baseline
		stretch;
		baseline:与第一行文本基线对齐
		stretch:如果项目未设置高度或设为auto，将占满整个容器的高度。
		
		允许换行
			flex-wrap: wrap;
		垂直对齐方式
		align-items,一根轴线; 
		align-content,多根轴线; 
		align-content:flex-start
		flex-end
		center
		space-between
		space-around
		stretch;
		stretch:如果项目未设置高度或设为auto，将占满整个容器的高度。
			align-content:space-around;

space-around 和 space-between 这两个值的区别不能很直观的理解。
space-between 是两端对齐，使每个矩形子元素(flex项)之间的间隔是相等的，但两端的矩形子元素(flex项)不会和容器之间产生间隔。

space-around 则会在每个矩形子元素(flex项)的两边产生一个相同大小的间隔，也就是说两端的矩形子元素(flex项)和容器之间的间隔大小正好是两个矩形子元素(flex项)之间间隔大小的一半（每个矩形子元素产生的间隔不会重叠，所以间隔变成两倍）。

（注意对于 align-items: stretch 来说，必须将每一个矩形子元素(flex项)的高度设置为 auto，否则 height 属性将会覆盖该 stretch）。

对于 align-items: baseline 来说，要注意如果去掉段落标签或者没内容，矩形子元素(flex项)就会按照每个矩形的底部对齐。

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

2.项目的属性

1、单个项目的对齐方式 ，可覆盖align-items属性 align-self: auto
flex-start
flex-end
center
baseline
stretch;
2、order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
3、flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
4、flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
5、flex:auto，自适应，根据容器大小自动1:1:1缩放