前端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对齐方式类似(默认值)