flex布局--学习笔记
学习内容:阮一峰老师的Flex布局教程、Flex布局示例
学习笔记:2019-07-08 15:30:06
理论基础:
布局的传统解决方案,基于盒状模型,依赖 display
属性 + position
属性(值:static/absolute/relative) + float
属性(值:none/left/right)。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。
而Flex 布局(包括主轴main axis和交叉轴cross axis),可以简便、完整、响应式地实现各种页面布局。设为 Flex 布局以后,子元素的float
、clear
和vertical-align
属性将失效。
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。
a)任何一个容器都可以指定为 Flex 布局: .box{ display: flex; /* flex默认首行左对齐 */ }
b)行内元素的 Flex 布局: .box{ display: inline-flex; }
c)Webkit 内核的浏览器,必须加上-webkit
前缀: .box{ display: -webkit-flex; display: flex; }
容器属性:
1. flex-direction
:决定项目的排列方向。
.box { flex-direction: column-reverse | column | row | row-reverse;
/* 从下到上 | 从上到下 | 从左到右 | 从右到左 */ }
2. flex-wrap
:规定如何换行。
.box{ flex-wrap: nowrap | wrap | wrap-reverse;
/* 不换行 | 换行且第一行在上方 | 换行且第一行在下方 */ }
3. flex-flow
:flex-direction
属性和flex-wrap
属性的简写形式。
.box { flex-flow: <flex-direction> || <flex-wrap>;
/* 默认值为 row || nowrap */ }
4. justify-content
:定义了项目在主轴上(排列方向)的对齐方式。
.box { justify-content: flex-start | flex-end | center | space-between | space-around;
/* 与主轴起点对齐 | 与主轴终点对齐 | 主轴方向居中 | 主轴方向两端对齐且项目之间的间隔都相等 | 主轴方向每个项目两侧的间隔相等,因此项目之间的间隔比项目与边框的间隔大一倍 */ }
5. align-items
: 定义项目在交叉轴上如何对齐。
.box { align-items: flex-start | flex-end | center | baseline | stretch;
/* 与交叉轴起点对齐 | 与交叉轴终点对齐 | 交叉轴方向居中 | 项目的第一行文字的基线对齐 | 占满整个容器的高度 */ }
6. align-content
:定义了多根横轴线的对齐方式。如果项目只有一根横轴线,该属性不起作用。
.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch;
/* 与交叉轴起点对齐 | 与交叉轴终点对齐 | 交叉轴方向居中 | 与交叉轴两端对齐,轴线之间的间隔平均分布 | 每根轴线两侧的间隔都相等 | 横轴线占满整个交叉轴方向 */ }
项目属性:
order
:
定义项目的排列顺序,数值越小,排列越靠前。
定义项目的放大比例,
也不放大。如果所有项目的
flex-grow
属性都为1,则它们将等分剩余空间,值越大的项占据的剩余空间将比其他项多。
flex-grow:定义定义项目的放大比例,
也不放大。如果所有项目的
flex-grow
属性都为1,则它们将等分剩余空间,值越大的项占据的剩余空间将比其他项多。
flex-shrink
:
定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。如果所有项目的
flex-shrink
属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink
属性为0,则空间不足时也不缩小。
flex-basis
:定义了在分配多余空间之前,项目占据的主轴空间(main size),浏览器根据这个属性计算主轴是否有多余空间。
flex
:属性
flex-grow
, flex-shrink
和 flex-basis
的简写,该属性有两个快捷值:auto
(1 1 auto
) 和 none (0 0 auto
)。
align-self
:允许单个项目有与其他项目不一样的对齐方式,可覆盖
align-items
属性。
.item { order: <integer>;/* default 0 */
flex-grow: <number>; /*默认为
*/
0
,即如果存在剩余空间,也不放大flex-shrink: <number>; /* 默认为1,即如果空间不足,该项目将缩小*/
flex-basis: <length> | auto; /* 默认值为
auto
,即项目的本来大小 */flex: none | [ <'flex-grow'> <'flex-shrink'><'flex-basis'> ] /* 默认值为
0 1 auto
*/align-self: auto | flex-start | flex-end | center | baseline | stretch; /* 默认值为
}auto
,表示继承父元素的align-items
属性,如果没有父元素,则等同于stretch
*/
实战:
简单的理解是,默认justify-content
是设置水平方向的(主轴方向), align-items是设置垂直方向(交叉轴方向)的,但如果设置了方向
flex-direction: column,则变为,
justify-content
是设置垂直方向的(主轴方向),align-items是设置水平方向(交叉轴方向)的。
骰子布局:
1 | 2 | 3 |
4 | 5 | 6 |
7 | 8 | 9 |
{ 1,3 }
.box { display: flex; justify-content: space-between; }
{ 1,7 }
.box { display: flex; flex-direction: column; justify-content: space-between;
/* 加上align-items: center 则变为{2,8}
*/
}
默认为水平排列,所以此处要设置排列方向为垂直方向,flex-direction: column;
{ 1,5 }
.box {
display: flex; /* 这里为{1,2}
*/
}
.item:nth-child(2) {
align-self: center;/* 垂直方向上从2移到5*/
}
{ 1,9 }
.box {
display: flex;
justify-content: space-between;/* 这里为{1,3}
*/
}
.item:nth-child(2) {
align-self: flex-end;/* 垂直方向上3移到9*/
}
{ 1,2, 3,9 }
.box { display: flex; flex-wrap: wrap;/* 这里为{1,2,3, 4}
*/ justify-content: flex-end;/* 右对齐后为{1,2,3,6}
*/ align-content: space-between;/* 交叉轴方向两端对齐后为{1,2,3,9} */ }
{ 1,3, 7, 9 }
<div class="box"> <div class="row"> <span class="item"></span> <span class="item"></span> </div> <div class="row"> <span class="item"></span> <span class="item"></span> </div> </div>
.box {/* row为box容器里的项目*/ display: flex; flex-wrap: wrap;/* 这里为{1,2,4,5}
*/ align-content: space-between;/* 这里为{1,2,7,8}
*/ } .row {/* item为row容器里的项目*/ flex-basis: 100%;/* 设置row项目的大小 */ display: flex;/* 设置row容器为flex布局 */ justify-content: space-between;/* 这里为{1,3,7,9}
*/ }
{ 1,4, 7, 3, 6, 9 }
.box { display: flex; flex-direction: column; flex-wrap: wrap; align-content: space-between; }
{ 1,2, 3,5, 7, 9 }
<div class="box"> <div class="row"> <span class="item"></span> <span class="item"></span> <span class="item"></span> </div> <div class="row"> <span class="item"></span> </div> <div class="row"> <span class="item"></span> <span class="item"></span> </div> </div>
.box { display: flex; flex-wrap: wrap;/* 换行 */ } .row{ flex-basis: 100%;/* 设置row项目的大小 */ display:flex;/* 设置row容器的布局为flex */ } .row:nth-child(2){ justify-content: center; } .row:nth-child(3){ justify-content: space-between; }
posted on 2019-07-08 20:57 KAKAFEIcoffee 阅读(183) 评论(0) 编辑 收藏 举报