flax 布局中 justify-content 和 align-content 屬性,以及 text-align 和 align 的用法


justify-content

在 flax 布局中,justify-content 用於設置或檢索彈性盒子元素在主軸(橫軸)方向上的對齊方式。

示例:

       <div style="display: flex; justify-content: space-between">
            <el-button size="small" type="primary" icon="el-icon-plus">添加工資賬套</el-button>
            <el-button size="small" type="success" icon="el-icon-refresh"></el-button>
        </div>

justify-content 的屬性值如下:

align-content

在 flax 布局中,align-content 屬性在彈性容器內的各項沒有占用交叉軸上所有可用的空間時對齊容器內的各項(垂直)。

注意:容器內必須有多行的項目,該屬性才能渲染出效果。

align-content 的屬性值如下:

text-align 與 align

  • align :規定 div 元素中的內容的水平對齊方式。
  • text-align:規定“元素中”的文本的水平對齊方式。

兩個屬性使用的地方不一樣,但是作用一樣。

示例:

<div align="center"> 
  This is some text! 
</div> 

-----------

<div style="text-align:center"> 
  This is some text! 
</div> 

參考資源

https://blog.csdn.net/qq_42058441/article/details/86555589

https://www.runoob.com/cssref/css3-pr-align-content.html

https://www.runoob.com/cssref/css3-pr-justify-content.html?_t_t_t=0.005738589571130381

每天學習一點點,每天進步一點點。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM