特点
- 子元素宽度之和小于父元素宽度,所有子元素最终的宽度就是原来定义的宽度。
- 子元素宽度之和大于父元素宽度,子元素会按比例来划分宽度。
- 在使用弹性盒子模型之前,必须为父元素定义“display:flex;”或“display:inline-flex;”。
弹性盒子模型属性 |
|
属性 |
说明 |
flex-grow |
定义子元素的放大比例 |
flex-shrink |
定义子元素的缩小比例 |
flex-basis |
定义子元素的宽度 |
flex |
flex-grow、flex-shrink、flex-basis 的复合属性 |
flex-direction |
定义子元素的排列方向 |
flex-wrap |
定义子元素是单行显示,还是多行显示 |
flex-flow |
flex-direction、flex-wrap的复合属性 |
order |
定义子元素的排列顺序 |
justify-content |
定义子元素在“横轴”上的对齐方式 |
align-items服务器托管网 |
定义子元素在上的对齐方式“纵轴” |
放大比例:flex-grow
flex-grow属性用来定义弹性盒子内部子元素的放大比例。当所有子元素宽度之和小于父元素的宽度时,子元素如何分配父元素的剩余空间。
语法
父元素{display:flex;}
子元素{flex-grow: 数值;}
flex-grow属性取值是一个数值,默认值为0。当取值为0时,表示不索取父元素的剩余空间;当取值大于0时,表示索取父元素的剩余空间(即子元素放大)。取值越大,索取得越多。
缩小比例:flex-shrink
flex-shrink属性用于定义弹性盒子内部子元素的缩小比例。当所有子元素宽度之和大于父元素的宽度时,子元素如何缩小自己的宽度。
语法
父元素{display:flex;}
子元素{flex-shrink: 数值;}
flex-shrink属性取值是一个数值,默认值为1。当取值为0时,表示子元素不缩小;当取值大于1时,表示子元素按一定的比例缩小。取值越大,缩小得越厉害。
元素宽度:flex-basis
- flex-basis属性用于定义弹性盒子内部的子元素在分配空间之前,该子元素所占的空间大小。浏览器会根据这个属性,计算父元素是否有多余空间。
- flex-basis相当于width,用来定义子元素的宽度。在弹性盒子中,flex-basis的语义会比width更好。
- 如果某一个子元素同时设置flex-basis和width,那么flex-basis的值会覆盖width的值。
语法
父元素{display:flex;}
子元素{flex-basis: 取值;}
flex-basis属性取值有两个:一个是“auto”,即该子元素的宽度是根据内容多少来定的;另一个是“长度值”,单位可以为px、em和百分比等。
复合属性:flex
flex属性可以同时设置flex-grow、flex-shrink、flex-basis这3个属性。
语法
父元素{display:flex;}
子元素{flex: grow shrink basis;}
参数grow是flex-grow的取值,参数shrink是flex-shrink的取值,参数basis是flex-basis的取值。flex属性的默认值为“0 1 auto”。
排列方向:flex-direction
- flex-direction属性用来来定义弹性盒子内部“子元素”的排列方向。即定义子元素是横着排,还是竖着排。
- flex-direction属性是在弹性盒子(即父元素)上定义的。
语法
父元素{
display:flex;
flex-direction: 取值;
}
flex-direction属性取值 |
|
属性值 |
说明 |
row |
横向排列(默认值) |
row-reverse |
横向反向排列 |
column |
纵向排列 |
column-reverse |
纵向反向排列 |
多行显示:flex-wrap
flex-wrap属性用来定义弹性盒子内部“子元素”是单行显示还是多行显示。
语法
父元素{
display:flex;
flex-wrap: 取值;
}
flex-wrap属性取值 |
|
属性值 |
说明 |
nowrap |
单行显示(默认值) |
wrap |
多行显示,也就是换行显示 |
wrap-reverse |
反向多行显示 |
复合属性:flex-flow
flex-flow属性用来同时设置flex-direction、flex-wrap这两个属性。
语法
父元素{
display:flex;
flex-flow: direction wrap;
}
参数direction是flex-direction的取值,参数wrap是flex-wrap的取值。flex-flow属性的默认值为“row nowrap”。
排列顺序:order
order属性用来定义弹性盒子内部“子元素”的排列顺序。
语法
父元素{display:flex;}
子元素{order:整数;}
order属性取值是一个正整数,即1、2、3等。
水平对齐:justify-content
justify-content属性来定义弹性盒子内部子元素在“横轴”上的对齐方式。
语法
父元素{
display:flex;
justify-content: 取值;
}
属性值 |
说明 |
flex-start |
所有子元素在左边(默认值) |
center |
所有子元素在中间 |
flex-end |
所有子元素在右边 |
space-between |
所有子元素平均分布 |
space-around |
所有子元素平均分布,但两边留有一定间距 |
垂直对齐:align-items
align-items属性用来定义弹性盒子内部子元素在“纵轴”上的对齐方式。
语法
父元素{
display:flex;
align-items: 取值;
}
属性值 |
说明 |
flex-start |
所有子元素在上边(默认值) |
center |
所有子元素在中部 |
flex-end |
所有子元素在下边 |
baseline |
所有子元素在父元素的基线上 |
stretch |
拉伸子元素以适应父元素高度 |
|
|
|
|
|
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
共享门店作为一种创新的商业模式,在未来新零售领域中可能会占据一定的角色,但具体是否会成为主角,还需要根据市场的发展和技术的进步来判断。 首先,共享门店模式通过资源共享、风险共担、客户共享和收益共享等方式,为实体门店带来了新的发展机遇。这种模式可以帮助实体门店降…