欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css 作为弹性伸缩盒display:flex

程序员文章站 2022-05-23 09:14:54
css 作为弹性伸缩盒 display:flex .fbox{ display: flex; -webkit-display: fle...

css 作为弹性伸缩盒 display:flex

css 作为弹性伸缩盒display:flex
       .fbox{
		    display: flex;
			-webkit-display: flex;
			-ms-display: flex;
			width: 100%;
			height: 200px;
		}
		.fbox .center{
			flex: 1;
			height: 200px;
			background: #f00;
			border-radius: 5px;
			margin:0 10px;
		}
		.fbox .left,
		.fbox .right{
			width: 200px;
			height: 200px;
			background: #f0f;
		}
		.fbox .left{
			background: #0f0;
		}

display:flex

display:inline-flex


webkit内核应使用前缀 -webkit-
ie10浏览器中容器定义成弹性伸缩盒 用前缀 -ms-


flex 作用于容器上的6个属性介绍


定义行和列
flex-direction:row | row-reverse | column | column-reverse;
定义是否换行
flex-wrap:nowrap | wrap | wrap-reverse;

flex-flow:复合属性,是flex-direction 和 flex-wrap 的简写属性,是用于指定flex子项的排列方式

flex-flow:row wrap;

定义横向对齐
justify-content:flex-start | flex-end | center | space-between | space-around;
纵向对齐
align-items:stretch | flex-start | flex-end | center | baseline;


flex 作用于子项上的6个属性介绍


order:0; /*排序*/
flex-grow:0; /*定义扩展排序*/
flex-sherk:1; /*定义收索排序*/
flex-basis:auto | length | percentage | content; /*指定空间*/


flex复合属性,是flex-grow 、 flex-shrink 和 flex-basis 的简写属性


none:0 0 auto
auto:1 1 auto
1:1 1 0%
0 auto 或 initial:0 1 auto 即初始值