文章目录
属性 | 说明 | 版本 |
---|---|---|
flex | 复合属性。设置子元素如何分配空间。 | CSS3 |
flex-grow | 设置弹性盒子项的扩展比率。 | CSS3 |
flex-shrink | 设置弹性盒子项的收缩比率。 | CSS3 |
flex-basis | 设置弹性盒子项伸缩基准值。 | CSS3 |
flex-flow | 复合属性。设置弹性盒子项排列方式。 | CSS3 |
flex-direction | 设置弹性盒子子项的方向。 | CSS3 |
flex-wrap | 设置 flex 容器是单行或者多行。 | CSS3 |
align-content | 在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项(垂直)。 | CSS3 |
align-items | 定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。 | CSS3 |
align-self | 定义flex子项单独在侧轴(纵轴)方向上的对齐方式。 | CSS3 |
justify-content | 设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。 | CSS3 |
order | 设置或检索弹性盒模型对象的子元素出现的順序。 | CSS3 |
浏览器支持:
弹性盒子属性只适用于弹性盒子,在非弹性盒子中无效。声明弹性盒子:
div{
display: -webkit-flex; /*低版本 Safari */
display:flex;
}
弹性盒子属性中用于子项的属性:flex, flex-grow, flex-shrink, flex-basis,order
, 其他属性都用于外层包裹元素。当一个元素声明为弹性盒子时,他的子元素默认设置了 flex:0 1 auto
属性。
当元素被声明是弹性盒子时,他的子元素的尺寸和定位属性将会受到影响(不会影响孙辈元素)。
flex
flex 属性用于设置子元素如何分配空间。可以有1-3个值。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
语法:flex: auto|none|flex-grow flex-shrink flex-basis;
值 | 描述 |
---|---|
auto |
默认值,与 1 1 auto 相同。 |
none |
与 0 0 auto 相同。 |
flex-grow | 一个数字,规定项目将相对于其他灵活的项目进行扩展的量。 |
flex-shrink | 一个数字,规定项目将相对于其他灵活的项目进行收缩的量。 |
flex-basis | 项目的长度。合法值:“auto”/数值单位/百分比。 |
flex:1;
flex:1 1;
flex:1 1 none;
flex:1 1 20px;
flex-grow
flex-grow 属性用于设置弹性盒子子项的扩展比率。
.div1{
flex-grow:2;
flex-basis:0;
}
.div2{
flex-grow:2;
flex-basis:auto;
}
/*上面等效下面*/
.div1{