<sup id="aujsq"></sup>
    <noscript id="aujsq"><nobr id="aujsq"></nobr></noscript>

    <tr id="aujsq"></tr>

  1. <output id="aujsq"></output>
    1. <ins id="aujsq"><acronym id="aujsq"></acronym></ins>

    2. 龍巖易富通網絡科技有限公司

      龍巖小程序開發,龍巖分銷系統

      深入解析CSS FlexBox

      2021.07.03 | 1237閱讀 | 0條評論 | css

      justify-content

      justify-content決定了內容元素與整個Flexbox的“水平對齊”位置,回想一下最上面講的Flexbox盒子模型,具有main start與main end左右兩個端點,justify-content就是按照這個方式做設定,而其中的設定值總共有下列五個。


      flex-start:預設值,對齊最左邊的main start

      flex-end:對齊最左邊的main end

      center:水平居中

      space-between:平均分配內容元素,左右元素將會與main start和main end貼齊

      space-around:平均分配內容元素,間距也是平均分配

      4d1dea46443c98e7a8d43c6b92e63776.jpg


      align-items

      align-items剛好和justify-content相反,align-items決定了內容元素與整個Flexbox的“垂直對齊”位置,再回想一下最上面講的Flexbox盒子模型,具有cross start與cross end左右兩個端點,align-items與align-self就是按照這個方式做設定,設定值總共有下列五個。


      flex-start:對齊最上面的cross start

      flex-end:對齊最下面的cross end

      center:垂直居中

      stretch:預設值,將內容元素全部撐開至Flexbox的高度

      baseline:以所有內容元素的基線作為對齊標準

      842a487252c378eb9a8dab8d549edd80.jpg

      贊 (

      發表評論

      无码一区二区三区