css—flex布局

一.简介：

1.定义

flex是flexible box的缩写，意为“弹性布局”，用来为盒型模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

2.布局原理

采用flex布局的元素，称为flex容器（flex container），简称“容器“，它的所有子元素自动成为容器成员，称为flex项目，简称"项目"。
简单来说：就是通过给父盒子添加flex属性，来控制盒子的位置及排列方式。

二.容器container（父元素）的属性

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

1.flex-direction 设置主轴方向

//注 : 默认主轴为 x 轴，且主轴和侧轴是可以变化的，通过 flex-direction 设置谁为主轴，剩下的就是侧轴，子元素根据主轴排列。

1. row (默认值) : 默认从左到右
2. row-reverse : 从右到左
3. column : 从上到下
4. column-reverse : 从下到上

    
    
    
    
    


    

        1
        2
        3
    

flex-direction: row;（默认值，从左到右）

flex-direction: row-reverse;（从右到左）

flex-direction: column;（从上到下）

flex-direction: column-reverse;（从下到上）

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

1.flex-start（默认值） : 从头开始，如果主轴为 x 轴则为从左到右
2.flex-end : 从尾部开始
3.center ：主轴上居中对齐
4.space-around : 平均剩余空间
5.space-between : 两边贴边再平分剩余空间

    
    
    
    
    


    

        1
        2
        3
    

flex-start（默认值） : 从头开始，如果主轴为 x 轴则为从左到右

flex-end : 从尾部开始

center ：主轴上居中对齐

space-around : 平均剩余空间

space-between : 两边贴边再平分剩余空间

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

1.nowrap（默认值） : 不换行
2.wrap : 换行

    
    
    
    
    


    

        1
        2
        3
        4
        5
    

nowrap（默认值） : 不换行
//注：felx布局中默认子元素不换行，装不开则会缩小子元素的宽度，以放到父元素中

wrap: 换行

4.flex-flow 复合元素，相当于同时设置了 flex-direction 和 flex-wrap

flex-flow: [flex-direction] [flex-wrap]

2+3的组合，详细见上

5.align-items 设置侧轴上的子元素排列方式方式（单行）

1.flex-start（默认值） : 从上到下
2.flex-end : 从下到上
3.center : 挤在一起居中（垂直居中）
4.stretch : 拉伸

    
    
    
    
    


    

        1
        2
        3
    

flex-start（默认值） 从上到下

.flex-end 从下到上

.center 挤在一起居中（垂直居中）

    
    
    
    
    


    

        1
        2
        3
    

stretch 拉伸

6.align-content : 设置侧轴上的子元素排列方式（多行）

1. felx-start : 在侧轴头部开始排列
2. flex-end : 在侧轴尾部开始排列
3. center : 在侧轴中间显示
4. space-around : 子轴在侧轴平均剩余空间
5. sapce-betwen : 子轴在侧轴先分布在两端，再平分剩余空间
6. stretch : 设置子元素高度评分父元素高度

    
    
    
    
    


    

        1
        2
        3
        4
        5
        6
    

felx-start : 在侧轴头部开始排列

flex-end : 在侧轴尾部开始排列

center : 在侧轴中间显示

space-around : 子轴在侧轴平均剩余空间

sapce-betwen : 子轴在侧轴先分布在两端，再平分剩余空间

三,项目（item）子元素的属性

• flex 属性 : 定义子项目分配的剩余空间，用flex表示占的份数
• align-self : 控制子项自己在侧轴上的排列方式
• order : 定义项目的排列顺序

1.flex 属性 : 定义子项目分配的剩余空间，用flex表示占的份数

2.align-self : 控制子项自己在侧轴上的排列方式

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

    
    
    
    
    


    

        1
        2
        3
    

3.order : 定义项目的排列顺序

//注：默认值为0，数值越小越靠前

    
    
    
    
    


    

        1
        2
        3