Html align-items(為彈性容器內的項目指定默認對齊方式) justify-content(用於設置或檢索彈性盒子元素在主軸(橫軸)方向上的對齊方式) display:flex(彈性布局)


一、align-items 屬性 為彈性容器內的項目指定默認對齊方式。

1.stretch:默認。項目被拉伸以適合容器。

2.center:項目位於容器的中央。

3.flex-start:項目位於容器的開頭。

4.flex-end:項目位於容器的末端。

5.baseline:項目被定位到容器的基線。

6.initial:將此屬性設置為其默認值。

7.inherit:從其父元素繼承此屬性。

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

/* 對齊方式 */
justify-content: center;     /* 居中排列 */
justify-content: start;      /* 從行首開始排列 */
justify-content: end;        /* 從行尾開始排列 */
justify-content: flex-start; /* 從行首起始位置開始排列 */
justify-content: flex-end;   /* 從行尾位置開始排列 */
justify-content: left;       /* 一個挨一個在對齊容器得左邊緣 */
justify-content: right;      /* 元素以容器右邊緣為基准,一個挨着一個對齊, */

/* 基線對齊 */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;

/* 分配彈性元素方式 */
justify-content: space-between;  /* 均勻排列每個元素
                                   首個元素放置於起點,末尾元素放置於終點 */
justify-content: space-around;  /* 均勻排列每個元素
                                   每個元素周圍分配相同的空間 */
justify-content: space-evenly;  /* 均勻排列每個元素
                                   每個元素之間的間隔相等 */
justify-content: stretch;       /* 均勻排列每個元素
                                   'auto'-sized 的元素會被拉伸以適應容器的大小 */

/* 溢出對齊方式 */
justify-content: safe center;
justify-content: unsafe center;

/* 全局值 */
justify-content: inherit;
justify-content: initial;
justify-content: unset;

三、display:flex彈性布局

https://segmentfault.com/a/1190000018233450


免責聲明!

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



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