一、flex弹性布局
flexible-box-layout 弹性盒式模型,它能更加高效的控制元素的对齐、排列,更重要的是能够自动计算布局内元素的尺寸,无论这个元素的尺寸是固定的还是动态的。
父元素(flex container)
子元素(flex item)
主轴(main axis)可由display-direction属性设置主轴的方向
交叉轴(cross axis)
不一定弹性盒子中水平方向的轴就是主轴,垂直方向上的轴就是交叉轴
主轴的起点(main start)
主轴的终点(main end)起点和终点决定了在自然情况下元素的排列顺序
交叉轴起点(cross start)
交叉轴终点(cross end)
主轴尺寸(main size)由flex container的尺寸决定
交叉轴尺寸(cross size)由flex container的尺寸决定
(一)伸缩容器的属性
以下的7个属性是设置在容器上的
- display
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
1.display
将目标容器布局方式设置为弹性布局
目标容器设置为弹性布局(块级元素)
display:flex
目标容器设置为弹性*布局(行内元素)
display:inline-flex //不再占据一整行
兼容浏览器(推荐写法)
display:-webkit-flex;
display:flex;
PS:设为 flex容器以后,flex子元素的float、clear和vertical-align属性将失效。
2.flex-direction
定义子元素在主轴的排列方式
语法
flex-direction: row(默认) | row-reverse | column | column-reverse
- row(默认值):主轴为水平方向,起点在左端。
- row-reverse:主轴为水平方向,起点在右端。
- column:主轴为垂直方向,起点在上沿。
- column-reverse:主轴为垂直方向,起点在下沿。
3.flex-wrap
设置flew-item的换行。
语法
flex-wrap:nowrap(默认) | wrap | wrap-reverse
-
nowrap (默认)不换行(若子元素和大于父元素,那么设置的子元素的宽度失效,子元素变小硬挤在一行中)
-
wrap 宽度不够自动换行,第一行在上方。
-
wrap-reverse 宽度不够自动换行,第一行在下方。