Web前端开发必知必会 课件-中文版 lesson 16 Flexbox模型

地址：杭州市滨江区滨文路528号邮政编码：3100532024/4/12Flexbox伸缩盒LESSON16CONTENTS01什么是Flexbox伸缩盒02Flexbox重要属性03伸缩容器与伸缩项目Flexbox伸缩盒是CSS3中一个新的布局模式，为了现代网络中更为复杂的网页需求而设计。与传统的布局完全不同，不需要:floatpositionmargin,padding01Flexbox重要特性Verticalcenter地垂直居中内容/cssref/css3-pr-align-items.htmlAligningautomatically自动插入空白使盒内元素对齐/cssref/css3-pr-justify-content.html

Changingordereasily改变元素视觉次序Father（对伸缩容器使用）flex-direction:row-reverse;OrChildren（对伸缩项目使用）order:1/2/3/-1;02Flexbox伸缩盒结构Mainaxis（水平的主轴）主轴的开始位置（与边框的交叉点）mainstart结束位置mainendCrossaxis（垂直的交叉轴）项目沿主轴（默认水平）排列主轴空间mainsize交叉轴空间crosssize但：flex-direction:column；

//改主轴（垂直）排列伸缩容器与伸缩项目Container（伸缩容器）display:flex;（让子项均匀分布）justify-content:space-around;（垂直居中）align-items:center;Items（伸缩项目）Blockorinline(子项可以是块级元素，也可以是行内元素)提示：一般子项个数超过2个才有明显效果03容器与子项示例

.flex-container{display:-webkit-flex;display:flex;align-items:center;justify-content:space-around;}.flex-item{

background-color:#00F;

width:100px;

height:100px;

margin:5px;}<divclass="flex-container"><divclass="flex-item">flexitem1</div><divclass="flex-item">flexitem2</div><divclass="flex-item">flexitem3</div></div>伸缩容器

伸缩项目

Flexbox三段布局小屏：（全部子元素）.flex-container>*{flex:1100%;}

中屏：（侧边栏等分）.myaside{flex:10px;}大屏：（article也排进，且是aside的5倍）.mainbox{flex:50px;}小结display:flex;Forverticalalign方便地垂直居中内容align-items:center;/*沿交叉轴对齐项目

*/space-betweenorspace-around自动插入空白使盒内元素对齐justify-content:space-around;/*

均布空隙

*/Forelementsorder改变元素视觉次序

flex-direction:row-reverse;/*使用逆序属性*/或者（对伸缩项目