开启flex的方法
<style>
/* 父级开启 */
div {
display: flex;
}
/* 子项 */
div span {
width: 150px;
height: 100px;
background-color: red;
}
</style>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
flex布局父级常用属性
| 属性 |
说明 |
| flex-direction |
设置主轴方向 |
| justify-content |
设置主轴上的子元素排列方式 |
| flex-wrap |
设置子元素是否换行 |
| align-content |
设置侧轴上的子元素的排列方式(多行) |
| align-items |
设置侧轴上的子元素排列方式(单行) |
| flex-flow |
复合属性，相当于同事设置了flex-direction和flex-wrap |
| flex-direction: |
说明 |
| row |
默认值 从左到右 |
| row-reverse |
从右到左 |
| column |
从上到下 |
| column-reverse |
从下到上 |
| justify-content: |
说明 |
| center |
在主轴居中对齐（如果主轴是x轴则 水平居中） |
| space-around |
平分剩余空间 |
| space-between |
两边贴边 再平分剩余空间 |
| space-evenly |
|
| flex-wrap: |
说明 |
| nowrap |
默认值 不换行 |
| wrap |
换行 |
| align-content: |
说明 |
| flex-start |
默认值 在侧轴的头部开始排列 |
| flex-end |
在侧轴的尾部开始排列 |
| center |
在侧轴中间显示 |
| space-around |
子项在侧轴评分剩余空间 |
| space-between |
子项在侧轴先分布两边，再平分剩余空间 |
| stretch |
设置子项元素高度平分父级元素高度 |
| align-items: |
说明 |
| flex-start |
默认值 从上到啊 |
| flex-end |
从下到上 |
| center |
居中(垂直居中) |
| stretch |
拉伸 |
flex布局子项常见属性
| 属性 |
说明 |
| flex |
子项占据的份数 |
| align-self |
控制子项自己在侧轴的排列方式 |
| order |
定义子项的排列顺序(前后顺序) |
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。