Flex布局的使用语法
flex布局（父项）
弹性布局（任何一个盒子都可以指定为flex布局）
设了flex布局后，子元素的float，clear和vertical-align属性将失效
布局原理：给父盒子添加flex属性，来控制子盒子的位置和排列方式
常见父项属性：
1.flex-direction:设置主轴的方向（默认x为主轴，y为侧轴，可设y轴为主轴，那么x轴为侧轴）
-
row（默认从左往右,x轴）
-
row-reverse(右往左)
-
column(从上往下，y轴)
-
column-reverse(从下往上)
2.justify-content:设置主轴上的子元素排列方式（定义对齐方式，默认为x轴）
-
flex-start(默认从头部开始，如果主轴是x，则从左往右)
-
flex-end(从尾部开始排列)
-
center（在主轴居中对齐，主轴是x，则水平居中）
-
space-around(平分剩余空间)
-
space-between(先贴两边再平分剩余空间)重要！！
3.flex-wray:设置子元素是否换行（flex中默认的子元素是不换行的）
-
nowrap(默认不换行)
-
wray(换行)
4.align-content:侧轴的排列方式（多行，子轴出现换行情况）
-
flex-start(从上到下)
-
flex-end(从下到上)
-
center（在侧轴中间显示）
-
space-around(子项在侧轴平分剩余空间)
-
space-between(子项在侧轴先分布在两头，在平分剩余空间)
-
stretch(拉伸，子元素高度平分父元素高度)
5.align-items:设置侧轴的排列方式（单行，默认y轴）
-
flex-start(从上到下)
-
flex-end(从下到上)
-
center（侧轴垂直居中）重要！！
-
stretch(拉伸 少用 盒子不要给高度)
flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap（即主轴方向和子元素是否换行）
原文地址：https://blog.csdn.net/TwTei/article/details/149822537
免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！