2021-06-30

前端css关于flex布局

记录一些常用的flex布局属性（父盒子）

• flex-direction：规定盒子内的子元素排版为横排或竖排（默认是横排）

flex-direction:row; //规定子元素横排，从左到右
flex-direction:row-reverse; //规定子元素横排，从右到左
flex-direction:column; //规定子元素竖排，从上到下
flex-direction:column-reverse; //规定子元素竖排，从下到上

• flex-wrap: 规定盒子内的子元素是否在沾满一行时折行（默认不折行）

flex-wrap:no-wrap; //子元素沾满一行时不换行
flex-wrap:wrap; //子元素沾满一行时永远不换行
flex-wrap:wrap-reverse; //子元素将以相反的顺序换行排序

• flex-flow: 是flex-direction和flex-wrap的缩写，可以设置单独的属性值，且属性值无顺序，多个属性值时，中间用空格隔开

flex-flow:wrap;
flex-flow:row;
flex-flow:wrap row;
flex-flow:row wrap;

• justify-content：规定盒子内子盒子的布局方式（默认子盒子与父盒子的开头对齐）对齐方式取决去direction的属性值，如果是column则与父盒子顶部对齐，如果是row则与父盒子的左侧对齐

justify-content:flex-start; //子盒子与父盒子的开头对齐
justify-content:flex-end; //子盒子与父盒子的末尾对齐
justify-content:center; //子盒子在父盒子的中间显示,取决于flex-direction的值,如果是横排，则在横向中心，竖排则在竖排中心
justify-content:space-around; //子盒子均分父盒子的空间，且前后有空格
justify-content:space-between; //子盒子均分父盒子的空间，且前后贴着父盒子的边界

• align-items：规定盒子内子盒子的垂直对齐方式（默认子盒子与父盒子的顶部对齐）对齐方式取决去direction的属性值，如果是column则与父盒子的左侧对齐，为row则与父盒子的上方对齐``

align-items:flex-start; //子盒子与父盒子上方（direction为row）或左侧对齐（direction为column）
align-items:flex-end; //子盒子与父盒子下方（direction为row）或者右侧对齐（direction为column）
align-items:center; //子盒子垂直居中于父盒子
align-items:stretch; //如果未给子盒子高度，将沾满整个父盒子，对齐方式和flex-start对齐方式类似（默认值）