首页 > 代码库 > 弹性盒子

弹性盒子

弹性盒布局模型(Flexible Box Layout)是 CSS3 规范中提出的?一种新的布局?方式。

弹性盒子的特点:1.任何?一个容器?都可以指定为?ex布局。

                             2.?行行内元素也可以使?用?ex布局。

                             3.webkit内核的浏览器?,必须加上-webkit-前缀。

弹性盒子的意义:采?用?ex布局的元素,称为?ex容器?(?ex container),简称“容器?”。它的所有?子元素?自动成为容器?成员,称 为?ex项?目(?ex item),简称“项?目”。

容器?默认存在两根轴:?水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框 的交叉点)叫做 main start (主轴起始),结束位置叫做 main end (主轴结束);交叉轴的开始位 置叫做 cross start (交叉轴起始),结束位置叫做 cross end (交叉轴结束)。
项?目默认沿主轴排列列。

弹性盒子属性:1. ?ex-wrap属性 默认情况下,项?目都排在?一条线上(?又称“轴线”)上。 flex-wrap 属性定义,如果?一条轴线排不不下, 如何换?行行。

row(默认值):主轴为?水平?方向,起点在左端; row-reverse:主轴为?水平?方向,起点在右端; column:主轴为垂直?方向,起点在上沿; column-reverse:主轴为垂直?方向,起点在下沿。

                         2. flex-flowflex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式,默认值 为 row nowrap 。

nowrap(默认值):不不换?行行(强?行行挤压,平均分配宽度); wrap:换?行行,第?一?行行在上?方(从上往下?一次排列列); wrap-reverse:换?行行,第?一?行行在下?方(从下往上?一次排列列);

                        3.justify-content 属性justify-content 属性定义了了项?目在主轴上的对?齐?方式。

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

flex-start(默认值):左对?齐 flex-end:右对?齐 center: 居中 space-between:两端对?齐,项?目之间的间隔都相等。 space-around:每个项?目两侧的间隔相等。所以,项?目之间的间隔?比项?目与边框的间隔?大?一倍。

                       

弹性盒子