弹性布局flex

弹性布局flex

主轴

  /* 给父元素添加  */
            display: flex;
            /* 子元素两边靠边,中间自适应 */
            justify-content: space-between;
            /* 子元素,两边宽度比中间宽度为 1:2 */
            justify-content: space-around;
            /* 从开始位置依次靠右排 */
            justify-content: start;
            /* 从结束位置依次靠左排 */
            justify-content: flex-end;
            /* 全部等比例排 */
            justify-content: space-evenly;
            /* 居中 */
            justify-content: center;

侧轴

给父元素加

 /* 从开始排列盒子 */
            align-items: start;
            /* 居中 */
            align-items: center;
            /* 从下排列盒子 */
            align-items: end;
            /* 默认值  拉伸 */
            align-items: stretch;

给子元素加

.box div:first-child {
            /* 侧轴 从开始依次排列 */
            align-self: start;
            
        }
​
        .box div:nth-child(2) {
            background-color: aqua;
            /* 居中 */
            align-self: center;
        }
        /* 从结束往前依次排 */
        .box div:last-child {
            align-self: flex-end;
        }

圣杯布局

 .box{
            width: 100%;
            height: 50px;
            background-color: pink;
            display: flex;
            /* 最小伸缩值 */
            min-width: 400px;
            /* 最大伸缩值 */
            max-width: 500px;
        }
        .left,
        .fight{
            width: 50px;
            height: 50px;
            background-color: blue;
        }
        .center{
            /* 伸缩比 */
            flex: 1;
            width: 50px;
            background-color: gold;