一. 语法整理
1. 父级对象
flex-direction 改变主轴方向:
- row (默认值):水平方向,从左到右
- row-reverse:水平方向,从右到左
- column:垂直方向,从上到下
- column-reverse:垂直方向,从下到上
flex-wrap 换行方式
- nowrap(默认值):不换行
- wrap:换行
- wrap-reverse:换行,第一行在下方
flex-flow:flex-direction 和 flex-wrap 的简写,默认 row nowrap
justify-content 项目在主轴上的对齐方式
- flex-start(默认值):左对齐
- flex-end:右对齐
- center:居中
- space-between:两端对齐,项目之间的间隔都相等,项目与边框无间隔
- space-around:每个项目两侧的间隔相等。项目之间的间隔是项目与边框间隔的两倍
align-items 项目在交叉轴上的对齐方式
- flex-start:交叉轴的起点对齐
- flex-end:交叉轴的终点对齐
- center:交叉轴的中点对齐
- baseline: 项目的第一行文字的基线对齐
- stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
align-content 多个主轴对齐方式,如项目只有一个主轴(无换行),该属性无效
- flex-start:与交叉轴起点对齐
- flex-end:与交叉轴的终点对齐
- center:与交叉轴的中点对齐
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布
- space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍
- stretch(默认值):轴线占满整个交叉轴
2. item对象
order 项目排序,越小排的越靠前,默认值为0
flex 默认值0 1 auto。
- 第一个值表示放大比例,0表示如果存在剩余空间,也不放大。其他数字表示占据的剩余空间比例。
- 第二个值表示缩小比例。
- 第三个值表示在分配多余空间之前,项目占据的主轴空间,auto表示项目本来的大小。
align-self 项目特殊的对齐方式,覆盖align-items,属性和align-items一致
二. 常用效果实现
1. 圣杯布局
<style>
body {
display: flex;
flex-flow: column nowrap;
min-height: 100vh;
margin: 0;
}
header {
flex: 0 0 50px;
background-color: red;
}
.main {
display: flex;
flex: 1 1 auto;
}
footer {
flex: 0 0 50px;
background-color: blue;
}
nav {
background-color: yellow;
flex: 0 0 300px;
}
.content {
flex: 1 1 auto;
}
aside {
background-color: green;
flex: 0 0 300px;
}
</style>
<body>
<header></header>
<div class="main">
<nav></nav>
<div class="content"></div>
<aside></aside>
</div>
<footer></footer>
</body>
2. 后台管理布局
<style>
body {
display: flex;
flex-flow: column nowrap;
height: 100vh;
margin: 0;
}
header {
flex: 0 0 50px;
background-color: red;
}
.main {
display: flex;
flex: 1 1 auto;
}
footer {
flex: 0 0 50px;
background-color: blue;
}
nav {
background-color: yellow;
flex: 0 0 300px;
overflow: auto;
}
.content {
flex: 1 1 auto;
overflow: auto;
}
</style>
<body>
<header></header>
<div class="main">
<nav></nav>
<div class="content"></div>
<aside></aside>
</div>
<footer></footer>
</body>
三. Tips:
- float 属性对 Flexbox 中的子元素无效(但是对Flexbox 有效)
- Flexbox 下的子元素不会继承父级容器的宽
- Flexbox中的连续的文字节点会被当成一个Flexitem
- Flexitem 宽度的优先级 min/max -width > flex = width auto > width定值。即同时设置min-width 和 flex ,最先宽度不会小于min-width;同时设置flex和定值width,定值width不会生效;同时设置flex和width:auto(不写width默认为auto),Flexitem的宽度由两者中的较大的值决定,就是说会被内部元素撑开,当内部元素不足以撑开Flexitem时,以flex设置的宽度为准。
- 对于某些有默认宽高的元素(如input),若flex-basis小于于默认宽高,那么其大小将以默认宽高作为最小值,若flex-basis大于默认宽高,则以flex-basis为准。在对元素设置了width/height后,其默认宽高失效,宽高完全有flex决定。