flex 布局

flex 浏览器兼容性

1.任何容器都可以设置 flex

.box{display:flex}
.line{dispaly: inline-flex;dispaly:-webkit-flex}

注意,设为Flex布局以后,子元素的floatclearvertical-align属性将失效。

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{垂直反方向}


(2) flex-wrap:项目换行no-wrap(默认值){不换行} |wrap{换行,超出向下排} | wrap-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:定义多个轴的的对齐方式,如果项目只有一根轴线,该属性不起作用

相关文章

一:display:flex布局display:flex是一种布局方式。它即可以...
1. flex设置元素垂直居中对齐在之前的一篇文章中记载过如何...
移动端开发知识点pc端软件和移动端apppc端软件是什么,有哪些...
最近挺忙的,准备考试,还有其他的事,没时间研究东西,快周...
display:flex;把容器设置为弹性盒模型(设置为弹性盒模型之后...
我在网页上运行了一个Flex应用程序,我想使用Command←组合键...