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;
            }