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=&#