关于flex

flex是一种布局方案，在flex中取消了浮动的概念

flex四大容器

容器：如果在一个盒子上面，设置display:flex，那么这个盒子就是一个容器项目：容器的直接子元素，叫项目
主轴：在容器中，项目默认是按主轴方向排列，默认是从左向右排列
交叉轴：与主轴垂直的那个轴

容器相关的属性：

   flex-direction：改变主轴方向  row   column  row-reverse  column-reverse
   flex-wrap:项目足够多的时候，是否换行  wrap  nowrap
   flex-flow:flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
   justify-content:处理富余空间  flex-start  flex-end  
   center   space-between  space-around
   align-items: 定义项目在交叉轴上如何对齐  flex-start  flex-end   center
   align-content :当有多根主轴时，多根主轴的对齐方式。
   相当于处理垂直方向上的富余空间。

项目相关的属性：

  order：是用来改变项目的顺序的
  flex-grow：让某个项目生长
  flex-shrink：让某个项目压缩
  flex-basis：项目在主轴上占据的大小
  flex：上面几个属性的简写方式
  align-self：单独设置某个项目的对齐方式,单独一个项目在交叉轴的对齐方式

色子模型


    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            width: 200px;
            height: 200px;
            display: flex;
            border: 2px solid red;
            float: left;
            margin: 10px 0 0 20px;
        }

        .circle {
            border: 30px solid black;
            border-radius: 30px;
            width: 0;
            height: 0;
        }

        .f1 {
            justify-content: center;
            align-items: center;
        }

        .f2 {
            justify-content: space-around;
            flex-direction: column;
            align-items: center;
        }

        .f3 {
            justify-content: space-around;
            align-items: center;
        }

        .c3:nth-of-type(1) {
            align-self: flex-start;
        }

        .c3:nth-of-type(3) {
            align-self: flex-end;
        }

        .f4 {
            justify-content: space-around;
            flex-direction: column;
        }

        .f5 {
            flex-direction: column;
            justify-content: space-around;
        }

        .f6 {
            flex-direction: column;
            justify-content: space-around;
        }

        .son {
            display: flex;
            justify-content: space-around;
        }
    </style>
    
    <body>
        <div class="father f1">
            <div class="circle c1"></div>
        </div>
        <div class="father f2">
            <div class="circle c2"></div>
            <div class="circle c2"></div>
        </div>
        <div class="father f3">
            <div class="circle c3"></div>
            <div class="circle c3"></div>
            <div class="circle c3"></div>
        </div>
        <div class="father f4">
            <div class="son">
                <div class="circle c4"></div>
                <div class="circle c4"></div>
            </div>
            <div class="son">
                <div class="circle c4"></div>
                <div class="circle c4"></div>
            </div>
        </div>
        <div class="father f5">
            <div class="son">
                <div class="circle c5"></div>
                <div class="circle c5"></div>
            </div>
            <div class="son">
                <div class="circle c5"></div>
            </div>
            <div class="son">
                <div class="circle c5"></div>
                <div class="circle c5"></div>
            </div>
        </div>
        <div class="father f6">
            <div class="son">
                <div class="circle c6"></div>
                <div class="circle c6"></div>
            </div>
            <div class="son">
                <div class="circle c6"></div>
                <div class="circle c6"></div>
            </div>
            <div class="son">
                <div class="circle c6"></div>
                <div class="circle c6"></div>
            </div>
        </div>
    </body>

前端孵化日记（三）从色子模型认识flex

关于flex

flex四大容器

容器相关的属性：

项目相关的属性：

色子模型