geminate

Flex布局相关整理

2018/02/08

一. 语法整理

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. 圣杯布局

圣杯布局.png

<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. 后台管理布局

后台管理布局.png

<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：

  1. float 属性对 Flexbox 中的子元素无效(但是对Flexbox 有效)
  2. Flexbox 下的子元素不会继承父级容器的宽
  3. Flexbox中的连续的文字节点会被当成一个Flexitem
  4. Flexitem 宽度的优先级 min/max -width  >  flex  =  width auto  >  width定值。即同时设置min-width 和 flex ，最先宽度不会小于min-width；同时设置flex和定值width，定值width不会生效；同时设置flex和width:auto(不写width默认为auto)，Flexitem的宽度由两者中的较大的值决定，就是说会被内部元素撑开，当内部元素不足以撑开Flexitem时，以flex设置的宽度为准。
  5. 对于某些有默认宽高的元素(如input)，若flex-basis小于于默认宽高，那么其大小将以默认宽高作为最小值，若flex-basis大于默认宽高，则以flex-basis为准。在对元素设置了width/height后，其默认宽高失效，宽高完全有flex决定。

文章导航