标签：fiex flex 子项 主轴 align 布局 排列 移动 属性
flex 布局的定义
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
我们为父级盒子设置为flex布局以后子元素的 float,clear 和vertical-align属性将失效
任何一个容器都可以指定为Flex布局。flex 布局有两个值：
- display:flex; 代表的是块级
- display:inline-flex; 代表的是行内块
flex 布局的基本概念
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
就是通过给父级盒子添加flex属性,来控制子盒子的位置和排列方式
常见父项属性 容器
1.flex-direction:设置主轴的方向
主轴和侧轴
在flex布局中,是分为主轴和侧轴两个方向,同样的叫法有行和列x轴y轴
我们的元素是跟着主轴来排列的
- 默认主轴的方向就是x轴方向:水平向右
- 默认侧的轴方向就是y轴方向:水平向下
属性值
flex-direction属性决定了主轴的方向(即项目的排列方向)
- row：主轴的方向是水平，从左到右
- column：主轴的方向是垂直的，从上到下
- row-reverse：主轴的方向是水平，从右到左
- column-reverse：主轴的方向是垂直的，从下到上
2.flex-wrap:设置子元素是否换行
默认情况下,项目都排着一条线上(又称"轴线")上. flex-warp属性定义,flex中默认不换行.如果装不开会缩小子元素的宽度放到父元素里面
- wrap: 换行
- nowrap: 不换行（默认）
3.flex-flow:复合属性相当于同时设置了flex-direction:和flex-wrap
4.justify-content设置主轴上子元素排列方式
注意使用这个属性之前一定确定好主轴是哪个
- flex-start |默认值从头部开始,如果主轴是x轴就是从左到右
- flex-end |从尾部开始排列
- center |在主轴居中对齐
- space-between |先两边贴边在平分剩余空间(重要)
- space-around| 平分剩余空间
5.align-items: 设置侧轴子元素的排列方式(单行)
该属性控制子项在侧轴(默认是用轴)上的排列方式,在子项为单项的时候使用
flex-start |从上到下
flex-end |从下到上
center |挤在一起居中(垂直居中)(重要)
stretch|拉伸(默认值) 子盒子不要给高度
6.align-content设置侧轴子元素的排列方式(多行)
设置子项在侧轴上的排列方式,并且只能用于子项出现换行的情况(多行)在单行下没有效果
- flex-start |默认值在侧轴的头部开始排列
- flex-end |在侧轴的尾部开始排列
- center |在侧轴中间显示
- space-between |子项在侧轴先分布在两头,在平分剩余空间
- space-around |子项在在侧轴平分剩余空间
- stretch; 设置子项元素高度为父元素的高度
align-content和align-items的区别
- align-items适用于单行,只能上对齐,下对齐,居中和拉伸
- align-content适用于换行(多行)的情况下(单行情况下无效),可以设置上对齐,下对齐,居中拉伸,以及平分剩余空间等属性
- 总结单行找align-items 多行找align-content
子项常见的属性的属性(项目)
1.align-self控制子项自己在侧轴上的排列方式
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
2.flex子项占的份数
属性定义子项分配剩余空间,用flex来表示占多少份
3.order属性定义子项的排列属性(前后顺序)
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
注意和z-index不一样
---------------------------------------------------完结------------------------------------------------------------------
--------------------------接受大佬们的批改,欢迎留言评论-------------------------------------------------------
标签：fiex,flex,子项,主轴,align,布局,排列,移动,属性 来源： https://blog.csdn.net/qq_63358859/article/details/121237300
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。