内容:
设置弹性容器:display:flex/inline-flex;
,它的所有子元素自动成为弹性子元素
- 弹性容器外 弹性子元素内正常渲染。(弹性盒子只定义了弹性子元素如何在弹性容器内布局)
- 通常情况下默认每个容器只有一行,弹性子元素在弹性盒内一行显示。
- 设置flex布局以后,子元素的float 、 clear 、 vertical-align属性将失效。
容器存在两个轴:水平的主轴 和 垂直的交叉轴。
弹性容器属性:
改变弹性子元素的排列方式
,在弹性容器中设置:direction:rtl;
【1】flex-direction: 改变弹性子元素在父容器中的位置
flex-direction: row | row-reverse | column | column-reverse
横向ltr 反转横向 纵向 反转纵向
//下图按此方式显示:
【2】flex-wrap: 改变弹性子元素的换行方式
flex-wrap: nowrap |wrap| wrap-reverse
- nowrap 默认, 弹性容器为单行。该情况下弹性子项可能会溢出容器。
- wrap 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行,子项内部会发生断行
- wrap-reverse 反转 wrap 排列。
【3】flex-flow:
(flex-direction属性和flex-wrap属性的简写形式。)
flex-flow: row wrap; //横向排列 多行排列
【4】justify-content: 弹性子元素内容对齐
justify-content: flex-start | flex-end | center | space-between | space-around
左对齐 右对齐 居中 两端对齐 两侧间隔相等为项目间隔的一半
【5】align-items 弹性子元素在交叉轴上
如何对齐
align-items: flex-start | flex-end | center | baseline | stretch;
// 分别沿交叉轴的 起点对齐 终点对齐 中点对齐 子元素的第一行文字基线
//stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
【6】align-content: 定义多根轴线的对齐方式
这个属性只有在容器有多条主轴是才有效,一条主轴无效
类似于justify-content属性
justify-content: flex-start | flex-end | center |space-between| space-around | stretch
与交叉轴起点对齐|交叉轴终点对齐|交叉轴中间对齐|交叉轴两端对齐|交叉轴两侧间距相等|默认值
弹性子元素属性:
【1】order:弹性子元素的排列顺序。数值越小,排列越靠前(可以为负)。
【2】flex-grow:定义弹性子元素的放大比例,默认为0,(就是如果没有占满容器整行,不放大项目。)
【3】flex-shrink:定义弹性子元素的缩小比例,默认为1,(如果空间不足,该弹性子元素将缩小。)
【4】flex-basis: 在分配多余的空间之前,弹性子元素占据的主轴空间,默认为auto,就是弹性子元素本来的宽度 (eg:直接可以写成 flex-basis:200px;)
【5】flex:
flex是flex-grow、flex-shrink、flex-basis的复合属性
默认值:0 1 auto,后两个属性可选
可以写关键字:auto (1 1 auto) 和 none (0 0 auto)
【6】align-self: 允许单个弹性子元素有与其他弹性子元素不一样的对齐方式,可以覆盖align-items属性。默认为auto。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
margin:auto;
使得弹性子元素在两轴方向上完全居中