HTML-Flex 布局
flex 布局
弹性布局
flex 布局原理
flex 是fkexible Box 的缩写，意为“弹性布局”，用来为盒装模型提供最大的灵活性，任何一个容器都可以被指定为flex布局
- 当我们为父盒子设为flex布局以后，子元素的float、clear、和vertical-align属性将失效。
- 子容器可以横向排列，也可以纵向排列
- 布局原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
flex布局父项常见属性
主轴与侧轴：
在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴
- 默认主轴方向就是X轴方向，水平向右
- 默认侧轴方向就是Y轴方向，垂直向下
flex-direction：设置主轴方向
flex-direction 属性决定主轴的方向（即项目的排列方向）；注意：主轴和侧轴是会变化的，就看flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的。
属性值
- row :默认值从左到右
- role-reverse：从右到左
- column：从上到下
- column-reverse：从下到上
justify-content：设置主轴上的子元素排列方式
justify-content 属性定义了项目在主轴上的对其方式；使用前需要先确定主轴是哪个
属性值
- flex-start:默认值 从头部开始，如果主轴是x轴，则从左到右
- flex-end:从尾部开始排列
- center:在主轴居中对齐（如果租住是x轴则水平居中）
- space-around:平分剩余空间
- space-between:先两边贴边，再平分剩余空间（重要）
flex-wrap ：设置子元素是否换行
默认情况下，项目都排在一条线（又称为：“轴线”）上。flex-warp 属性定义，flex不居中默认是不换行的 如果装不下，会缩小子元素的宽度放到父元素里面。
属性值
- nowarp：默认不换行
- warp： 换行
align-content:设置侧轴上的子元素排列方式（多行）
该属性是控制子项在侧轴（默认是Y轴）上的排列方式，只能用于子项出现换行的情况（多行）单行下是没有效果的。在子项为单项的时候使用；
属性值
- flex-start:默认值 从上到下
- flex-end:从下到上
- center:挤在一起居中（垂直居中）
- stretch:拉伸（但是不要设置高度）
- space-around：子项在侧轴平分剩余空间
- space-between：子项在侧轴先分布在两头，再平分剩余空间
align-items 设置侧轴上的子元素排列方式（单行）
该属性是控制子项在侧轴（默认是y轴）上的排列方式，在子项为单项的时候使用
属性值
- flex-start ：默认值从上到下
- flex-end：从下到上
- center：挤在一起居中（垂直居中）
- stretch：拉伸
flex-flow:复合属性，相当于同时设置了flex-direction 和flex-wrap
把设置主轴方向和是否换行（换列）简写
- flex-flow：row wrap
flex布局 子项常见属性
- flex子项占有的份数
- align-self 控制子项自己在侧轴的排列方式
- order 属性定义子项的排列顺序（前后顺序）
Flex属性
flex属性定义子项目分配剩余空间，用flex来表示占多少份数。数值越大，分配的越多
align-self属性
控制子项自己在侧轴上的排列方式；align-self 属性允许单个项目有与其他项目不一样的对其方式，可覆盖align-item属性，默认值为auto，表示集成父元素的align-items属性，如果没有父元素，则等同于stretch
=
