display: flex; 把容器设置为弹性盒模型
（设置为弹性盒模型之后，浮动，定位将不会有效果）
给父元素设置的属性：
（1）display：flex---把容器设置为弹性盒模型。
（2）flex-direction---设置弹性盒模型主轴方向
默认情况下主轴（水平方向从左到右），侧轴就是垂直方向
取值：
1)row---从左到右（默认值），侧轴就是垂直方向
2）row-reverse ---- 从右到左，侧轴就是垂直方向
3）column---从上到下，侧轴为水平方向
4）column-reverse---从下到上，侧轴就是水平方向
（3）justify-content--设置主轴的对齐方式
取值：
1）center---居中对齐
2）flex-start---主轴的起点对齐
3）flex-end--主轴的末端对齐
4）space-between--两端对齐,把多余的空白平分到子元素与子元素之间
5）space-around--把多余的空白处平分到元素的两侧
（4）align-items---侧轴的对齐方式（侧轴存在单行的情况）
取值：
1）center--居中对齐
2）flex-start--侧轴的起点对齐
3）flex-end--侧轴的末端对齐
（补充）默认情况下主轴从左到右（主轴的起点是左边，末端是右边）
flex-direction: row-reverse;得到一个主轴从右到左（主轴的起点是右边，末端是左边）
flex-direction: row-reverse;
justify-content: space-around;
align-items: flex-start;
弹性盒的子元素默认情况下是不换行，所有元素在同一行显示
（5）flex-wrap--设置是否换行
取值：
1）wrap---换行
2）nowrap--不换行（默认值）
3）wrap-reverse---反转换行
（6）align-content--侧轴存在多行的情况下的对齐方式
取值：
1）center---居中对齐，行与行之间没有间距
2）flex-start--侧轴的的起点对齐，行与行之间没有间距
3）flex-end---侧轴的的末端对齐，行与行之间没有间距
4）space-between--两端对齐，把多余的空间平分打破行与行之间
5）space-around---把多余的空间平分到行的两侧
给子元素设置的属性：
（1）align-self---设置单个子元素在侧轴的对齐方式
取值：
1）flex-start---侧轴的起点对齐
2）flex-end---侧轴的末端对齐
3）center---居中对齐
4）auto--具体笔记在下一个文件
5）stretch--拉伸，子元素有固定的值的时候，将不会被拉伸开
（2）order--设置子元素排列的优先级
取值：number ，默认的number为0，值越大越排在后面
（3）flex-grow---设置子元素的放大比例
取值：number（没有单位），默认值为0，不放大
比如：子元素的flex-grow的值总和为4，将剩余的空间平分为4分， flex-grow: 1表示占1/4，flex-grow: 3表示占3/4
（4）flex-shrink---设置子元素缩小比例
取值：number（没有单位），默认值为1，当容器空间不足的情况下，所有自元素默认缩小
不想是子元素缩小，那么设置flex-shrink：0
（5）flex-basis--设置子项目在主轴上的所占空间
相当于width，设置flex-basis之后width的值将失效
（6）flex--上面（3）（4）（5）简写
注意：
align-self:auto 的时候，如果父容器有align-items的属性值的时候，那么align-self:auto就继承父元素align-items的属性值
那么如果父元素没有align-items属性的时候，align-self:auto的值为align-self:stretch;
原文地址：https://www.cnblogs.com/bear159412/p/11111639.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。