html常用页面布局弹性布局display:flex,以及常用属性

个人理解

display:flex开启弹性布局,这个属性对需要开启弹性布局的父元素设置,设置之后父元素中的子元素浮动会被取消。

开启弹性布局后父元素被称作容器,子元素被称作项目。

设置弹性布局之后,默认主轴为x轴,交叉轴为y轴,可以通过 flex-direction属性进行修改主轴方向,交叉轴也会随之变换

属性1: justify-content设置在主轴的对齐方向,对容器使用,值有

flex-start(默认值从容器里面左往右排列,项目顺序不变) / 

flex-end (从容器里面右往左排列,项目顺序不变)/

 space-around (项目于项目之间产生相同间隙,项目与容器之间产生间隙,前者的大小是后者的两倍)

space-evenly(项目于项目之间产生相同间隙,项目与容器之间产生间隙,前者的大小和后者一样) /

 space-between(项目于项目之间产生相同间隙,项目与容器之间不产生间隙

等其它不常用值

属性2:align-items设置在交叉轴的对齐方向,对容器使用,值有

 align-items属性值和justify-content基本一致,建议自己探索

属性3:flex-shrink,对项目使用,设置项目是否缩放 ,默认情况下当项目的宽或高相加超越容器的宽高后,项目的大小会进行缩小(直至与项目的内容大小一致)

属性4:flex-wrap,对容器使用,设置容器里面是否会自动换行(warp),默认情况不会(nowarp),

设置warp后,项目的宽或高相加超越容器的宽高,项目不会缩小,只会进行换行

你可能感兴趣的:(css,html,css3,前端)