全栈：flex布局方式

目录

一、flex布局：CSS3的弹性盒子(Flexible Box 或 FlexBox)

二、如何使用flex布局

三、 flex布局的使用

        采用Flex布局的元素，称为Flex容器（大盒子 flex container），简称“容器”。

        它的所有子元素自动成为容器的成员，称为Flex项目（小盒子 flex item），简称“项目”。

四、容器的属性

        1、 flex-direction：定义主轴的方向（项目排列的方向）

         

        2、flex-wrap：定义子元素超出容器时是否换行

        3、justify-content：定义项目在主轴上的对齐方式

        4、align-items：定义项目在交叉轴上的对齐方式

        5、align-content：定义多根轴线的对齐方式，主要作用于换行时给交叉轴上的项目设置的对齐方式

五、项目的属性

2、align-self：允许单个项目有与其他项目不一样的对齐方式。

---

一、flex布局：CSS3的弹性盒子(Flexible Box 或 FlexBox)

        一种当页面需要适应不同屏幕大小及设备类型时，确保元素拥有恰当的行为的布局方式。引入弹性盒子布局模式的目的时提供一种更加有效的方式对一个容器中的子元素进行排列，对齐，和分配空白空间。

相对于使用float和定位布局会更加便利和简洁

二、如何使用flex布局

        在任意容器中插入flex即可指定为flex布局，使用flex布局会导致子元素中的 float，clear，vertical-align将失效。

.box{
    dispaly:flex
    display:inline-flex/*行内元素使用flex布局*/
    }

三、 flex布局的使用

        采用Flex布局的元素，称为Flex容器（大盒子 flex container），简称“容器”。

        它的所有子元素自动成为容器的成员，称为Flex项目（小盒子 flex item），简称“项目”。

        容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis），项目默认沿主轴排列。

四、容器的属性

        1、 flex-direction：定义主轴的方向（项目排列的方向）

row	主轴为水平方向，起点在左侧（默认）
row-reverse	主轴为水平方向，起点在右侧
column	主轴为垂直方向，起点在上侧（默认）
column-reverse	主轴为垂直方向，起点在下侧

         

        2、flex-wrap：定义子元素超出容器时是否换行

nowrap	不换行  默认情况下项目都排在轴线上
wrap	换行，行前往后排列
wrap-reverse	换行，行从后往前排列

               

        3、justify-content：定义项目在主轴上的对齐方式

flex-start	向主轴开始的位置对齐（默认）
flex-end	向主轴结束的位置对齐
center	主轴方向居中对齐
space-around	剩余空间主轴方向上以环绕的方式平均分配给项目
space-between	剩余空间主轴方向上项目之间平均分配
space-evenly	剩余空间主轴方向上平均分配

        4、align-items：定义项目在交叉轴上的对齐方式

stretch	如果项目未设置高度或设为auto，将占满容器的高度
flex-start	向交叉轴轴开始的位置对齐
flex-end	向交叉轴结束的位置对齐
center	交叉轴方向居中对齐
baseline	项目的第一行文字的基线对齐

        5、align-content：定义多根轴线的对齐方式，主要作用于换行时给交叉轴上的项目设置的对齐方式

                如果项目只有一条轴线，则该属性不起用

flex-start	向交叉轴轴开始的位置对齐
flex-end	向交叉轴结束的位置对齐
center	交叉轴方向居中对齐
space-around	剩余空间交叉轴方向上以环绕的方式平均分配给项目
space-between	剩余空间交叉轴方向上项目之间平均分配
space-evenly	剩余空间交叉轴方向上平均分配
stretch	轴线占满整个交叉轴

五、项目的属性

        1、项目属性

order	定义项目的排列顺序，数值越小，项目越靠前排列（默认值为0，可以是负值）
flex-grow	定义项目的放大比例（默认为0，即如果有剩余空间也不放大）
flex-shrin	定义项目的缩小比例（默认为1，即如果空间不足，该项目不缩小，不可为负值，大于1的值为缩小的倍数）
flex-basis	定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，己算主轴是否有空间。（认值为auto，即项目的本来大小）
flex	flex-grow flex-shrink flex-basis 简写（默认值为 0 1 auto ）

2、align-self：允许单个项目有与其他项目不一样的对齐方式。

        该属性会覆盖align-items属性（默认值为auto，继承容器的对齐方式）

        

stretch	如果项目未设置高度或设为auto，将占满容器的高度
flex-start	向交叉轴轴开始的位置对齐
flex-end	向交叉轴结束的位置对齐
center	交叉轴方向居中对齐
baseline	项目的第一行文字的基线对齐