第二章Flex弹性盒布局

第二章Flex弹性盒布局Flex弹性盒布局为什么出现Flex弹性盒布局？垂直居中并不容易实现思考‹#›/38Flex的发展史2009年W3C提出概念，但是官方没有flex这个词2011年浏览器厂商决定使用flexbox，来形容它的布局特点2015年W3C正式将其修改为flexbox布局2016年5月官方正式公布最新的稳定的flex布局标准，各大浏览器的支持越来越稳定‹#›/38定义Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性作用它能够更加高效方便的控制元素的对齐、排列可以自动计算布局内元素的尺寸，无论这个元素的尺寸是固定的还是动态的控制元素在页面的布局方向按照不同于DOM所指定排序方式对屏幕上的元素重新排序‹#›/38Flex基本概念采用Flex布局的元素，称为Flex容器（flexcontainer），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flexitem），简称”项目”水平主轴（mainaxis）垂直交叉轴（crossaxis）项目默认沿主轴排列‹#›/38Flex布局语法块级元素语法display:flex;‹#›/38容器的属性容器属性flex-direction决定主轴的方向（即项目的排列方向）flex-wrap定义如果在一条轴线排不下，如何换行justify-content定义项目在主轴上的对齐方式align-items定义项目在交叉轴上如何对齐‹#›/38flex-direction决定主轴的方向（即项目的排列方向）属性值含义row（默认）、row-reverse：主轴为水平方向，起点在左端、右端column、column-reverse：主轴为垂直方向，起点在上沿、下沿演示示例2：容器属性语法flex-direction:row|row-reverse|column|column-reverse;‹#›/38flex-wrap默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义了如果一条轴线排不下，如何换行属性值含义nowrap（默认）：不换行wrap：换行，第一行在上方wrap-reverse：换行，第一行在下方演示示例2：容器属性语法flex-wrap:nowrap|wrap|wrap-reverse;‹#›/38justify-content2-1定义了项目在主轴上的对齐方式属性值含义flex-start（默认值）：左对齐flex-end：右对齐center：居中语法justify-content:flex-start|flex-end|center|space-between|space-around;‹#›/38justify-content2-2space-between：两端对齐，项目之间的间隔都相等space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍演示示例2：容器属性‹#›/38align-items定义项目在交叉轴上对齐方式属性值：具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下flex-start：交叉轴的起点对齐flex-end：交叉轴的终点对齐center：交叉轴的中点对齐语法align-items:flex-start|flex-end|center‹#›/38扫一扫关注课工场扫一扫下载APP‹#›/38