手记

CSS3新属性之---Flex 布局语法

Flex 布局语法

常见网页布局:
传统做法: 基于box model,借助css的display+position+float
属性。但对于特殊布局非常不友好。
2009年W3C提出flex布局,简洁方便完整地实现了响应式布局,且已得到所有浏览器支持。

flex布局
1.flex box语法---任何容器均可设为flex布局
.box{
display: -webkit-flex; /* css hacker*/
display: flex;
display: inline-flex;/*行内flex布局*/
}

概念

flex container:采用flex布局的元素即为flex容器,其子元素为容器成员(flex item)

注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

容器属性

- flex-direction : row | row-reverse | column | column-reverse;
/*主轴方向(左右上下)*/
- flex-wrap:nowrap | wrap | wrap-reverse;
/*主轴是否换行(不换反)*/
- flex-flow:<flex-direction> || <flex-wrap>;
/*flex-direction属性和flex-wrap属性的简写,默认row nowrap*/
- justify-content:flex-start | flex-end | center | space-between | space-around;
/*项目在主轴上的对齐方式(左右居中两端空绕对齐)*/
- align-items:flex-start | flex-end | center | baseline | stretch;
/*交叉轴上如何对齐(起点终点中点首行基线默认(填充))*/
- align-content:flex-start | flex-end | center | space-between | space-around | stretch;
/*与交叉轴起终中均隔空扰填充对齐*/
2.项目属性
  • order
    ```.item {
    order: <integer>;
    /项目的排列顺序,从左至右递增/
    }
  • flex-grow
     flex-grow: <number>; 
     /*放大比例 default 0,越大越大 */
  • flex-shrink
    flex-shrink: <number>; /*缩小比例 default 1 ,越小越小*/
  • flex-basis
 flex-basis: <length> | auto; 
 /* 分配多余空间之前,项目占据的主轴空间(main size)default auto */
  • flex
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    /* flex-grow, flex-shrink 和 flex-basis的简写 default 0 1 auto */
  • align-self
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
    /* 允许单个项目有与其他项目不一样的对齐方式default auto */

    参考链接

8人推荐
随时随地看视频
慕课网APP

热门评论

666,对新手学习flex很有帮助

6

查看全部评论