flex布局-526互联

伸缩容器,伸缩项目

伸缩容器: 开启了display:flex; 的元素就是伸缩容器
伸缩项目: 伸缩容器的所有子元素自动成为伸缩项目

备注: ①仅伸缩容器的"子元素"是伸缩项目. 孙子重孙子等后代元素,不是伸缩项目.

②一旦成为了伸缩项目,全都会被块状化,无论原来是那种元素(块,行内,行内块)

③IE8以下不支持flex布局
主轴侧轴

主轴: 伸缩项目沿着主轴排列. 默认水平向右.
侧轴: 与主轴垂直的就是侧轴. 默认垂直向下.

主轴方向 flex-direction

// 备注: 改变了主轴方向,侧轴方向随之自动改变
flex-direction: row 主轴水平,从左到右. (默认)
flex-direction: row-reverse 主轴水平,从右到左.
flex-direction: column 主轴垂直,从上到下.
flex-direction: column-reverse 主轴垂直,从下到上

**主轴换行方式 **

flex-wrap: nowrap 不换行 (默认)
flex-wrap: wrap  伸缩容器长度不够,自动换行
flex-wrap: wrap-reverse 反向换行,不齐的行在上面

flex-flow复合属性 ( 不建议用 )

flex-flow: 复合属性,复合了主轴的 方向,主轴换行方式.没有先后顺序
flex-flow: column wrap;    // 主轴垂直从上到下,自动换行

主轴对齐方式 justify-content

justify-content: flex-start; 主轴起点对齐 (默认)
justify-content: flex-end; 主轴终点对齐
justify-content: center; 居中对齐
justify-content: space-between;  |o o o| 均分,且两端贴边对齐
justify-content: space-around;   | x  x  x | 两端距离是中间距离的一半
justify-content: space-evenly;   | v v v | 均匀分布,两端距离与中间各元素间距一样

侧轴对齐[一行] align-items

align-items: flex-start; 侧轴起点对齐
align-items: flex-end; 侧轴终点对齐
align-items: center; 居中对齐
align-items: baseline; 伸缩项目的第一行文字的基线对齐
align-items: stretch; 如果伸缩项目未设置高度,将占满整个伸缩容器的高度 (默认)

侧轴对齐[多行] align-content

align-content: flex-start; 与侧轴起点对齐
align-content: flex-end; 与侧轴终点对齐
align-content: center; 与侧轴的中点对齐
align-content: space-between; 与侧轴两端对齐,中间均匀分布
align-content: space-around; 
align-content: space-evenly;
align-content: stretch; 占满整个侧轴 (默认)

flex-basis 伸缩项目在主轴上的基准长度

如果设置了flex-basis的具体px值, 会让主轴横向宽度失效,主轴纵向,高度失效.
作用: 浏览器根据此值,计算主轴上是否有多余空间. 
// 不写这个属性, 等价于写的 auto  ,
// 表示:  主轴若横向,则 flex-basis等于伸缩项width值
// 主轴若纵向, 则flex-basis等于伸缩项的height值

flex-grow(伸)

flex-grow: 定义伸缩项目的放大比例,
默认为0. 表示: 纵使主轴存在剩余空间,伸缩项目也不拉伸
若所有伸缩项目的flex-grow值都为1, 则透明等分剩余空间(若有剩余空间的话)
若三个伸缩项目的flex-grow值为:1,2,3.则他们分别分到: 1/6  2/6  3/6 的剩余空间

flex-shrink(缩)

flex-shrink: 定义伸缩项目的压缩比例.
默认为1,表示若伸缩容器空间不足,则该伸缩项目将被缩小
具体的每个伸缩项目的压缩比例计算比较麻烦.

flex复合属性

flex是复合属性, 集中了flex-grow伸,flex-shrink缩, flex-basis基准线  三个属性.   
伸缩: 0表示不拉伸不压缩, 1表示拉伸或压缩.
=> 表示简写为

     伸 缩 基
flex: 1 1 auto;   =>  flex: auto;   //可拉伸可压缩,不设置基准长度
flex: 1 1 0;      =>  flex:1;       //可伸缩,基准长度为0. 各个伸缩项的宽不重要了,所有伸缩项一起瓜分伸缩容器的宽度
flex: 0 0 auto;   =>  flex: none;   //不伸缩,不设置基准长度
flex: 0 1 auto;   =>  flex: 0 auto; //只缩不伸,不设置基准长度   (默认)

order 伸缩项目的排序,数值越小排列靠前.默认为0
align-self 单独调整某个伸缩项的对齐方式. 默认为auto,表示继承父元素的align-items属性.