Flex佈局

 

1.實現左右居中，上下居中：（規定盒子）

display: flex;

justify-content: center;　　　　

align-items: center;

 

--------------------------------------

display: flex;

align-content: space-between;　　【靠着外邊】：向上/向下-互斥

 -------------------------------------

/* 換行 */

flex-wrap: wrap;

------------------------------------

/* 右 */

justify-content: flex-end

========================

控制x軸的：橫向

1.　　justify-content: flex-end　　（默認居左，end爲右）

=================================================================== 

 

Flex容器的屬性

 

flex佈局　　彈性盒子佈局模型【自適應】6

容器能夠控制內部元素高度和寬度

flex direction　　佈局方向

 

 

---------------------------------------

原始樣式：

 

 

=================================================

 

justify-content: space-around;

/*

　　設置容器內部元素的對齊方式 默認:flex-start

　　1.flex-start 默認 左對齊

　　2.flex-end 右對齊

　　3.center 居中對齊

　　4.space-between 設置容器內元素直接的等量間隙

　　5.justify-content: space-around; 設置元素之間的間隙

*/

----------------------------------------------------------------------

justify-content: center;

 

------------------------------------------------------

justify-content: flex-end;　　　　【右對齊】

 

 -------------------------------------------

justify-content: space-between;

------------------------------------------------------

justify-content: space-around;

 

 -------------------------------------------------------

 align-items:　　每一個元素再交叉軸上的對齊方式

 

1.flex-start,flex-end

2.conter

3.baseline,stretch

 ===================================

align-content:多軸線的對齊方式（把每一個軸線視爲元素，至少要有兩個軸線）

1.flex-start:　　向上（左）對齊

2.flex-end:　　向下（右）對齊

3.conter:　　居中對齊

4.stretch:　　默認，當元素自己沒有設置高度，則拉伸到整個容器

5.space-between：　　設置多軸線之間的等量間隙

5.space-around：　　設置多軸線之間的間隙，以及兩邊的間隙

-------------------------------------------------------------