flex 布局
flex 浏览器兼容性 1.任何容器都可以设置 flex .box{display:flex} .line{dispaly: inline-flex;dispaly:-webkit-flex} 注意,设为Flex布局以后,子元素的 2.设置flex的容器 (简称:容器),里面的内容称为 项目 3.容器有6个属性分别是:flex-direction | flex-wrap | flex-flow | justify-content | align-items | align-content (1)flex-direction:项目的主轴方向?row (默认值) {水平方向,由左向右}| row-reverse{水平反方向} |column {垂直方向,由上向下} |column-reverse{垂直反方向}
(3)flex-flow: flex-direction和 flex-wrap的简写 (4)?justify-content:水平方向 项目的排列 flex-start {默认值,左对齐} |flex-end {右对齐} | center {居中} | space-between {两端对齐, 间隔相等} | space-around {项目两侧的间隔相等} (5)align-items:项目在垂直方向的对齐方式。 flex-start {交叉轴的起点开始} | flex-end {交叉轴的末尾开始} |baseline {项目第一行的文字的基线对齐} | stretch (默认)未设置的高度或者auto 将占满整个高度 (6) align-content:定义多个轴的的对齐方式,如果项目只有一根轴线,该属性不起作用 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |