css（1）布局篇

1.flex布局

<div class="content">     <div class="left">left</div>     <div class="mid">mid</div>     <div class="right">right</div> </div>     样式： .content {       /**       flex布局作用于父节点的属性有       flex-direction       flex-wrap       flex-flow       justify-content       align-items       align-content       */       display: flex;       /**父级节点使用flex子节点则会变成行内元素*/       flex-direction: row;       /**决定主轴的方向       row 主轴起点在左边       row-reverse 主轴起点在右边       column 主轴起点在顶部       row-reverse 主轴起点在底部       */       flex-wrap: nowrap;       /**       一行显示不下时换行规则       nowrap 不换行       wrap 换行       wrap-reverse 反方向换行       */       justify-content: center;       /**       默认为水平方向的对齐方式       flex-start（默认值）：左对齐       flex-end：右对齐       center： 居中       space-between：两端对齐，项目之间的间隔都相等。       space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。       */       flex-grow: row nowrap;       /**       flex-direction和flex-wrap的缩写形式       */       align-items: center;       /**默认为垂直方向的对齐方式       center 居中        flex-start 默认情况下起点是顶部        flex-end 默认情况起点在底部        stretch 如果子元素未设置高度或者高度为       auto，则子元素撑满父元素高度       baseline 基于子元素第一行文案对齐       */       align-content: center;       /**       多行主轴对齐方式       flex-start：底部对齐       flex-end：顶部对齐       center： 居中       space-between：两端对齐，项目之间的间隔都相等。       space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。       */       height: 100%;     }     /**     子元素属性     order     flex-grow     flex-shrink     flex-basis     flex     align-self     */     .left {       width: 200px;       background-color: aqua;       order: 0;       flex-grow: 0;       flex-shrink: 0;       /**       设定排序顺序       默认0: 数值越小越靠前       */     }
    .mid {       width: 100%;       background-color: bisque;       order: 2;       flex: 0 0 auto;       /**              flex-grow, flex-shrink, flex-basis 的缩写       简写 auto (1 1 auto) none (0 0 auto)       */       align-self: auto;       /**       设置单个元素的对齐方式       center 居中        flex-start 默认情况下起点是顶部        flex-end 默认情况起点在底部        stretch 如果子元素未设置高度或者高度为       auto，则子元素撑满父元素高度       baseline 基于子元素第一行文案对齐       */     }
    .right {       width: 100px;       background-color: aqua;       order: 1;       flex-grow: 0;       /**         设置放大规则为0则不放大         放大规则         默认为0 不放大         设置对应的数值         则在存在剩余空间时放大多少倍       */       flex-shrink: 0;       /**       设置缩放规则为0则为不缩放       */       flex-basis: 200px;       /**       设置子元素宽度       优先级大于width       **/     }   参考链接： http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html