-弹性盒模型flex(d)

---

flex语法

一、Flex布局是什么

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

• Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
• 任何一个容器都可以指定为 Flex 布局。如：

.box{
  display: flex;
}

• 行内元素也可以使用 Flex 布局。如：

.box{
  display: inline-flex;
}

• 兼容性：ie9及以下版本不支持flexbox。
• 自动加前缀：由于每个厂商都有自己的前缀，很麻烦，所以需要用一个工具autoprefixer

1、一些应用

• (1)由于flx的flex-flow默认值是row和nowrap，所以直接在父元素上面设置display: flex;就可以让子元素全都横向排列,不过子元素间是没有间距的.

#warning {
  display: flex;
}
<div id="warning">
    <div class="demo1">1</div>
    <div class="demo2">2</div>
</div>

• (2)设置单个元素和高度一样的多个元素水平分散垂直居中：如果直接设置display:flex;justify-content:space-between;align-items:center;当元素有几个而且元素的高度不一样的时候，这个方法只能实现所有子元素的中点在同一水平线上，不能实现所有的子元素的上边框在同一水平线上。

.box {
    display:flex;
    justify-content:space-between;
    align-items:center;
}

• (3)实现多个元素上边框在一个水平线上且水平分散：要实现这个只需要再包一层flex，即有3层元素，第一层元素是最外面的box，实现里面的直接子元素(只有一个)垂直居中；第二层元素是中间的box，实现里面的元素水平分散且上端对齐。

#box {
  display: flex;
  align-items: center;
}
.inner-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
<div id="box">
    <div class="inner-box">
      <div class="demo1">1</div>
      <div class=&#