<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flex</title>
<style>
.box {
width: 400px;
display: flex;
/*flex-wrap: wrap-reverse;*/
margin: 20px;
line-height: 40px;
font-size: 20px;
color: #fff;
background: #963297;
}
.item {
width: 300px;
margin: 10px;
padding: 0 12px;
line-height: 40px;
text-align: center;
background-color: #c99702;
}
</style>
</head>
<body>
<div class="box">
<!-- 只有在文档流中的子元素才是弹性元素 -->
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
<!-- <div>
<div>grandson</div>
</div> -->
</div>
<!--
1. 方向
(1) flex-direction: row | row-reverse | column | column-reverse
(2) flex-wrap: nowrap | wrap | wrap-reverse
(3) flex-flow: <'flex-direction'> || <'flex-wrap'>
(4) order: <interger> (相对值) 2. 弹性
(1) *flex-grow: <number> initial:0 设置元素能够分到的剩余空间
弹性布局的元素宽度 = flex-basis + flow-grow/wum(flow-grow)*remain
(2) flex-shrink: <number> initial:1
(3) flex-basis: main-size | <width> 设置flex item的初始宽/高
(4) flex: <'flex-grow'> || <'flex-shrink'> || <'flex-basis'>
flex: 1 1 0; 3. 对齐
(1) justify-content: flex-start | flex-end | center | space-between | space-around (设置主轴方向上的对齐方式(间隔分配方式))
(2) align-items: flex-start | flex-end | center | baseline | stretch (设置辅轴方向上对齐方式)
(3) align-self: auto | flex-start | flex-end | center | baseline | stretch (设置单个flex item在辅轴方向上的对齐方式)
(4) align-content: felx-start | flex-end | center | space-between | space-around | stretch (设置辅轴方向上的行对齐方式) （出现多行时，容器上出现剩余空间）
-->
</body>
</html>
更新一张笔记图：