CSS Flex 语法与应用

CSS

应用于图标排列

.hxxFlex {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: stretch;
    justify-content: space-around;
}

应用于文字布局

.hxxFlex {
	text-align: left;
	font-size: 12px;
	font-weight: 700;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding-left: 0;
	margin-bottom: 0;
	border-radius: 0.25rem;
}

HTML

<div class="appFlex">...</div>

知道更多

来自阮一峰

Flex 布局教程：语法篇

https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Flex 布局教程：实例篇

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html