flex-start详解

一、什么是flex-start

在进行flex布局时，有一个很重要的属性就是justify-content，它用于设置项目在主轴上的对齐方式。其中，flex-start表示项目从主轴起点开始，依次排列。

比如，下面示例代码中的.red和.green都设置为flex-start，它们将从起点开始依次排列。

    
        <div style="display: flex; justify-content: flex-start;">
            <div class="red"></div>
            <div class="green"></div>
        </div>
        

        
            .red {
                width: 100px;
                height: 100px;
                background-color: red;
                align-self: flex-start;
            }
            

            .green {
                width: 100px;
                height: 150px;
                background-color: green;
                align-self: flex-start;
            }
        
    

二、实战应用

flex-start不仅可以设置项目在主轴上的对齐方式，在实际开发中也有许多应用场景。

1、导航菜单

在导航菜单中，我们希望所有的菜单项都从最左边开始排列，这时就可以使用flex-start。

    
        <ul style="display: flex; justify-content: flex-start;">
            <li>菜单1</li>
            <li>菜单2</li>
            <li>菜单3</li>
        </ul>
    

2、相册排列

在相册中，我们也希望图片从左到右依次排列，这时也可以使用flex-start。

    
        <div style="display: flex; flex-wrap: wrap; justify-content: flex-start;">
            <img src="1.jpg">
            <img src="2.jpg">
            <img src="3.jpg">
            <img src="4.jpg">
            <img src="5.jpg">
            <img src="6.jpg">
        </div>
    

3、按钮排列

在按钮排列中，我们也可以使用flex-start，来实现从左到右依次排列的效果。

    
        <div style="display: flex; justify-content: flex-start;">
            <button>按钮1</button>
            <button>按钮2</button>
            <button>按钮3</button>
        </div>
    

三、flex-start与其他属性的混合使用

在实际开发中，我们也经常需要将flex-start与其他属性进行混合使用。

1、align-items与flex-start的混合使用

align-items用于设置项目在交叉轴上的对齐方式，当align-items与flex-start一起使用时，项目将在交叉轴起点进行对齐。

    
        <div style="display: flex; align-items: flex-start;">
            <div class="red"></div>
            <div class="green"></div>
        </div>
        

        
            .red {
                width: 100px;
                height: 150px;
                background-color: red;
            }
            

            .green {
                width: 100px;
                height: 100px;
                background-color: green;
            }
        
    

2、flex-direction与flex-start的混合使用

flex-direction用于设置主轴的方向，当flex-direction为column且justify-content设置为flex-start时，项目将从主轴起点依次排列。

    
        <div style="display: flex; flex-direction: column; justify-content: flex-start;">
            <div class="red"></div>
            <div class="green"></div>
        </div>
        

        
            .red {
                width: 100px;
                height: 100px;
                background-color: red;
            }
            

            .green {
                width: 150px;
                height: 100px;
                background-color: green;
            }
        
    

3、gap与flex-start的混合使用

gap用于设置项目之间的间距，在使用flex-start时，可以使项目之间的间距从起点开始。

    
        <div style="display: flex; justify-content: flex-start; gap: 10px;">
            <div class="red"></div>
            <div class="green"></div>
        </div>
        

        
            .red {
                width: 100px;
                height: 100px;
                background-color: red;
            }
            

            .green {
                width: 100px;
                height: 150px;
                background-color: green;
            }