flex布局胎级教学

flex 布局父项常见属性

以下由6个属性是对父元素设置的

1、flex-direction：设置主轴的方向

2、justify-content：设置主轴上的子元素排列方式

3、flex-wrap：设置子元素是否换行

4、align-content：设置侧轴上的子元素的排列方式 (多行)

5、align-items：设置侧轴上的子元素的排列方式 (单行)

6、flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

①、flex-direction：设置主轴的方向

主轴与侧轴

    · 在flex布局在，是分为主轴和侧轴两个方向，同样的叫法有：行和列，x轴和y轴

    · 默认主轴方向就是x轴得方向，水平向右

    · 默认侧轴方向就是y轴得方向，垂直向下

    · flex-direction 属性决定主轴的方向（即项目的排列方向）

   ·  注意：主轴和侧轴是会变化的，就看 flex-direction 设置为主轴，剩下的就是侧轴，而我们的子元素是跟着主轴来排列的

          

           /*这是加给父盒子的*/

           display: flex;

            /* 默认主轴是水平从左往右 */

            flex-direction: row;

            /* 主轴 水平从右往左 */

            flex-direction: row-reverse;

            /* 主轴为垂直从上往下 */

            flex-direction: column;

            /* 主轴为垂直从下至上 */

            flex-direction: column-reverse;

②、 justify-content：主轴上的子元素排列方式

• justify-content 属性定义了项目在主轴上的对齐方式
• 注意：使用这个属性之前一定要确定好主轴是哪个

④、align-content：侧轴上的子元素的排列方式 (多行)

 设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(多行)，在单行下没有效果

⑤、align-items：侧轴上的子元素的排列方式 (单行)

• 该属性是控制子项在侧轴(默认是 y 轴) 上的排列方式
• 在子项为单项(单行)的时候使用

属性	解释说明
flex-start	默认值从上到下
flex-end	从下到上
center	挤在一起居中(垂直居中)
stretch	拉伸

⑥、flex-flow

• flex-flow 属性是复合属性， flex-direction 和 flex-wrap 属性的复合属性

• flex-flow: row nowrap;

  

 

flex布局子项常见属性

• flex 子项目占的分数
• align-self 控制子项自己在侧轴的排列方式
• order 属性定义子项的排列顺序 (前后顺序)

①、flex 属性

• flex 属性定义项目分配父盒子的剩余空间，用 flex 来表示占多少分数
• 属性值为数字，数字为1，表示占总份数中的1 份，默认值为0

 

span:nth-child(2)
        {
            flex: 1;
        }

②、align-self 控制子项自己在侧轴的排列方式

• align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性
• 默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch

③、order 属性定义子项的排列顺序

• 数值越小，排列越靠前，默认值为 0

• 注意：和 z-index 不一样

 

④、flex-group子项目延伸比率## 标题

    flex-grow 属性用于设置或检索弹性盒子的扩展比率。

    注意：如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作用

 

 

总结：

 来源于：flex布局超级详细教程_idiot_MAN的博客-优快云博客