html弹性盒子（justify-content属性、align-items属性、flex-direction属性、flex-wrap属性）

一、如何将盒子转换为弹性盒子

            display: flex;
            /* 转换弹性盒子 */
            justify-content: space-between;
            /* 盒子元素排列方式 */
            flex-wrap: wrap;
            /* 自动换行 */

弹性盒子基本属性设置

1.案例

参考文章Flex布局常见父项属性（页面展示详细）https://blog.csdn.net/JHY97/article/details/122334190?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522169753967716800188534900%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=169753967716800188534900&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_click~default-1-122334190-null-null.142%5Ev96%5Epc_search_result_base7&utm_term=flex-flow&spm=1018.2226.3001.4187

            display: flex; /* 父级添加flex属性 */
            justify-content: center; /* x轴居中 */
            align-items: center; /* y轴居中 */

二、justify-content属性

• flex-start（默认值）：左对齐；
•  flex-end：右对齐；
• center： 居中；
• space-between（常用）：两端对齐，项目之间的间隔都相等；
• space-around：每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍。

 

justify简略图

三、flex-wrap属性：

• nowrap（默认）：不换行；
• wrap(常用）：换行，第一行在上方；
•  wrap-reverse：换行，第一行在下方

 四、弹性盒子里的元素垂直对齐方式(align-items属性)（单行）

•  flex-start：交叉轴的起点对齐；垂直居上
•  flex-end：交叉轴的终点对齐；垂直居下
•  center(最常用)：与交叉轴的中点对齐; 垂直居中
•  stretch（默认值）：轴线占满整个交叉轴。
• baseline 与第一行文字基线对齐

 五、align-content设置元素垂直对齐方式 （多行）

属性值	说明
flex-start	垂直居上（默认值）
flex-end	垂直居下
center	垂直居中
space-around	子元素在x轴上平分剩余的空间
space-between	子元素在x轴先分布在两端，再平分剩余空间
stretch	设置子元素高度且平分父元素高度

效果查看：     具体页面效果

 六、align-items和align-content区别

1. align-items适用子元素单行的情况下，只有上对齐、下对齐、居中和拉伸
2. align-content适用于子元素多行的情况下（单行情况下无法生效），可设置上对齐、下对齐、居中，平分侧轴剩余的空间、靠近两端再平分剩余空间和拉伸 属性值
3. 总的来说单行使用align-items，多行使用align-content

七、不常用flex-flow属性：

是flex-direction属性和flex-wrap属性的简写形式，默认值为row  nowrap

相当于同时设置flex-direvtion和flex-wrap

案例 

            /* 父级添加flex属性 */
            display: flex;
            flex-flow: column wrap;

效果 - 以y轴为主轴，且允许子元素换行

左边设置flex-direvtion右边设置flex-wrap