flex容器支持的属性
ｄｉｓｐｌａｙ<br>ｄｉｓｐｌａｙ 用来指定元素是否为ｆｌｅｘ 布局 , 语法格式为 :<br>其中 , ｆｌｅｘ ——— 块级ｆｌｅｘ 布局 , 该元素变为弹性盒子 ;<br>ｉｎｌｉｎｅ － ｆｌｅｘ ——— 行内ｆｌｅｘ 布局 , 行内容器符合行内元素的特征 , 同时在容器内又符合ｆｌｅｘ 布局规范。<br>设置了ｆｌｅｘ 布局之后 , 子元素的float、clear 和verticalalgin 属性将失效。<br><br>
ｆｌｅｘ － ｄｉｒｅｃｔｉｏｎ<br>ｆｌｅｘ － ｄｉｒｅｃｔｉｏｎ 用于设置主轴的方向 , 即项目排列的方向 , 语法格式为 :<br>.box{flex-direction:row|row-reverse|column|column-reverse}<br>其中 , row ——— 主轴为水平方向 , 起点在左端 , 当元素设置为flex 布局时 , 主轴默认为row ;<br>row-reverse ——— 主轴为水平方向 , 起点在右端 ;<br>column——— 主轴为垂直方向 , 起点在顶端 ;<br>column-reverse ——— 主轴为垂直方向 , 起点在底端。<br><br>
flex-wrap<br>flex-wrap 用来指定当项目在一根轴线的排列位置不够时, 项目是否换行<br>.box{flex-wrap:nowrap|wrap|wrap-reverse;}<br>其中, nowrap———不换行, 默认值;<br>wrap———换行, 第一行在上方;<br>wrap-reverse———换行, 第一行在下方。<br> 当设置换行时, 还需要设置align -item属性来配合自动换行, 但align-item 的值不能为“seretch”。<br>flex-wrap <br><br>
flex-flow<br>flex-flow是flex-direction 和flex-wrap 的简写形式, 默认值为rownowrap。
justify-content用于定义项目在主轴上的对齐方式。<br>.box{justify-content:flex-start|flex-end|center|space-between|space-around;}<br>justift-content———与主轴方向有关, 默认主轴水平对齐, 方向从左到右;<br>flex-strat———左对齐, 默认值;<br>flex-end———右对齐;<br>center———居中;<br>space-between———两端对齐, 项目之间的间隔都相等;<br>space-around———每个项目两侧的间隔相等。<br>
align-items<br>align-items用于指定项目在交叉轴上的对齐方式，其语法格式如下：<br>box{align-items:flex-start|flex-end|center|baseline|stretch;}<br>align-items———与交叉轴方向有关, 默认交叉由上到下;<br>flex-start———交叉轴起点对齐;<br>flex-end———交叉轴终点对齐;<br>center———交叉轴中线对齐;<br>baseline———项目根据它们第一行文字的基线对齐;<br>ｓｔｒｅｔｃｈ———如果项目未设置高度或设置为ａｕｔｏ, 项目将在交叉轴方向拉伸填充容器, 此为默认值。<br>
