flex布局详解

flex布局原理

flex是flexible box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列顺序。

• 当我们为父盒子设置flex布局以后，子元素的float，clear，vertical-align属性将失效。
• 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局。

flex布局父容器常见属性

flex-direction:设置主轴的方向；
justify-content:设置主轴上子元素排列方式；
flex-wrap:设置子元素是否换行；
align-items:设置侧轴上子元素的排列方式（单行）；
align-content:设置侧轴上子元素的排列方式（多行）；
flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap。

1.flex-direction属性:设置主轴的方向

• row 主轴在横向，并且以开始位置显示
• row-reverse 主轴在横向，并且以反方向位置显示
• column 主轴在纵向，并且以开始位置显示
• column-reverse 主轴在纵向，并且以反方向位置显示

2.justify-content属性：用来调整主轴上的对齐方式（间距）

• flex-start 主轴的开始位置显示（项目之间是没有间距的）
• flex-end 主轴的结束位置显示（项目之间是没有间距的）
• center 主轴居中位置显示（项目之间是没有间距的）
• space-around 主轴两端环绕，项目与项目之间的距离是首尾项目与容器之间距离的2倍
• space-between 主轴的两端对齐
• space-evenly 主轴的间距平分

3.align-items属性：用于调整侧轴上的项目的对齐方式（单行）

• flex-start 侧轴的开始位置显示
• flex-end 侧轴的结束位置显示
• center 侧轴的居中位置显示
• baseline 侧轴的基线位置显示，效果与开始位置一致，实际开发中不会用到该属性值
• stretch 默认的拉伸效果 （前提项目不需要设置高度）

4.flex-wrap属性：是否让元素进行换行显示

• nowrap 不换行（默认就是挤压的效果）
• wrap 换行显示

5.align-content属性：用于调整侧轴上面的项目的对齐方式（多行才有效果）

• flex-start 侧轴的开始位置显示（没有行间距）
• flex-end 侧轴的结束位置显示（没有行间距）
• center 侧轴的居中位置显示 （没有行间距）
• space between 两端对齐
• space-around 两端环绕
• space-evenly 行间距均分

6.flex-flow属性：flex-flow属性是flex-direction和flex-wrap和复合属性

flex布局子项目常见属性

1.flex属性：定义子项目分配剩余空间，用flex表示占多少份数
2.align-self属性：用于控制子项目自己在侧轴上的单独对齐方式

• flex-start 项目位于侧轴开始位置显示
• flex-end 项目位于侧轴结束位置显示
• center 项目位于侧轴居中位置显示
• baseline 项目位于侧轴基线位置对其，实际开发很少使用
• stretch 侧轴上面拉伸效果 （前提：项目没有设置高度）

3.order属性：定义子项目的排列顺序（取值可以为正可以为负；取值越大越靠后，越小越靠前，默认取值为0）

浏览到一个写的比较好的flex详解文章，附上链接：https://blog.csdn.net/klylove/article/details/130267687?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogOpenSearchComplete%7ERate-1-130267687-blog-141296927.235%5Ev43%5Epc_blog_bottom_relevance_base9&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogOpenSearchComplete%7ERate-1-130267687-blog-141296927.235%5Ev43%5Epc_blog_bottom_relevance_base9&utm_relevant_index=1