CSS3 display

display 属性

用于控制布局的最重要属性

• none 控制元素隐藏
• block 控制元素显示
• inline 行内元素
• inline-block 行内元素包含 内边距 和width height 等属性
• inherit 规定从父元素继承 dispaly

块级元素（block element）

块级元素总是从新行开始，并占据可用的全部宽度，常用块级元素

• <div>、 <p> 、<form> 、 <h1-6> 、 <header> 、 <ol>、<ul>、<dl>、 <footer> 、<center>、 <section>、<table>、等

行内元素（inline element）

不从新行开始，仅占用所需宽度，常用的行内元素

<span> <a> <img> 等

覆盖默认的 display 值

    li{
        display: inline;
    }

注意: 设置元素的display属性仅会更改元素的显示方式，而不会更改元素的种类。 常有display:block; 的行内元素不允许在其中包含其他块级元素 行内元素添加 display：blocak 使行内元素显示为快元素

隐藏元素 - display:none --- visibility:hidden

通过将 display 属性设置为 none 可以隐藏元素。该元素将被隐藏，并且页面将显示为好像该元素不在其中

visibility:hidden; 该元素仍将占用与之前相同的空间。元素将被隐藏，但仍会影响布局：。

属性 display:flow-root

元素，无论是内联元素，还是原本就是块级元素，在应用 display:flow-root 声明后，都会变成块级元素，同时这个元素会建立新的块级格式上下文。可以避免浮动带来的高度塌陷。margin属性合并现象也可以使用flow-root来避免。使用中有兼容性问题。

弹性布局 display: flex;

弹性布局能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。

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

• 在不同方向排列元素
• 重新排列元素的显示顺序
• 更改元素的对齐方式
• 动态地将元素装入容器

核心概念

• flex项 Flex子元素
• flex容器 采用Flex布局的元素，称为Flex容器他所有子元素为容器成员，
• direction 排列方向，也决定了flex项布局方向

flex-direction 弹性布局方向

1. row 主轴为水平方向，起点在左端
2. row-reverse 主轴为水平方向，起点在右端
3. column 主轴为垂直方向，起点在上册
4. column-reverse 主轴为垂直方向，起点在下

#main {
    width: 400px;
    height: 400px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; /* Safari */
    -webkit-flex-direction: row-reverse; /* Safari 6.1+ */
    display: flex;
    flex-direction: row-reverse;
}

flex-wrap属性

项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

1. nowrap 默认不换行
2. wrap：换行，第一行在上方
3. wrap-reverse：换行，第一行在下方。

#main {
    width: 200px;
    height: 150px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; /* Safari */
    -webkit-flex-wrap: nowrap; /* Safari 6.1+ */
    display: flex;
    flex-wrap: nowrap;
}

justify-content属性

属性定义了项目在主轴上的对齐方式。

1. flex-start（默认值）：左对齐 2. flex-end ： 右对齐 3. center : 居中 4. space-between: 两端对齐。元素之间间隔相等 5. space-around: 每个元素两侧的间隔相等，元素之间的间隔比与边框的间隔大一倍

#main1 {
    width: 600px;
    height: 70px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; /* Safari */
    -webkit-justify-content: flex-end; /* Safari 6.1+ */
    display: flex;
    justify-content: flex-end;
}

align-items 属性

属性定义项目在交叉轴上如何对齐。

1. flex-start : 交叉轴的起点对齐
2. flex-end: 交叉轴的终点对齐
3. center: 交叉轴的中点对齐
4. baseline: 项目的第一行文字的基线对齐。
5. stretch:() 如果项目未设置高度或设为auto，将占满整个容器的高度。

#main {
    width: 600px;
    height: 70px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; /* Safari */
    -webkit-align-items: flex-start; /* Safari 7.0+ */
    display: flex;
    align-items: flex-start;
}
#main div {
    width: 70px;
    height: 20px;
   -webkit-flex: 1; /* Safari 6.1+ */
   flex: 1;
}

align-content属性

属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch（默认值）：轴线占满整个交叉轴。

#mian{ display: flex; flex-flow: row wrap; align-content:space-around; }

子元素属性

• order
• flex-grow 用于设置或检索弹性盒子的扩展比率 如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作用。
• flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
• flex-basis 属性用于设置或检索弹性盒伸缩基准值。
• flex
• align-self 属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。

#main div{
    flex:1;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 10px;
    align-self:center;
}

参考： www.cnblogs.com/hellocd/p/1…

www.ruanyifeng.com/blog/2015/0…