Flex布局 + 原理
意为"弹性布局",通过给父盒子添加flex属性,来控制子盒子的位置和排列方式。
注意!设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。
flex主轴和侧轴
在flex布局当中有主轴和侧轴两个方向。也是X轴和Y轴,行和列。
1、默认主轴方向是X轴方向,水平向右。
2、默认侧轴方向是Y轴方向,水平向下。
flex常见属性
1、flex-direction属性
flex-direction属性 决定主轴的方向(即项目的排列方向)。
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。
2 flex-wrap属性
定义flex布局中如何换行的。默认情况下,项目都排在一条线(又称“轴线”)上。
属性名 | 说明文字 |
---|---|
nowrap | (默认):不换行。 |
wrap | 换行,第一行在上方 |
wrap-reverse | 换行,第一行在下方。 |
3. justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。
属性值 | 说明 |
---|---|
flex-start(默认值) | 左对齐 |
flex-end | 右对齐 |
center | 中间对齐 |
space-between | 两端对齐,项目之间的间隔都相等 |
space-around | 每个项目两侧的间隔相等 |
4.align-items属性(单行)
设置侧轴上子元素的排列方式(单行)。
属性值 | 说明 |
---|---|
flex-start | 交叉轴的起点对齐 |
flex-end | 交叉轴的终点对齐 |
center | 交叉轴的中点对齐 |
baseline | 项目的第一行文字的基线对齐 |
stretch(默认值) | 如果项目未设置高度或设为auto,将占满整个容器的高度 |
5.align-content属性(多行)
设置侧轴上子元素的排列方式(多行)。如果项目只有一根轴线,该属性不起作用。
属性值 | 说明 |
---|---|
flex-start | 与交叉轴的起点对齐 |
flex-end | 交叉轴的终点对齐 |
center | 交叉轴的中点对齐 |
space-between | 与交叉轴两端对齐,轴线之间的间隔平均分布。 |
space-around | 每根轴线两侧的间隔都相等 |
stretch(默认值) | 轴线占满整个交叉轴 |
align-content 和 align-items 区别**
1.align-items 适用于单行情况下,只是上对齐,下对齐,居中和拉伸。
2.align-content 适用于**换行(多行)**的情况下(单行分情况下无效),可设置上对齐、居中、拉伸以及平分剩余空间等属性值。
总结:单行找align-items、多行找align-content。