版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/haha_zhan/article/details/81835852
目录
flex 容器属性详解
flex-direction 决定元素的排列方向
- flex-direction ：column;
设置：
效果如下：
- flex-direction : row
设置：
效果如下：
flex-wrap 决定元素如何换行（排列不下时）
flex-flow ：flex-direction 和 flex-wrap 的简写
justify-content 元素在主轴上的对齐方式
justify-content : flex-start
设置：
效果如下：
扫描二维码关注公众号，回复：
3346086 查看本文章
justify-content : flex-end
设置：
效果如下：
justify-content : space-around
设置：
效果如下：
justify-content : space-between
设置：
效果如下：
align-items 元素在交叉轴的对齐方式
align-items : flex-start
设置：
效果如下：
align-items : flex-end
设置：
效果如下：
align-items : center
设置：
效果如下：
align-items : stretch
设置：
效果如下：
align-items : baseline
设置：
效果如下：
设置：文字对齐
效果如下：
flex 元素属性详解
flex-grow 当有多余空间时，元素的放大比例
设置：flex-grow = 0（默认）
效果如下：
设置：
效果如下：
设置：
效果如下：
flex-shrink 当空间不足时，元素的缩小比例
设置：flex-shrink 当空间不足时，元素的缩小比例，默认值为1，当空间不足时等比缩小
效果如下：
设置：
效果如下：
设置：
效果如下：
flex-basis 元素在主轴上占据的空间
设置：
效果如下：
flex 是 grow 、shrink、basis 的简写
order 定义元素的排列顺序
设置：
效果如下：
设置：
效果如下：
align-self 定义元素自身的对齐方式
设置：
效果如下：
相对定位和绝对定位
理解相对定位和绝对定位
“相对定位的元素是相对==自身==进行定位，参照物是自己。”
“绝对定位的元素是相对==离它最近的一个已定位的父级元素==进行定位”
相对定位、绝对定位的编码实战
实例：
相对定位
设置:
效果如下：
绝对定位
绝对定位的元素是相对离它最近的一个已定位的父级元素进行定位
设置：
效果如下：
回到目录
设置：
效果如下：
设置：
效果如下：
