阅读 529

CSS系列 -- flex布局

flex布局被称为弹性布局,是CSS3中新增内容

创建flex盒子

display: flex;
或 dispaly: inline-flex;
复制代码

flex-direction属性 决定主轴的方向(即项目的排列方向)

flex-direction: row; /*主轴是横向的,自左至右*/ 【默认值】
flex-direction: column; /*主轴是横向的,自上而下*/
flex-direction: row-reverse; /*主轴是横向的,自右至左*/ 
flex-direction: column-reverse; /*主轴是横向的,自下而上*/
复制代码

flex-wrap属性 决定是否换行

flex-wrap: nowrap; /*不换行*/【默认值】
flex-wrap: wrap; /*换行,第一行在上方*/ 
flex-wrap: wrap-reverse; /*换行,第一行在下方*/
复制代码

justify-content 属性 定义项目在主轴上的对齐方式

justify-content: flex-start; /*左对齐*/【默认值】
justify-content: flex-end; /*右对齐*/ 
justify-content: center; /*居中*/
justify-content: space-between; /*两端对齐,项目之间的间隔都相等*/ 
justify-content: space-around; /*每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍*/
justify-content: space-evenly; /*每个项目两侧的间隔相等。项目之间的间隔跟项目与边框的间隔相等*/
复制代码

image.png image.png

如何记忆后三个?通过比较最左最右两个元素到容器两边的距离:space-evenly > space-around > space-between

  • space-evenly 到壁距离和两两之间的距离为 1 : 1
  • space-around 到壁距离和两两之间的距离为 1 : 2
  • space-between 到壁距离和两两之间的距离为 0 : 1

align-items 属性 定义项目在交叉轴上如何对齐

align-items: stretch; /*占满整个容器的高度*/【默认值】
align-items: flex-start; /*交叉轴的起点对齐*/
align-items: flex-end; /*交叉轴的终点对齐*/ 
align-items: center; /*交叉轴的中点对齐*/
align-items: baseline; /*项目的第一行文字的基线对齐*/ 
复制代码

image.png

align-content 属性 定义多根轴线的对齐方式

align-content: stretch; /*轴线占满整个交叉轴*/【默认值】
align-content: flex-start; /*交叉轴的起点对齐*/
align-content: flex-end; /*交叉轴的终点对齐*/ 
align-content: center; /*交叉轴的中点对齐*/
align-content: space-between; /*两端对齐,项目之间的间隔都相等*/ 
align-content: space-around; /*每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍*/
复制代码

image.png

文章分类
前端
文章标签