码迷,mamicode.com
首页 > 其他好文 > 详细

弹性盒子

时间:2017-07-09 16:24:28      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:之间   容器   wrap   垂直   模型   定义   between   dir   rect   

弹性盒布局模型(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:每个项?目两侧的间隔相等。所以,项?目之间的间隔?比项?目与边框的间隔?大?一倍。

                       

弹性盒子

标签:之间   容器   wrap   垂直   模型   定义   between   dir   rect   

原文地址:http://www.cnblogs.com/LLXC/p/7141428.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!