CSS 布局 （Flex 布局）

原则

• flex布局是首选方案，要支持IE8则用float布局
• 不到万不得已，不要写死 width 和 height
• 尽量用高级语法，如 calc、flex
• 如果要满足 IE，就全部写死

Float

儿子全加 float
老子加 .clearfix
.clearfix简单写法

.clearfix:after{
  content: '';
  display: block;
  clear: both;
  }

IE写法

.clearfix{
    zoom:1
}
.clearfix:after{
    content: ".";
    height: 0;
    visibility: hidden;
    display: block;
    clear: both;
    }

flex布局

阮一峰

Flex 容器

display: flex | inline-flex;

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

• flex-direction

  容器默认存在两根轴：水平的主轴→（main axis）和垂直的交叉轴↓（cross axis）。
  四个取值：

  • row （默认值）：→
  • row-reverse：←
  • column：↓
  • column-reverse：↑
• flex-wrap
  
  • nowrap（默认）：不换行。
  • wrap：换行，第一行在上方。
  • wrap-reverse：换行，第一行在下方。
• flex-flow
  
  • 简写上两个属性
  • flex-flow: || ;
• justify-content
  
  • 定义了项目在主轴上的对齐方式。
  • 具体对齐方式与轴的方向有关。
  • justify-content: flex-start | flex-end | center | space-between | space-around;
• align-items
  
  • 定义项目在交叉轴上（即另外一个轴）如何对齐。
  • align-items: flex-start | flex-end | center | baseline | stretch;

• align-content

  • 定义了多根轴线(即多行)的对齐方式。（把多行当成一个整体）
  • 确保多行的基础flex-wrap: wrap;
  • 如果项目只有一行，该属性不起作用。
  • align-content: flex-start | flex-end | center | space-between | space-around | stretch;

  Flex 项目

• flex-grow
  
  • 定义项目的放大比例，默认为0。（空间过多时）
  • flex-grow: ;
• flex-shrink
  
  • 定义了项目的缩小比例，默认为1，（空间不足时）
  • flex-shrink: ;
  • 如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
• flex-basis
  
  • 在分配多余空间之前，项目占据的主轴空间（main size）。
  • flex-basis: | auto; auto为项目的本来大小。
• flex
  
  • 是flex-grow, flex-shrink 和 flex-basis的简写
  • flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
• order
  
  • 定义项目的排列顺序。数值越小，排列越靠前，默认为0。
  • order: ;（integer是整数的意思）

• align-self

  • 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
  • align-self: auto | flex-start | flex-end | center | baseline | stretch;

  Flex 平均布局

  父元素加

display: flex;
justify-content: space-between;  

注意： 平均布局时，消除容器两边多余的padding或margin可以用负margin，但如果容器已经设置margin:0 auto;居中，需要再添加一个div去设置margin:0 -6px;最后记住给最外层容器添加overflow:hidden;防止滚动条出现。

延伸阅读：
新的 CSS 特性正在改变网页设计