CSS-弹性布局

弹性布局(Flexible Layout)
   1、什么是弹性布局
       弹性布局，一种布局方式，主要是解决某元素中"子元素"的布局方式。为布局提供最大的灵活性
   2、相关概念
       1、弹性布局的容器
           父元素，称为"弹性布局容器"，简称为"容器"
       2、弹性布局的项目
           要实现布局效果的元素，称为"弹性布局的项目"简称为"项目"
       3、主轴(Main Axsis)
           决定项目们排列方向的一根轴，称为主轴
           如果项目们按x轴排列的话(横向排列)，那么x轴就是主轴
           如果项目们按y轴排列的话(纵向排列)，那么y轴就是主轴
       4、交叉轴(Cross Axsis)
           与主轴相交叉的一根轴，就是交叉轴
           如果主轴是x轴的话，那么y轴就是交叉轴
           如果主轴是y轴的话，那么x轴就是交叉轴
   3、语法
       1、弹性布局的容器
           只有将元素变为弹性布局的容器后，子元素们才能按照弹性布局的方式进行排列
           如何将元素变为弹性布局的容器呢？？？
           属性：display
           取值：
               1、flex
                   将块级元素变为弹性布局容器
               2、inline-flex
                   将行内元素变为弹性布局容器
           注意：
               1、元素变为容器后，子元素的float,clear,vertical-align将全部失效
               2、元素变为容器后，子元素将变为块级元素，尺寸，外边距都可以正常处理
               3、容器的 text-align 属性，也会失效
       2、容器的属性
           该组属性是要加载在容器上的，负责控制所有项目的特征的
           1、flex-direction
               作用：指定容器的主轴及其排列方向
               取值：
                   1、row
                       默认值，主轴为x轴，起点在左端(从左向右排列)
                   2、row-reverse
                       主轴为x轴，起点在右端(从右向左排列)
                   3、column
                       主轴为y轴，起点在顶端
                   4、column-reverse
                       主轴为y轴，起点在底端
           2、flex-wrap
               作用：当一个主轴排列不下所有项目时，该如何换行
               取值：
                   1、nowrap
                       默认值，即空间不足时，也不换行，但项目会自动缩小
                   2、wrap
                       换行
                   3、wrap-reverse
                       换行，向上换行
           3、flex-flow
               作用：是 flex-direction 和 flex-wrap的缩写
               取值：
                   1、row nowrap (默认值)
                   2、direction wrap
           4、justify-content
               作用：定义项目在主轴上的对齐方式
               取值：
                   1、flex-start
                       在主轴的起点对齐
                   2、flex-end
                       在主轴的终点对齐
                   3、center
                       在主轴上居中对齐
                   4、space-between(重点)
                       两端对齐
                   5、space-around
                       每个项目两端的距离是相等的
           5、align-items
               作用：定义项目在交叉轴上的对齐方式
               取值：
                   1、flex-start
                       在交叉轴的起点对齐
                   2、flex-end
                       在交叉轴的终点对齐
                   3、center
                       在交叉轴上居中对齐
                   4、baseline
                       在交叉轴上基线对齐
                   5、stretch
                       默认值，如果项目未设置尺寸，将在交叉轴上沾满所有的空间

猜你喜欢