CSS3中flex布局的flex-basic、flex-grow、flex-shrink
作者:互联网
基本概念
Flex是Flexible Box的缩写,顾名思义为“弹性布局”,用来为盒装模型提供最大的灵活性。
采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"项目"。
如何转换为Flex布局
- 任何一个容器都可以指定为Flex 布局。
.box{display:flex;}
- 行内元素也可以使用Flex布局。
.box{display:inline-flex;}
- webkit内核的浏览器,必需加上-webkit前缀
.box{
display:-webkit-flex;
display:flex;
}
注意:设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
Flex布局的属性
当谈到flex布局时,可能大部分人都和我一样,除了最常用的justify-content与align-items两个属性,其他的属性用到的并不多。
其实,Flex布局是一个完整的模块而不是一个单独的属性,它包括了完整的一套属性。其中有的属性是设置在容器(container,也可以叫做父元素,称为flex container)上,有的则是设置在容器的项目上(item,也可以叫做子元素,称为flex items)上。
那么我们将从 容器上的属性 和 项目上的属性 分别来讲起:
容器的属性
以下6个属性设置在容器上。
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direction
flex-direction属性决定主轴的方向(即项目的排列方向)。
.box {flex-direction:row | row-reverse | column | column-reverse;}
项目的属性
以下6个属性设置在项目上。
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
标签:CSS3,flex,容器,align,布局,Flex,shrink,属性 来源: https://www.cnblogs.com/ZerlinM/p/13613302.html