Typical case of Flex layout application

1. The width of the left and right sides is fixed at 100px, and the middle width is adaptive according to the screen width

.

<div class="main">
        <div class="box1">
            左侧
        </div>
        <div class="box2">
            中间
        </div>
        <div class="box3">
            右侧
        </div>
    </div>

.main {
    
    
    /* 占父盒子宽度的100% */
    width: 100%;
    height: 40px;
    background: #999;
    /* 父盒子设置flex */
    display: flex;
    color: #fff;
    line-height: 40px;
    text-align: center;
}

.main .box1,
.main .box3 {
    
    
    /* box1，box3固定宽度 */
    width: 100px;
    height: 40px;
    background: pink;
}

.main .box2 {
    
    
    /* box2占据剩余宽度 */
    flex: 1;
    height: 100%;
    background: blue;
}

2. The child box is centered horizontally and vertically in the parent box ( other ways )

:

<div class="box">
        <div class="childrenBox">

        </div>
    </div>

.box {
    
    
    width: 400px;
    height: 400px;
    background: #666;
    /* 父级设置flex */
    display: flex;
    /* 设置主轴上的子元素排列方式：居中 */
    justify-content: center;
    /* 设置侧轴上的子元素排列方式：居中（单行） */
    align-items: center;
    border-radius: 10px;
}

.childrenBox {
    
    
    width: 100px;
    height: 100px;
    background: #999;
}

3. The parent box has a width of 500 and a height of 400. There are 6 child boxes in the parent box with a width and height of 150*150. The child boxes are displayed in two rows in three rows, and the left and right spacing of the child boxes are equal, and the upper and lower spacings are equal

achieve:

<ul class="box">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
</ul>

.box {
    
    
    width: 500px;
    height: 400px;
    padding: 0;
    background: #ccc;
    display: flex;
    list-style: none;
    display: flex;
    /*  换行显示 */
    flex-wrap: wrap;
    /*  设置主轴 间距平均分配 */
    justify-content: space-around;
    /*  设置侧轴 间距平均分配(子项多行显示的情况) */
    align-content: space-around;
}

.box li {
    
    
    width: 150px;
    height: 150px;
    background: pink;
}```